使用Chrome擴展程序將jQuery注入Google.com

Question

我正在構建一個chrome擴展程序，並且很想將jQuery注入Google網站，但是由於某種原因，它對我不起作用。

這是帶有content_scripts清單文件：

"content_scripts": [{
    "matches": ["*://www.google.com/*"],
    "css": ["src/inject/inject.css"],
    "js": ["js/jquery/jquery.min.js", "src/inject/inject.js"],
    "run_at" : "document_start"
  }]

並且jQuery位於應該存在的文件夾中。 在我的inject.js文件中，我有：

$("body").append("Hello World");
console.log("Loaded.");

而且當我訪問Google.com時，已經很奇怪了Loaded. 確實出現在控制台中，但是Hello World不會附加到body ，也沒有在控制台中出現錯誤，這很奇怪。 我什至在inject.js里面inject.js ：

if (window.jQuery) {  
    $("body").append("Hello World");
    console.log("Loaded.");
} else {
    console.log('Not Loaded.');
}

和Loaded. 再次出現在控制台中，並且Hello World未被應用...我不知道問題出在哪里...這似乎沒有道理。

有任何想法嗎？ 謝謝。

Answer 1

內容腳本在沙盒環境中運行。 因此，您無法從其中更改page-dom。 但是有一種解決方法：

在您的內容腳本中，您可以通過腳本標簽添加所有腳本，如下所示：

var script_tag = document.createElement("script");
script_tag.setAttribute("src", chrome.extension.getURL("js/jquery/jquery.min.js"));

document.head.appendChild(script_tag);