这是一个 webpack 打包工具的 plugin,只有浏览器插件开发者用得到,功能类似 webpack 本身就有的 dev-server!

基于 webpack5 和 websocket, 实现浏览器扩展(插件)开发阶段编译完成自动刷新功能!**此版本为破坏性重构版,不兼容历史版本**

安装使用:

1. 安装

npm install ws-reload-plugin --save-dev

2. webpack.config.js 配置文件中引入此模块,必须传入 content 和 background 的编译输出文件名,比如你打包后的文件目录是 dist/content.js 和 dist/service/background.js, 则按下面传参;

const { wsAutoReloadPlugin } = require("ws-reload-plugin");
plugins: [
  new wsAutoReloadPlugin({
    port: 2021, // 选传,  默认2021
    entryFiles: {
      // 必须传参
      content: "./content.js", // content 输出文件path
      background: "./service/background.js", // background 输出文件path
    },
    autoRun: { content: true, background: true }, // 选传, 默认都为true
  }),
];

3. 此插件会自动在 content 文件插入 websocket 代码, 创建一个createWsConnect函数, background 文件插入监听代码, 创建一个bgdListenMsg函数, 默认会直接在顶层调用`

4. 如果你想在 content 里自定义控制创建调用, 比如只想在某些页面挂载,请传入参数 {autoRun: { content: false}}, 然后自行调用函数createWsConnect()即可

5. 如果你想在 service worker 里自定义控制监听和刷新时机, 请传入参数 {autoRun: { background: false}}, 然后添加以下代码到你的自定义逻辑中

//const bgdListenMsg = () => {
//chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message == "compiler") {
  sendResponse("reload successful");
  chrome.tabs.query({ url: sender.url }, ([tab]) => {
    if (tab) {
      chrome.tabs.reload(tab.id);
      chrome.runtime.reload();
    }
  });
}
//  });
//};

实现原理:

• 1.在 node 环境下创建 websocket 服务端与客户端，每次编译完成后通过 webpack 钩子(hook)发送信息给 content 客户端；(为什么不直接发送给 background？因为 v3 改为 service worker，有自动休眠机制)
• 2.content 客户端收到消息后再发送给 service worker(background)
• 3.service worker 监听命令并执行刷新