javascript - 使用 ReactJS 构建时，Chrome 扩展内容脚本不会注入(inject) DOM

Question

我正在尝试使用 React 构建一个 chrome 扩展。我已经弹出 create-react-app 并进行了必要的更改以发出包含在 manifest.json 中的 content.chunk.js 作为下面

{
  "manifest_version": 2,
  "version": "0.0.1",
  "name": "My extension",
  "description": "Some description",
  "permissions": [],
  "browser_action": {
    "default_title": "My extension",
    "default_popup": "index.html"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "css": ["/static/css/content.chunk.css"],
    "js": ["/static/js/content.chunk.js"]
  }]
}

我的 content.js

import React from 'react';
import ReactDOM from 'react-dom';
import Main from 'extensionContainers/Main';

alert('bazooka!');
const app = document.createElement('div');
app.id = "extension-root";
document.body.appendChild(app);

ReactDOM.render(<Main />, app);

构建后，当我加载我的扩展时，这没有任何作用。但是，当我将 webpack 生成的 content.chunk.js 的内容编辑为 alert("something") 时，扩展工作正常并在每个 URL 上显示警报。

为什么我的 React 代码没有做任何事情？没有错误日志。

Answer 1

如果其他人偶然发现了这个问题，请回答我自己的问题。

所以，我意识到 create-react-app@3.0.1 弹出的 Webpack 配置启用了代码拆分配置。这是从我的代码中拆分 React 库代码，使其无法执行。

以下是我在 webpack 配置中更改的设置，以使其正常工作。 (注意，只有在开发 chrome 扩展时才建议这样做)

在webpack.config.js中去掉optimization节点下splitChunks的配置，将runtimeChunk设置为错误。

...
optimization: {
  .
  .
  // remove spitChunks config
  splitChunks: {
     chunks: 'all',
     name: false,
  },
  runtimeChunk: true, // set this to false
}
...

生成的包现在将命名为 content.js(将 content 视为入口点)将此 content.js 链接到 content_scripts 下的 manifest.json 中，您就可以开始了。