Google Chrome 擴展程序 - 腳本注入

Question

我正在嘗試讓我的 Chrome 擴展程序使用content_scripts注入一些 javascript，使用之前的答案作為參考。

清單文件

"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)

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為什么不直接通過manifest.json 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/

您可以嘗試在新的瀏覽器選項卡中打開 url 以驗證圖像 url 是否正確：

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 限制了許多此類功能以提高安全性。 有關清單版本 2 中施加的限制的更多詳細信息，請參閱Google 內容安全政策。我在 CSP 中找不到您提到的具體情況，但是當我將清單版本更改為 1 並執行您的代碼時，它工作正常。