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

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

  • 多端同步

  • 比较多的模板

  • 非常方方便做知识管理。

  • 粘贴图片到内容中,时候刚需。

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

  • 登录的时候需要收邮箱验证码,个人觉得安全虽然安全,但是显得有些低效。

  • 缺乏一个图片插入插件,我希望是唤起之后直接搜索一些表情图片,插入到文档流中。毕竟这样可以给文章的生动性增加不少得分呢。

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

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

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

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

  • 主要的功能,需要一个快捷键在notion页面唤起我们的图片搜索框

  • 搜索图片,我调研了下,目前API采用giphy的图源

  • 点击图片插入到文档流中,当然这个需要调研notion是否开放了这样的接口,是在不ok,点击后复制图片或图片链接,插入。

  • 支持配置API key,如果免费共享自己的key,可能使用的人多了很快就限频了。

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

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

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

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

scss 复制代码
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,健退出图片搜索插件。

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

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

ini 复制代码
 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);
      });
  }

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

点击,图片,我预期是直接插入到notion的文档流当中,但是这个API我看了下,没找到路径,因此我直接复制图片地址了,这样粘贴到notion当中,也是ok的。

全部代码:https://gist.github.com/bravekingzhang/aa47fa43d1022bbcd1547979d3931e3a

探索代码的无限可能,与老码小张一起开启技术之旅。点关注,未来已来,每一步深入都不孤单。

相关推荐
莫的感情14 分钟前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥18 分钟前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python23 分钟前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_23 分钟前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
Github项目推荐25 分钟前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊30 分钟前
C语言bsearch的使用
java·c语言·前端
云枫晖31 分钟前
Webapck系列-初识Webpack
前端·javascript
慧一居士34 分钟前
HTML5 功能介绍,使用场景,对应功能点完整使用示例
前端
海在掘金6112742 分钟前
告别“undefined is not a function”:TS如何让你的函数调用更安心
前端
云中雾丽44 分钟前
Flutter中Stream的各种使用场景和实现方式
前端