浏览器插件v3编译刷新工具
此篇只适用于浏览器插件开发者,manifest v3版本,webpack打包编译环境,自己手写的一个webpack plugin!
原理分析:
-
插件开发比较特殊,需要浏览器(Service workers)读取目录文件运行,在之前的v2中一般通过background监听文件变动从而刷新
-
而v3的service worker有自动休眠策略,所以用老方法强制常驻对性能会不太好
-
借由websocket和content发送刷新命令,原理其实和webpack devserver一样!
目前已发布npmjs包,如果你的开发是基于webpack打包,可以直接安装使用
npm i ws-reload-plugin -D
总体流程:
webpack启动的同时生成一个ws服务端和一个ws客户端,每次编译完成发送消息给content
content内部也创建一个ws客户端,当接收到消息时,通过sendMessage给Service worker(background)发送消息
Service worker执行runtime和tab刷新!
webpack的config文件里引入plugin
const {wsAutoReloadPlugin} = require('ws-reload-plugin')
const config = {
mode: 'development',
plugins: [ new wsAutoReloadPlugin() ]
}
content文件里引入,创建ws接收的客户端
const { createWsConnect } = require('ws-reload-plugin')
createWsConnect({})
Service workers(background文件里引入)监听消息
const { bgdListenMsg } = require('ws-reload-plugin')
bgdListenMsg()
npmjs源码地址: 点我直达
结束语:
1.插件开发不可避免地边界情况特别多,如果你在使用中发现bug,或者引入有任何异常报错,可以随时告知我我再排除下,避免大家踩不必要的坑,谢谢!