如何在 google chrome 扩展页面操作 background.js 中使用 jquery？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13064957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use jquery in google chrome extension page action background.js?
提问by User
I'm developing a "page action" google chrome extension. My manifest has:
我正在开发一个“页面操作”谷歌浏览器扩展。我的清单有：
...
"background": { "scripts": ["background.js"] },
...
In my background.js file I have:
在我的 background.js 文件中，我有：
function doSomething() {
alert("I was clicked!");
}
chrome.pageAction.onClicked.addListener(doSomething);
This works. Now in my doSomethingfunction I want to read some data on the current page. It will be a lot easier for me to use jquery to read the data so I can easily target the exact data I want. How can I incorporate jquery (preferrably served from google's CDN) so that it's accessible to my doSomethingfunction?
这有效。现在在我的doSomething函数中，我想读取当前页面上的一些数据。使用 jquery 读取数据对我来说会容易得多，因此我可以轻松地定位我想要的确切数据。如何合并 jquery（最好从 google 的 CDN 提供）以便我的doSomething函数可以访问它？
回答by Jaydeep Solanki
The "background"specification in manifest.jsonshould specify jquery.jsso that it is loaded before background.js:
中的"background"规范manifest.json应指定jquery.js以便它在之前加载background.js：
...
"background": { "scripts": ["jquery.js","background.js"] },
...
This should do the job.
Remember the js files are loaded in the order they are specified.
这应该可以完成工作。
请记住，js 文件是按照指定的顺序加载的。
test if jquery is loaded.
测试是否加载了 jquery。
in background.js
在 background.js 中
if (jQuery) {
// jQuery loaded
} else {
// jQuery not loaded
}
回答by User
I don't know if this is the ideal way, but I was able to get it working using help from this question: Google Chrome Extensions: How to include jQuery in programatically injected content script?.
我不知道这是否是理想的方式，但我能够使用以下问题的帮助来使其工作：Google Chrome 扩展：如何在以编程方式注入的内容脚本中包含 jQuery？.
Apparently a "background" javascript page can't access the DOM of a webpage in the browser so loading jquery doesn't really make sense in the background script. Instead I have the background script programmatically injectthe jQuery library and then the content script into the current webpage. The content script (unlike the background script) canaccess info on the webpage.
显然，“后台”javascript 页面无法访问浏览器中网页的 DOM，因此在后台脚本中加载 jquery 并没有真正意义。相反，我让后台脚本以编程方式注入jQuery 库，然后将内容脚本注入当前网页。内容脚本（与后台脚本不同）可以访问网页上的信息。
background.js:
背景.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
内容.js
var text = jQuery('h1').text();
alert('inside content! ' + text);
回答by robertp
My understanding is that it's not necessary to use background.js. You can have your code in popup.js instead. Therefore you won't need to include anything in the manifest file either.
我的理解是没有必要使用 background.js。您可以将代码放在 popup.js 中。因此，您也不需要在清单文件中包含任何内容。
I'd suggest to include the jQuery JS and your popup.js in your popup.html:
我建议在 popup.html 中包含 jQuery JS 和 popup.js：
<script src="/js/jquery-1.8.1.min.js"></script>
<script src="/js/popup.js"></script>
Then in popup.js you should be able to access jQuery, so your eventHandler would look like this:
然后在 popup.js 中，您应该能够访问 jQuery，因此您的 eventHandler 将如下所示：
$(document).ready(function(){
$('#anyelement').on('click', doSomething);
function doSomething(){
alert ('do something');
};
})
I don't think why you want CDN for jQuery, all the files will be hosted on the user's machine.
我不认为你为什么需要 jQuery 的 CDN，所有文件都将托管在用户的机器上。
I hope it helps, Rob
我希望它有帮助，罗布
回答by Reinstate Monica Cellio
In the manifest file, make sure you reference your local jquery.js file (whatever it's called) in the content_scriptsblock:
在清单文件中，确保在块中引用了本地 jquery.js 文件（无论它叫什么）content_scripts：
"content_scripts": [{
"js": ["jquery.js"]
}]
That will ensure that it's embedded in the crx file and will be accessible to your other scripts.
这将确保它嵌入在 crx 文件中，并且可以被您的其他脚本访问。
