37

我正在开发一个“页面操作”谷歌浏览器扩展。我的清单有：

...
"background": { "scripts": ["background.js"] },
...

在我的 background.js 文件中，我有：

function doSomething() {
     alert("I was clicked!");
}

chrome.pageAction.onClicked.addListener(doSomething);

这行得通。现在在我的doSomething函数中，我想读取当前页面上的一些数据。使用 jquery 读取数据对我来说会容易得多，这样我就可以轻松地定位我想要的确切数据。如何合并 jquery（最好从谷歌的 CDN 提供）以便我的doSomething函数可以访问它？

4

4 回答 4

71

中的"background"规范manifest.json应指定jquery.js使其在之前加载background.js：

...
"background": { "scripts": ["jquery.js","background.js"] },
...

这应该可以完成这项工作。
请记住，js 文件是按照指定的顺序加载的。

测试是否加载了 jquery。

在后台.js

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}
于 2013-01-02T12:39:27.623 回答
10

我不知道这是否是理想的方式，但我能够使用这个问题的帮助来让它工作：Google Chrome Extensions: How to include jQuery in programatically injection content script? .

显然，“后台”javascript 页面无法访问浏览器中网页的 DOM，因此在后台脚本中加载 jquery 并没有真正意义。相反，我有后台脚本以编程方式注入jQuery 库，然后将内容脚本注入当前网页。内容脚本（与后台脚本不同）可以访问网页上的信息。

背景.js：

function handleClick(tab) {
    chrome.tabs.executeScript(null, { file: "jquery-1.8.2.min.js" }, function() {
        chrome.tabs.executeScript(null, { file: "content.js" });
    });
}

chrome.pageAction.onClicked.addListener(handleClick);

内容.js

var text = jQuery('h1').text();
alert('inside content! ' + text);
于 2012-10-25T23:54:08.720 回答
1

我的理解是没有必要使用 background.js。您可以将代码放在 popup.js 中。因此，您也不需要在清单文件中包含任何内容。

我建议在 popup.html 中包含 jQuery JS 和 popup.js：

<script src="/js/jquery-1.8.1.min.js"></script>
<script src="/js/popup.js"></script>

然后在 popup.js 中你应该能够访问 jQuery，所以你的 eventHandler 看起来像这样：

$(document).ready(function(){
 $('#anyelement').on('click', doSomething);

 function doSomething(){
   alert ('do something');
 };
})

我不认为你为什么想要 jQuery 的 CDN，所有文件都将托管在用户的机器上。

我希望它有帮助，罗布

于 2012-10-25T09:03:46.160 回答
0

在清单文件中，确保在content_scripts块中引用本地 jquery.js 文件（无论它叫什么）：

"content_scripts": [{
    "js": ["jquery.js"]
}]

这将确保它嵌入在 crx 文件中，并且您的其他脚本可以访问它。

于 2012-10-25T09:18:33.720 回答