reactjs - 将 React 组件注入页面和热重载的 Chrome 扩展 - 结合两个样板项目

Question

目标

创建一个 chrome 扩展，将 React 组件作为弹出窗口注入到页面上。扩展需要热重载。

我在哪里

我发现了两个让我非常接近的 git repos。一个 repo是样板，它允许我热重新加载扩展。另一个是样板，允许我将弹出窗口注入任何选项卡。

这两个回购也有我遵循的这两个教程：

• chrome-extension-live-reloading-with-react
• 使用注入页面策略使用 ReactJS 创建 chrome 扩展

我认为将两者结合起来很容易，但无论我采用哪种方式，我都陷入了死胡同。我也将我的版本上传到 github，并在每个自述文件中包含了有关我尝试过的内容的更多详细信息。您可以下载它们并按照自述文件或教程中的说明复制我的错误。

• https://github.com/willliuwillliu/reactextensioninject
• https://github.com/willliuwillliu/chrome-ext-hot-reload

我怀疑我的问题来自使用不同版本的弹出 CRA 或 webpack 的两个存储库。我注意到构建脚本以不同的方式输出内容脚本/文件夹。我不知道如何改变这一点。

如果我可以像在 reactextensioninject 中那样让构建脚本在 chrome-ext-hot-reload 存储库中输出内容脚本，那么我认为一切都会正常工作。

或者，如果我可以让一个热重载插件在 中工作reactextensioninject，那么它也应该没问题。

我的问题

1. 我是开发 chrome 扩展的新手。做我认为很简单的事情似乎非常困难。我在这里采取了错误的方法吗？你知道更好的方法吗？
2. 你能看一下回购，让我知道是否有什么办法可以解决这个问题吗？我已经坚持了一天多。

提前非常感谢。

标签： reactjsgoogle-chromegoogle-chrome-extensioncontent-scripthot-reload