React Chrome 扩展的热/实时重新加载？

Question

有没有一种简单的方法可以做到这一点？ 目前，我每次都重新运行构建以查看更新。

我尝试了此处链接的解决方案，但它仍然需要我每次手动构建。

我尝试使用这个 package Chrome 扩展热重载，但尽管在安装后从站点复制代码，但它说 HotReload 没有从 package 导出，所以我什至无法运行启动或连接。

Answer 1

我花了几天时间来解决这个问题，我通过 CRA 拒绝创建了一个 repo，它适用于 Manifest V3 和内容脚本。

1. 使用webpack的HRM实现热重载。
2. 使用React-refresh实现部分刷新。

create-react-app 已经完成了以上所有工作。

最后，利用后台和内容的通信，chrome.runtime.reload 可以在内容改变时重新加载crx。

这是一个例子： cra-crx-boilerplate

Answer 2

如果您使用的是 WebPack，您可以通过几个步骤实现此目的（无需安装任何特殊插件）：

在您的 WebPack 配置中，将您的开发服务器设置为将文件写入磁盘，而不是从 memory 提供它们：

devServer: {
    devMiddleware: {
        writeToDisk: true,
    },
}

并将您的 output 设置为您告诉 Chrome 从以下位置加载扩展程序的位置：

output: {
    path: 'path/to/build/',
},

确保您想要热重载的所有 HTML 文件都经过 WebPack，而不是静态复制到目标文件夹。 您可以使用html-webpack-plugin生成这些 HTML 文件：

entry: {
    index: 'path/to/index.js',
}
plugins: {
    new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['index'], // Should correspond to the entry point name
    }),
}

Answer 3

如果您使用 Manifest V3，简短的回答是否定的。

它不依赖于框架，而是更多关于 chrome 以及它如何管理扩展。

您可以在此处阅读更多相关信息： https://groups.google.com/a/chromium.org/g/chromium-extensions/c/pYtdXH0f46E?pli=1