Question

我有一个非常简单的React Application，我想从Chrome扩展程序中将其加载到页面的DOM中。

我正在使用NPM构建可在NPM下正常运行的React应用。

必须通过教程演示如何通过在chrome_url_overrides => newtab ..中调用“ index.html”来实现此目的。

chrome_url_overrides": {
    "newtab": "index.html"
  }

我发现了一些教程，展示了如何将其作为内容脚本进行（这是必需的）。例如https://medium.com/@yosevu/how-to-inject-a-react-app-into-a-chrome-extension-as-a-content-script-3a038f611067

如本教程中所述，我已经修改了我的NPM构建，以使用一致的名称输出构建的“静态”目录中的js和css文件，以便可以在chrome清单中引用它们。

并且我已将本节添加到我的index.js文件

// Add a root node to the DOM
const rt = document.createElement('div');
rt.setAttribute("id", "my-root");
document.body.appendChild(rt);

ReactDOM.render(<App />, rt);

到目前为止，很好。

当我使用npm构建代码并以chrome扩展名的形式加载未压缩的目录时，一切似乎都很好，但是在加载的页面上没有任何反应（肯定符合清单中的“匹配”条件）。

我注意到，当它使用index.html文件工作时，由npm构建的该文件的版本包括3组新元素： 1.）我在上面插入的html中所需的div：

<div id="loop-root"/>

2。）以下脚本：

<script src="/static/js/2.chunk.js"/>                                           <script src="/static/js/main.chunk.js"/>

3。）在1到2之间的一些内嵌javascript，如下所示：

<script>!function(f){function e(e){for(var r,t,n=e[0],
.....
;var r=window["webpackJsonploop-messenger"]=window["webpackJsonploop-messenger"]||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;i()}([])</script>

现在，如果我在上面的“ 2”中包含脚本，并且在新的js文件中将内联javascript包含在“ 3”中，我将其作为内容清单中的内容脚本引用，那么当我重新加载时，应用程序将启动给定的页面。

万岁！

...但是这样的控制台中有错误：

Uncaught (in promise) DOMException

应用无法正常运行。

所以，我的问题是： a。）此内联javascript在做什么，为什么在index.html中需要它？ b。）为什么在做这种事情的任何教程中都没有提到它？ c。）是否有一种更简单的方法来使它正常工作（肯定有）？

如何在Chrome扩展程序的content.js中启动React App

0 个答案: