写了一个插件,轻松让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

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

相关推荐
风无雨9 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780091 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家1 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记2 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆2 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js