如何在谷歌浏览器扩展页面动作background.js中使用jquery？

Question

我正在开发一个"页面操作"谷歌浏览器扩展程序.我的清单有:

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

在我的background.js文件中,我有:

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

chrome.pageAction.onClicked.addListener(doSomething);

这有效.现在在我的doSomething函数中,我想读取当前页面上的一些数据.使用jquery读取数据会更容易,因此我可以轻松地定位我想要的确切数据.我如何合并jquery(最好是从谷歌的CDN服务),以便我的doSomething功能可以访问？

Answer 1

将"background"在规范manifest.json应规定jquery.js使得它之前加载background.js:

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

这应该做的工作.
请记住,js文件按照指定的顺序加载.

测试是否加载了jquery.

在background.js

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}

Answer 2

我不知道这是否是理想的方式,但我能够使用这个问题的帮助来实现它:谷歌Chrome扩展:如何在编程注入的内容脚本中包含jQuery？.

显然,"背景"javascript页面无法访问浏览器中网页的DOM,因此在后台脚本中加载jquery并不合理.相反,我有后台脚本以编程方式将 jQuery库和内容脚本注入当前网页.内容脚本(与后台脚本不同)可以访问网页上的信息.

background.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);

content.js

var text = jQuery('h1').text();
alert('inside content! ' + text);

Answer 3

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

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

<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，所有文件都将托管在用户的计算机上。

我希望它有帮助，罗布