我正在开发一个“页面操作”谷歌浏览器扩展。我的清单有：
...
"background": { "scripts": ["background.js"] },
...
在我的 background.js 文件中，我有：
function doSomething() {
alert("I was clicked!");
}
chrome.pageAction.onClicked.addListener(doSomething);
这行得通。现在在我的doSomething 函数中，我想读取当前页面上的一些数据。使用 jquery 读取数据对我来说会容易得多，这样我就可以轻松地定位我想要的确切数据。如何合并 jquery（最好从 google 的 CDN 提供）以便我的 doSomething 函数可以访问它？
【问题讨论】：
标签： jquery google-chrome-extension content-script
manifest.json 中的"background" 规范应指定jquery.js，以便在background.js 之前加载：
...
"background": { "scripts": ["jquery.js","background.js"] },
...
这应该可以完成工作。
记住js文件是按照指定的顺序加载的。
测试是否加载了 jquery。
在 background.js 中
if (jQuery) {
// jQuery loaded
} else {
// jQuery not loaded
}
【讨论】：
if (typeof jQuery !== 'undefined') 才能实际检查是否定义了 jQuery。
我不知道这是否是理想的方式，但我能够通过以下问题的帮助使其正常工作：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);
【讨论】：
我的理解是没有必要使用 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，所有文件都将托管在用户的机器上。
希望对你有帮助 抢
【讨论】：
在清单文件中，确保您在 content_scripts 块中引用了本地 jquery.js 文件（不管它叫什么）：
"content_scripts": [{
"js": ["jquery.js"]
}]
这将确保它嵌入在 crx 文件中，并且可供您的其他脚本访问。
【讨论】：