将 JS 代码注入网站的所有页面

Question

我正在尝试将 JS 代码注入一个网站，该代码在其所有页面上执行。我发现这可以使用 chrome 内容脚本来完成。因此，我做了以下事情：

1. 我已经创建了“contentscript.js”。

   var x = []
   s.src = 'AN EXTERNAL JS FILE';
   (document.getElementsByTagName('head')[0] || document.body).appendChild(s);
   

2. 我已经创建了“manifest.json”。

   {
      "name": "Sample",
      "version": "1.0",
      "manifest_version": 2,
      "permissions": [
          "tabs",
          "*://*/*"
      ],
      "icons": { "128":"logo.png" },
      "content_scripts": [{
          "js": ["contentscript.js"],
          "matches": ["<all_urls>"]
      }]
   }
   

3. 两个文件都存在于同一个文件夹中。

4. 我已将它们加载到 chrome 扩展中。

5. 脚本按预期执行。

我正在注入的脚本将一个外部 JS 文件加载到页面中，并在 head 标记下放置一个脚本元素。这个 JS 还使用了我在注入的 JS 脚本中定义的x 变量。但是它无法读取它的问题。在控制台中，它会抛出x 变量未定义的错误。

我如何定义变量以使其可供外部 JS 文件访问，并提及我既无权访问网站也无权访问外部 JS 文件？

谢谢，

Answer 1

内容脚本位于an isolated world。您在页面上下文之外定义x，因此它对于在其中运行的脚本是不可见的。更多详情，请参阅this answer。

但是，通过<script> 标记添加脚本会将脚本放入页面的上下文中。因此，它看不到变量。

您有 3 种可能的解决方案。

1. 完全在页面上下文中使用x。所以你需要在<script>标签中定义它：

   script = document.createElement("script");
   script.textContent = 'x = [];';
   (document.getElementsByTagName('head')[0] || document.body).appendChild(script);
   

2. 让页面级脚本和内容脚本通信（例如，传递x）。

   实现此目的的一种方法是通过custom DOM events。另一个是described in the docs（和postMessage）。最后，按照 xwhyLikeThis 的建议，您可以将值存储在隐藏的 DOM 节点中。

3. 在内容脚本上下文中加载外部脚本。这将需要使用后台脚本中的XHR 和injecting it programmatically 来获取它。或者，如果您可以包含带有扩展名的文件的静态版本 - 只需按照通常的方式将其与您的内容脚本一起注入即可。

就个人而言，我会推荐 2。