Google Chrome 扩展 - 脚本注入答案

【问题标题】：Google Chrome Extension - Script InjectionsGoogle Chrome 扩展 - 脚本注入
【发布时间】：2021-04-14 01:17:50
【问题描述】：

我正在尝试让我的 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)

【问题讨论】：

不确定发生了什么，但你为什么不这样做："js": ["contentscript.js","script.js"]
因为content_scripts 在隔离环境中执行。我需要将script.js 注入到 DOM 中，这样我就可以使用该文件，就好像它是公共 js 文件夹的一部分一样。在this answer的第一部分有说明
This answer 执行您在内容脚本中尝试执行的操作。它可能是您正在寻找的。span>

标签： javascript jquery google-chrome-extension

【解决方案1】：

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

由于 1.，控制台中显示以下错误：

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

要解决此问题，请将script.js 添加到白名单中，"web_accessible_resources" 在您的manifest file 中：

{ "name": "Chrome 扩展程序", “版本”：“1.0”， "manifest_version": 2, “内容脚本”：[{ "匹配": ["http://pagetoinject/script/into/*"], “js”：[“contentscript.js”] }], "web_accessible_resources": ["script.js"] }

【讨论】：

感谢您的大力响应，一切都如前所述。还要感谢here 提供的原始代码
但是有没有办法从以这种方式（或任何其他方式）注入的脚本中修改window 的属性？
我尝试了很多，但这是唯一适合我的答案

【解决方案2】：

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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

Chrome 扩展的样板：

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

【讨论】：

【解决方案5】：

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

【讨论】：