使用 Chrome 扩展程序将 jQuery 注入 Google.com

Injecting jQuery into Google.com using a Chrome Extension

本文关键字：注入 Google com jQuery Chrome 扩展 程序 使用      更新时间：2023-09-26

我正在构建一个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里面做了：

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

而Loaded.又出现在控制台上，Hello World并没有被附上......我不知道问题出在哪里...这似乎没有意义。

有什么想法吗？谢谢。

内容脚本在沙盒上下文中运行。因此，您无法从它们中更改页面。但是有一个解决方法：

在您的内容脚本中，您可以通过脚本标签添加所有脚本，如下所示：

var script_tag = document.createElement("script");
script_tag.setAttribute("src", chrome.extension.getURL("js/jquery/jquery.min.js"));
document.head.appendChild(script_tag);
相关文章：