vite/rollup 实现浏览器插件热更新

155 阅读1分钟

引入 rollup-plugin-chrome-extensions-hmr

# npm
npm install -D rollup-plugin-chrome-extensions-hmr

# yarn
yarn add rollup-plugin-chrome-extensions-hmr

该插件本质上是在 npm run build --watch 时,维护一个 ws 服务器,并与插件的 background 模块保持长连接。当发生内容更新时,插件将会通知插件调用 chrome.runtime.reload() 进行重载。 所以在使用时,必须要给插件传入 background 的地址。

import chromeExtensionsHmr from 'rollup-plugin-chrome-extensions-hmr';
import { resolve } from "path";

export default {
  // ....
  plugins: [
    chromeExtensionsHmr{
      backgroundPath: path.resolve(pagesDir, "background", "index.ts"), // background 模块的地址
      needWatchMode: true, // 是否要在监听模式下才将 ws 代码写入到 background 模块中
    }
  ]
}