浏览器插件v3编译刷新工具

此篇只适用于浏览器插件开发者,manifest v3版本,webpack打包编译环境,自己手写的一个webpack plugin!

原理分析:

1. 插件开发比较特殊,需要浏览器(Service workers)读取目录文件运行,在之前的v2中一般通过background监听文件变动从而刷新
2. 而v3的service worker有自动休眠策略,所以用老方法强制常驻对性能会不太好
3. 借由websocket和content发送刷新命令,原理其实和webpack devserver一样!

目前已发布npmjs包,如果你的开发是基于webpack打包,可以直接安装使用, ws-reload-plugin,其他编译环境可以移步原理分析,自己移植修改下即可!

总体流程:

1. webpack启动的同时生成一个ws服务端和一个ws客户端,每次编译完成发送消息给content
2. content内部也创建一个ws客户端,当接收到消息时,通过sendMessage给Service worker(background)发送消息
3. Service worker执行runtime和tab刷新!

1.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()

结束语:

1. 这个工具自己已改进了n个版本,如果对你有帮助希望留个言正在用,我好统计下,谢谢!
2. 插件开发不可避免地边界情况特别多,如果你在使用中发现bug,或者引入有任何异常报错,可以随时告知我我再排除下,避免大家踩不必要的坑,谢谢!