前言
第一次接触到插件开发，起因是我用了十多年的一键上传需要升级了。之前的版本来自于有道云，是通过在书签栏加一个书签，然后将上传功能注入到当前页面的方式来实现的。一直也用得挺好，挺稳定，但有诸多限制，最主要是管理起来比较麻烦。于是决定采用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即可
几种脚本的能力对照
| JS种类 | 可访问的API | DOM访问情况 | JS访问情况 | 直接跨域 |
|---|---|---|---|---|
| injected script | 和普通JS无任何差别，不能访问任何扩展API | 可以访问 | 可以访问 | 不可以 |
| content script | 只能访问 extension、runtime等部分API | 可以访问 | 不可以 | 不可以 |
| popup js | 可访问绝大部分API，除了devtools系列 | 不可直接访问 | 不可以 | 可以 |
| background js | 可访问绝大部分API，除了devtools系列 | 不可直接访问 | 不可以 | 可以 |
| devtools js | 只能访问 devtools、extension、runtime等部分API | 可以 | 可以 | 不可以 |
通信方式
Chrome Extension 设计了 popup，options，background，content_script，它们之间如果想要发生联系，必然要使用异步通信的方式来完成。
chrome.runtime 中定义这两种模式的监听器和连接器。
- 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() {
/* ... */
}
例子：网页剪报
网页剪报是把用户网页中选中的内容上传到服务端。
- 用户点击插件图标，pop js中发起请求
- content js收到请求，获得选中内容，发送消息给background.js
- background.js收到消息，通过跨域请求，提交给服务端
参考
- https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
- 参考了MrDoc和YoudaoNoteClipper，这两个插件比较庞大。