写了一个插件，轻松让notion支持搜索插入表情图片

原创

老码小张

修改于 2024-02-29 13:30:30

33900

代码可运行

文章被收录于专栏：玩转全栈玩转全栈

运行总次数：0

代码可运行

之前用过很多的App来写作，最终，现在已经基本上转在notion上写作了，其他的已经不怎么用了，虽然是免费版本的，但是也基本上够用了，我认为大概有几个方面比较吸引我：

多端同步
比较多的模板
非常方方便做知识管理。
粘贴图片到内容中，时候刚需。

但是也有一些不爽的地方，好在也不是常用功能，比如

登录的时候需要收邮箱验证码，个人觉得安全虽然安全，但是显得有些低效。
缺乏一个图片插入插件，我希望是唤起之后直接搜索一些表情图片，插入到文档流中。毕竟这样可以给文章的生动性增加不少得分呢。

如何解决notion不方便插入表情图片的问题。

我最直接的方式是写一个chrome插件，给notion定制一下，让他有支持在编辑文档的时候可以插入图片的能力，后面了解了一些，还不如直接写一个油猴脚本。

如是，我先理了一下思路。

首先，我们需要看看这个油猴脚本包含哪些功能。

主要的功能，需要一个快捷键在notion页面唤起我们的图片搜索框
搜索图片，我调研了下，目前API采用giphy的图源
点击图片插入到文档流中，当然这个需要调研notion是否开放了这样的接口，是在不ok，点击后复制图片或图片链接，插入。
支持配置API key，如果免费共享自己的key，可能使用的人多了很快就限频了。

ok，说干就干，我把搜索界面设置为这样

我是用快捷键 ctrl + shift + i唤起我们的表情搜索框。简单的实现如下：

 document.addEventListener('keydown', function(event) {
    if (
      (event.ctrlKey || event.metaKey) &&
      event.shiftKey &&
      event.code === 'KeyI'
    ) {
      console.log('Search image clicked');
      createSearchPanel();
    }
  });

左上角，我放置了一个设置页面的入口，点击会弹出设置API key的页面，用户可以配置自己的apikey ，这是自己请求图片的凭据。是存放在本地的。

function saveApiKey() {
    let apiKey = document.getElementById('api-key-input').value;
    console.log('Saving API key:', apiKey);
    //trim
    apiKey = apiKey.trim();
    //check apiKey
    if (apiKey) {
      GM_setValue('apiKey', apiKey);
      alert('API Key saved successfully!');
    } else {
      alert('Please enter an API key.');
    }
  }

右上角，我放置了一个关闭按钮，当然，你可以可以按 ESC，健退出图片搜索插件。

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
      document.getElementById('imageSearchPanel').remove();
    }
  });

接下来就是需要做图片搜索了，

 function searchImages(query) {
    //console.log('Searching for:', query);
    const apiKey = GM_getValue('apiKey', '');
    if (!apiKey) {
      alert('Please enter an API key，by clicking the settings button.');
      return;
    }
    // search for images from giphy API
    const url = `https://api.giphy.com/v1/gifs/search?api_key=${apiKey}&q=${encodeURIComponent(
      query
    )}&limit=20&rating=g&lang=zh-CN&bundle=messaging_non_clips`;
    fetch(url)
      .then(response => response.json())
      .then(data => {
        //console.log('API response:', data.data);
        displayImages(data.data);
      });
  }

搜索到的图片显示在下面。