javascript - 使用 Webpack 5 Boilerplate 构建 Chrome 扩展时如何 chrome.runtime.reload()？

Question

我正在使用 https://github.com/lxieyang/chrome-extension-boilerplate-react作为构建 chrome 扩展的基础。一切正常，而且 一切都可以热重载 (弹出窗口、背景、选项、newtab)除了内容脚本 .重新加载匹配的页面，不会重新加载底层 .js。需要重新加载/关闭整个扩展程序才能使更改生效。
因此，在 webpack.config.js 中，我注释掉了“contentScript”，希望它能解决这个问题，但它没有任何区别。

...
chromeExtensionBoilerplate: {
  notHotReload: [
    //'contentScript'
  ],
},
...

在 src/pages/Content/index.js 它实际上指出

console.log('Must reload extension for modifications to take effect.');

在用普通的 js 开发另一个扩展时，我从 https://github.com/xpl/crx-hotreload 中删除了一个 hot-reload.js效果很好。据我所知，是 'chrome.runtime.reload()' 调用使 chrome 完全重新加载扩展。
所以我的问题实际上是:

当更改 src/pages/Content/index.js 时，webpack 会重新构建 build/contentScript.bundle.js。但是为什么不手动重新加载选项卡/页面识别这些更改，当用于弹出窗口、背景等时呢？

如果没有办法让上述样板重新加载扩展(我不介意硬重新加载)，我如何才能将 hot-reload.js(或其实际效果)集成到这个样板中？也就是说，当 build/contentScript.bundle.js 更改时，我如何重新加载扩展？

提前致谢!

Answer 1

谁有兴趣。我最终将提到的 hot-reload.js 放在我的扩展程序中，并从后台脚本中加载它。通过在任何文件更改时重新加载整个扩展，这打破了 webpack 的热重新加载。但只要我只处理内容脚本，那很好。我可以在完成后删除它，或者如果我在其他脚本上工作。