使用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);