javascript - Chrome 扩展程序 : Resource not available even adding it in web_accessible_resources

Question

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

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

我已将其添加到 list 中

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

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

但它不存在于注入(inject)的内容中，正如我可以看到打开开发者工具 -> 源当然，这会在稍后生成丢失对象的错误。

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

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

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

The error I'm receiving

触发错误的行:

module.exports = vendor;

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

将我的扩展工具栏注入(inject)页面的代码:内容/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 的代码是在页面上发生注入(inject)之前执行的，但我不知道如何避免这种情况发生。

Answer 1

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

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

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

但是，这不是您想要的。您希望它位于内容脚本上下文中，以便您可以使用库。然后你有选择:

1. 如果您始终需要相同的脚本配置，那么将脚本作为数组添加到 list 中可能是最好的选择。加载顺序很重要:

   "js" : [ "library.js", "actual_code.js" ]
   

2. 如果您出于某种原因需要在运行时从现有内容脚本动态加载代码，您可以向inject it programmatically请求后台页面。为你。如果您已经这样做了，只需按正确的顺序链接调用即可。

3. 这不是技术上理想的解决方案，但您可以 XHR 您的内部资源，然后 eval()来自内容脚本上下文。