chrome插件开发备忘录

前言

第一次接触到插件开发，起因是我用了十多年的一键上传需要升级了。之前的版本来自于有道云，是通过在书签栏加一个书签，然后将上传功能注入到当前页面的方式来实现的。一直也用得挺好，挺稳定，但有诸多限制，最主要是管理起来比较麻烦。于是决定采用chrome插件重写。

要点

• 推荐采用v3版本的插件规范，v2在2023年就不支持了。
• 插件可以通过Vue等前端框架开发，一个插件可以调用通常的js函数，还能调用chrome提供的一些API，v2和v3的API差别要留意。
• 插件主要功能分布在popup, content-script和background三种类型的js文件中。popup和background可以进行跨域请求，content-script可以操作当前页面dom元素。三者可以通信，且传输的数据量上限size很大，尽可以放心在三者之间传输json数据
• v3中，background只允许指定一个单一的文件，没有了v2的background页面，这样如果要调用第三方库，只能import第三方库的模块了
• v3中，发送异步请求无需jquery和axios，直接采用fetch API即可

通信方式

• content_scripts向popup主动发消息的前提是popup必须打开！否则需要利用background作中转；
  如果background和popup同时监听，那么它们都可以同时收到消息，但是只有一个可以sendResponse，一个先发送了，那么另外一个再发送就无效；

注意事项

• popup不支持 inline script
  也就是说，下面写法不work:

<a onclick="handler()">Click this</a> <!-- Bad -->

要改成：

<a id="click-this">Click this</a> <!-- Fixed -->
And then attach the listener from a script (which must be in a .js file, suppose popup.js):// Pure JS:
document.addEventListener('DOMContentLoaded', function() {document.getElementById("click-this").addEventListener("click", handler);
});// The handler also must go in a .js file
function handler() {/* ... */
}

参考

• https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
• 参考了MrDoc和YoudaoNoteClipper，这两个插件比较庞大。