使用 ReactJS 构建时，Chrome 扩展内容脚本不会注入 DOM

Question

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

{
  "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 上显示警报。

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

Answer 1

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

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

这是我在 webpack 配置中更改的设置以使其正常工作。 （请注意，这仅在开发 chrome 扩展时才可取）

在webpack.config.js移除配置splitChunks下optimization节点，并设置runtimeChunk给false 。

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

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

Answer 2

现在，我们不再需要编辑Webpack.config.js ，我们可以使用

1. customize-cra ，
2. react-app-rewired ,
3. copy-webpack-plugin ,
4. react-app-rewire-multiple-entry

1 和 2 将覆盖webpack默认配置， 3 复制我们所有的资产文件， 4 添加多个文件

只需安装它：

npm -i customize-cra react-app-rewired copy-webpack-plugin react-app-rewire-multiple-entry --save-dev

纱

yarn add customize-cra react-app-rewired copy-webpack-plugin react-app-rewire-multiple-entry --dev

配置

在您的根目录/创建一个config-overrides.js文件并使用此代码

const {
   override,
   overrideDevServer,
   addWebpackPlugin
} = require("customize-cra");
const CopyPlugin = require('copy-webpack-plugin');

const multipleEntry = require('react-app-rewire-multiple-entry')([
   {
      // points to the popup entry point
      entry: 'src/popup/index.js',
      template: 'public/popup.html',
      outPath: '/popup.html'
   },
   {
      // points to the options page entry point
      entry: 'src/options/index.js',
      template: 'public/index.html',
      outPath: '/index.html'
   }
]);

const devServerConfig = () => config => {
   return {
      ...config,
      // webpackDevService doesn't write the files to desk
      // so we need to tell it to do so so we can load the
      // extension with chrome
      writeToDisk: true
   }
}

const copyPlugin = new CopyPlugin({
   patterns: [
      // copy assets
      { from: 'public', to: '' },
      { from: 'src/background.js', to: '' }
   ]
})

module.exports = {
   webpack: override(
      addWebpackPlugin(
         copyPlugin
      ),
      multipleEntry.addMultiEntry,
   ),
   devServer: overrideDevServer(
      devServerConfig()
   ),

};

继续在src/ 、 options/和包含index.js和app.js文件的popup中创建两个文件夹，这意味着在安装React时从src/复制所有文件并将其React到这两个文件夹中。 对于background.js文件，你应该把它放在src/ ：

/
   src/
      background.js
      index.js // empty file only
      options
         index.js
         app.js
         app.css
      popup
         index.js
         app.js
         app.css
 

还将 package.json 文件中的script覆盖为：

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

现在您无需在更改后重新加载扩展，它会在您保存代码时自动触发。

另一个文件是在根目录中创建的.env并通过这个：

INLINE_RUNTIME_CHUNK=false

现在运行命令yarn start或npm start ，加载扩展你应该没问题！

学习资源