web-dev-qa-db-ja.com

Google Chrome Extension-Script Injections

この前のanswerを使用して、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);

（また試された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 です。

enter image description here GET chrome-extension://invalid/ (anonymous function)

javascriptjquerygoogle-chrome-extension
42
Nick Fury
  1. マニフェストファイルでは、"manifest_version": 2が指定されています。これにより、より厳密なモードが自動的にアクティブになります。このモードでは、デフォルトですべての拡張機能のファイルがWebページで使用できません。
  2. <script>要素はインジェクションの直後に削除されるため、元のコードは機能しません（スクリプトファイルにはロードする機会がありません）。

1.の結果、コンソールに次のエラーが表示されます。

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

この問題を修正するには、script.jsをホワイトリストに追加します "web_accessible_resources" をmanifest fileで：

{
 "name"： "Chrome Extension"、
 "version"： "1.0"、
  "manifest_version"：2、  
 "content_scripts"：
 "matches"：["http：// pagetoinject/script/into/*"]、
 "js"：["contentscript.js"] 
、
  "web_accessible_resources"：["script.js"]
}
93
Rob W

上記の回答に加えて、contentscript.js別のスクリプト、つまりscript.jsなぜ直接追加しないのですかscript.jsからcontent_scriptsまでmanifest.json。

1
Abhishek Deora

このエラーが発生する別の理由は、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

これを回避する1つの方法は、画像データURIを使用することです。

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