Javascript 使用ReactJS构建时未注入DOM的Chrome扩展内容脚本

我正在尝试使用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"]
  }]
}

{
“清单版本”：2，
“版本”：“0.0.1”，
“名称”：“我的分机”，
“描述”：“一些描述”，
“权限”：[]，
“浏览器操作”：{
“默认标题”：“我的扩展名”，
“默认弹出窗口”：“index.html”
},
“内容脚本”：[{
“匹配项”：[“”]，
“css”：[“/static/css/content.chunk.css”]，
“js”：[“/static/js/content.chunk.js”]
}]
}

my 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);

从“React”导入React；
从“react dom”导入react dom；
从“扩展容器/Main”导入Main；
警报（“火箭筒”）；
const app=document.createElement（'div'）；
app.id=“扩展根”；
document.body.appendChild（app）；
ReactDOM.render（，app）；

在构建之后，当我加载扩展时，这不会做任何事情。 但是，当我将webpack生成的

content.chunk.js

的内容编辑为

alert（“某物”）

时，扩展工作正常，并在每个URL上显示alert

---

为什么我的react代码什么都没做？没有错误日志。

如果有人偶然发现，请回答我自己的问题

因此，我意识到来自

create的网页配置-app@3.0.1

exjection启用了代码拆分配置。这是从我的代码中分离react库代码，使其无法执行

以下是我在webpack配置中为使其正常工作而更改的设置。（请注意，这仅建议在开发chrome extension时执行）

在

webpack.config.js

中，删除

optimization

节点下的

splitchunk

配置，并将

runtimeChunk

设置为

false

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

生成的bundle现在将命名为

content.js

（考虑将

content

作为入口点）

---

在

content\u scripts

下的

manifest.json

中链接此

content.js

，您就可以开始了。

现在，我们不再需要编辑

Webpack.config.js

，我们可以使用

定制cra

react应用程序重新布线

复制网页包插件

react应用程序重新布线多条目

1和2将覆盖

网页

默认配置，3将复制我们的所有资产文件，4将添加多个文件

只需安装它：

npm -i customize-cra react-app-rewired copy-webpack-plugin react-app-rewire-multiple-entry --save-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/

和

popup

中创建两个文件夹，其中包含

index.js

和

app.js

文件，这意味着在安装

React

时将

src//code>中的所有文件复制到这两个文件夹中。对于
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文件中的
脚本覆盖到：

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

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

另一个文件是要在根目录中创建is
.env
，并通过此文件：

INLINE_RUNTIME_CHUNK=false

现在运行命令
纱线开始
或
npm开始
，加载扩展，您应该可以开始了

通常的原因是，您的配置生成一个模块脚本，该脚本只注册其导出的函数，但从未实际调用它们。我不知道react/webpack，所以我不知道您需要在配置中更改什么，但希望有现有的解决方案。@wOxxOm我认为这不会发生。如果我将生成的
content.chunk.js
作为脚本标记添加到HTML页面中，它将按预期工作。但是，通过内容脚本，我看不到任何事情发生。@Vishal我应该将content.js放置在哪个文件夹？@S.J.Lin content.js将捆绑在您的构建文件夹/static/js/content.js中，只需在manifest.json中引用即可。
INLINE_RUNTIME_CHUNK=false