lamp 网站建设论文,影视app搭建教程,微信公众号内容编辑及排版,电商营销推广方案文章目录前言要点通信方式注意事项参考前言
第一次接触到插件开发#xff0c;起因是我用了十多年的一键上传需要升级了。之前的版本来自于有道云#xff0c;是通过在书签栏加一个书签#xff0c;然后将上传功能注入到当前页面的方式来实现的。一直也用得挺好#xff0c;挺…
文章目录前言要点通信方式注意事项参考前言
第一次接触到插件开发起因是我用了十多年的一键上传需要升级了。之前的版本来自于有道云是通过在书签栏加一个书签然后将上传功能注入到当前页面的方式来实现的。一直也用得挺好挺稳定但有诸多限制最主要是管理起来比较麻烦。于是决定采用chrome插件重写。
要点
推荐采用v3版本的插件规范v2在2023年就不支持了。插件可以通过Vue等前端框架开发一个插件可以调用通常的js函数还能调用chrome提供的一些APIv2和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 onclickhandler()Click this/a !-- Bad --要改成
a idclick-thisClick 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这两个插件比较庞大。
