如何运行 react（使用 webpack）作为 chrome 扩展答案

【问题标题】：How to run react (using webpack) as a chrome extension如何运行 react（使用 webpack）作为 chrome 扩展
【发布时间】：2017-03-10 15:04:19
【问题描述】：

我正在构建一个 chrome 扩展，但我想使用 react 来构建它。我不确定我需要如何配置我的 manifest.json 才能使其正常工作。

这是我的manifest.json 文件...

{
  "name": "Get pages source",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Get pages source from a popup",
  "browser_action": {
    "default_popup": "./src/index.html"
  },
  "permissions": ["tabs", "<all_urls>"]
}

现在我在本地运行我的应用程序的方式是使用package.json 中的以下脚本...

"scripts": {
    "dev": "webpack-dev-server --content-base src --inline --hot"
 }

我的应用显示在localhost:8080。但是，我希望在单击我的扩展程序时打开该应用程序。我怎样才能做到这一点？我需要引用本地主机的路径吗？

目前，当我运行我的扩展程序时，index.html 文件被加载，但没有呈现任何内容。有人能解释一下怎么做吗？

编辑

我也尝试了以下方法，但没有成功...

"browser_action": {
    "default_popup": "http://localhost:8080/src/index.html"
 },

【问题讨论】：

扩展应该包括本地包中的所有代码和页面，如弹出窗口，否则您必须使用 iframe。这样的例子很多。
您的 Chrome 扩展程序是否只能在您的计算机上运行？还是您想将其发布到 Chrome 网上应用店？
@wOxxOm 将它包含在包中是什么意思？就像将它们包含在我的清单文件中一样？
请注意，如果您继续在您的扩展程序中使用 localhost，那么它将无法在其他人的计算机上工作，因为他们不会设置服务器。而是在 index.html 中包含指向缩小 js 文件的链接，并使用 file://path/index.html 而不是 localhost:8080 测试您的应用程序
@Dhyey 如果它不能在其他人的计算机上运行，至少现在是这样。但我什至无法让它在本地工作。我尝试了上面的方法，但没有奏效。我的方法是通常的做法吗？

标签： json google-chrome reactjs google-chrome-extension webpack

【解决方案1】：

将 manifest.json 中的 default_popup 更改为“src/index.html”。

始终在打包扩展之前构建您的代码并使用 webpack 而不是 webpack-dev-server

package.json 中也缺少 babel-core 和 webpack-dev-server

这是工作扩展的截图：

开发截图：

当您发布排除 node_modules 文件夹的扩展时创建一个新文件夹（仅在您 npm run build 之后）

这里是更新代码的链接：https://drive.google.com/open?id=0ByrxEyIevnFmNXlDZERaRTBMSlE

请不要忘记在加载解压后的扩展之前运行 npm install 和 npm run build。

如果需要任何进一步的帮助，请发表评论。

【讨论】：