Google Chrome扩展程序 - 脚本注入

Question

我正在尝试让我的Chrome扩展程序向content_scripts注入一些javascript，并使用之前的 answer 作为参考。

的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);

（也尝试了 this 方法但没有成功。）

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错误。这是一个screenshot。

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

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"]
}

Answer 2

除了上面的答案，我注意到你的contentscript.js中只是添加了另一个脚本，即script.js为什么不通过{{1}中的content_scripts直接添加script.js }。

Answer 3

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

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

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

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

一种解决方法是使用图像数据URI：

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

Answer 4

Chrome 扩展样板：

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

Answer 5

这里的问题是您使用的是manifest_version : 2。如果你做manifest-version: 1，你将不会有任何问题。版本2限制了许多此类功能以提高安全性。请参阅Google Content Security Policy以获取有关清单版本2中所施加的限制的更多详细信息。我找不到您在CSP中提到的具体案例，但是当我将清单版本更改为1并执行您的代码时，它工作正常。