Question

我正在使用React / Redux开发Chrome扩展程序。为此，我正在使用Webpack，现在我正在使用WebPack DLLReference插件将一些资源迁移到一个单独的文件中，以优化构建过程。

然后我需要将生成的dll / dll.vendor.js加载到我的弹出窗口和注入的内容中。对于弹出窗口，它可以正常工作，但它不适用于注入的内容。

我已将它添加到清单

"web_accessible_resources": [
    "dll/dll.vendor.js"
],

文件在那里，我甚至可以使用以下路径访问它：chrome-extension：///dll/dll.vendor.js

但它在注入的内容中不存在，因为我可以看到打开开发者工具 - ＆gt;来源当然，这会在以后产生缺失对象的错误。

在迁移到DLLReferencePlugin之前，一切正常。

我的DLL webpack配置文件：https://pastebin.com/z9RjRUqm

我的内容webpack配置文件：https://pastebin.com/0Niw2Fqm

The error I'm receiving

触发错误的行：

module.exports = vendor;

如果我检查弹出窗口，它有相同的行，如果我在那里设置断点并观察它定义的变量，问题只发生在内容中。

将扩展工具栏注入页面的代码：内容/ SRC / index.js

import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import {Store} from 'react-chrome-redux';

const anchor = document.createElement('div');
anchor.id = 'my-anchor';
document.body.appendChild(anchor)

const vendorUrl = chrome.runtime.getURL("dll/dll.vendor.js")

render(
  <Provider store={proxyStore}>
      <div>
          <script src={vendorUrl}></script>
          <link id='semantic-ui' rel='stylesheet' type='text/css'
                href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css' media='all' />
          <AppContainer>
              <ToolbarContent />
          </AppContainer>
      </div>
  </Provider>
  , document.getElementById('my-anchor'));

知道还有什么可能是导致这个问题的原因吗？有没有更好的方法来调试内容环境无法使用资源的原因？

更新

基于我上次的调查结果，因为依赖于dll.vendor的代码是在页面上注入之前执行的，但我不知道如何避免这种情况发生。

Answer 1

您对内容脚本的理解缺少一件事，Isolated World paradigm：

内容脚本在称为孤立世界的特殊环境中执行。他们可以访问注入页面的DOM，但不能访问页面创建的任何JavaScript变量或函数。它将每个内容脚本视为在其运行的页面上没有执行其他JavaScript。反过来也是如此：页面上运行的JavaScript无法调用任何函数或访问内容脚本定义的任何变量。

这与此有何关系？好吧，如果你要在页面的DOM中添加<script>元素，代码将在页面的上下文中执行 - 而不是内容脚本的上下文。这种技术称为"page level" or "injected" scripts。

但是，这不是你想要的。您希望它在内容脚本上下文中，因此您可以使用这些库。然后你有选择：

如果您始终需要相同的脚本配置，则在清单中将脚本添加为数组可能是最佳选择。加载订单很重要：
```
"js" : [ "library.js", "actual_code.js" ]
```
如果由于某种原因需要在运行时从现有内容脚本动态加载代码，您可以为{2}请求后台页面。inject it programmatically。如果您已经这样做，只需按正确的顺序链接呼叫。
这不是技术上理想的解决方案，但您可以XHR内部资源，然后从内容脚本上下文中eval()。

Chrome扩展程序：即使在web_accessible_resources中添加资源，资源也无法使用

1 个答案: