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。

背景中的

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

Answer 2

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

显然，“背景”javascript页面无法访问浏览器中网页的DOM，因此在后台脚本中加载jquery并不合理。相反，我有后台脚本programmatically inject 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中。因此，您不需要在清单文件中包含任何内容。

我建议在你的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，所有文件都将托管在用户的机器上。

我希望它有所帮助，罗布

Answer 4

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

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

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

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

4 个答案: