谷歌浏览器扩展 - 脚本注入

Question

我正在尝试使用之前的这个答案作为参考，通过 content_scripts 注入一些 JavaScript 到我的 Chrome 扩展中。

manifest.json

"name": "My Chrome Extension",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [{
    "matches": ["http://pagetoinject/script/into/*"],
    "js": ["contentscript.js"]
}]  

contenscript.js:

：

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
(document.head||document.documentElement).appendChild(s);
s.parentNode.removeChild(s);

(也尝试过使用这种方法，但没有成功。)

var s = document.createElement('script');
s.src = chrome.extension.getURL("script.js");
s.onload = function() {
    this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

我一直收到这个 JavaScript 错误。这里有一个截图。

GET chrome-extension://invalid/ (anonymous function)

- Nick Fury

---

不确定发生了什么事，但你为什么不改成这样："js": ["contentscript.js","script.js"]。 - Derek 朕會功夫

因为content_scripts在一个隔离的环境中执行，所以我需要将script.js注入到DOM中，这样我就可以像使用公共js文件夹中的文件一样使用它。这在此答案的第一部分有解释。 - Nick Fury

这个答案在内容脚本中展示了你想要的几个JS变量值。这可能是你正在寻找的东西。 - Sparragus

Answer 1

1. 在你的清单文件中，指定了"manifest_version": 2。 这会自动激活更严格的模式，在此模式下，默认情况下，所有扩展文件对于网页都是不可用的。
2. 你原来的代码永远不会起作用，因为在注入后立即删除了<script>元素（脚本文件没有机会加载）。

由于1.的原因，在控制台中出现以下错误：

Failed to load resource                             chrome-extension://invalid/

为了解决这个问题，请将 script.js 添加到白名单中，并在您的 manifest file 中的 "web_accessible_resources" 中添加它：

{
  "name": "Chrome Extension",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [{
      "matches": ["http://pagetoinject/script/into/*"],
      "js": ["contentscript.js"]
  }],
  "web_accessible_resources": ["script.js"]
}

- Rob W

---

感谢你的积极响应，一切都像提到的那样正常工作。此外，感谢 这里 的原始代码。 - Nick Fury

但是有没有办法从这种方式（或者其他方式）注入的脚本中修改window的属性呢？ - YakovL

我尝试了很多次，但这是唯一对我有效的答案。 - Hiệp Nguyễn

Answer 2

除了上面的答案之外，我注意到在你的contentscript.js中，你只是添加了另一个脚本，即script.js。为什么不直接通过manifest.json中的content_scripts来添加script.js呢？

- Abhishek Deora

Answer 3

Chrome扩展的样板代码：

https://github.com/commanddotcom/boilerplate-chrome-extension-js-injection

- Yevgen

Answer 4

另一个导致出现此错误的原因是 URL 被 CORS 阻止。检查页面的网络请求头，看看它是否包含 Content-Security-Policy:。

Content-Security-Policy: default-src 'self' http://example.com; connect-src http://example.com/; script-src http://example.com/

您可以尝试在新浏览器标签页中打开该URL，以验证图片URL是否正确：

chrome-extension://mjcbjlencnokpknflpneebajalcnnifo/images/pattern.jpg

解决这个问题的一种方法是使用图像数据URI：

data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7

- Kim T

Answer 5

问题在于您正在使用 manifest_version : 2。如果将其更改为manifest-version: 1，您就不会遇到任何问题。版本2限制了许多此类功能以提高安全性。请参阅 Google内容安全策略，以了解在清单版本2中实施的限制的更多详细信息。我没有在CSP中找到您的特定情况，但是当我将清单版本更改为1并执行您的代码时，它可以正常工作。

- Jophin Joseph