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