如何在chrome扩展中使用jQuery？
我正在写一个chrome扩展。我想在我的扩展中使用jQuery。我没有使用任何背景页面，只是一个背景脚本。
以下是我的文件：
manifest.json
{
"manifest_version": 2,
"name": "Extension name",
"description": "This extension does something,",
"version": "0.1",
"permissions": [
"activeTab"
],
"browser_action": {
"default_icon": "images/icon_128.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": {
"16": "images/icon_16.png",
"48": "images/icon_48.png",
"128": "images/icon_128.png"
}
}我的background.js文件只运行另一个名为work.js的文件
// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript({
file: 'work.js'
});
});我的扩展的主要逻辑在work.js内部。我认为它的内容对这个问题来说并不重要。
我想问的是如何在我的扩展中使用jQuery。因为我没有使用任何背景页面。我不能简单地把jQuery加进去。那么，如何在我的扩展中添加和使用jQuery呢？
我试着从background.js文件中运行jQuery和我的work.js。
// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.executeScript({
file: 'thirdParty/jquery-2.0.3.js'
});
chrome.tabs.executeScript({
file: 'work.js'
});
});它工作得很好，但我担心以这种方式添加的脚本是否正在异步执行。如果是，那么work.js甚至可能在jQuery (或者我将来可能添加的其他库)之前运行。
我还想知道在我的chrome扩展中使用第三方库的正确和最好的方式是什么。
回答 4
Stack Overflow用户
发布于 2014-01-24 03:28:54
您必须将jquery脚本添加到您的chrome-extension项目和manifest.json的background部分，如下所示：
"background":
{
"scripts": ["thirdParty/jquery-2.0.3.js", "background.js"]
}如果您需要在content_scripts中使用jquery，则还必须将其添加到清单中：
"content_scripts":
[
{
"matches":["http://website*"],
"js":["thirdParty/jquery.1.10.2.min.js", "script.js"],
"css": ["css/style.css"],
"run_at": "document_end"
}
]这就是我所做的。
另外，如果我没记错的话，后台脚本是在后台窗口中执行的，您可以通过chrome://extensions打开该窗口。
Stack Overflow用户
发布于 2018-05-04 16:57:18
除了已经提到的解决方案之外，您还可以在本地下载jquery.min.js，然后使用它-
用于下载-
wget "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"manifest.json -
"content_scripts": [
{
"js": ["/path/to/jquery.min.js", ...]
}
],在html中-
<script src="/path/to/jquery.min.js"></script>参考- https://developer.chrome.com/extensions/contentSecurityPolicy
Stack Overflow用户
发布于 2020-04-09 22:47:26
在我的例子中，通过跨文档消息传递(XDM)和执行Chrome扩展onclick而不是页面加载，得到了一个有效的解决方案。
manifest.json
{
"name": "JQuery Light",
"version": "1",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": [
"https://*.google.com/*"
],
"js": [
"jquery-3.3.1.min.js",
"myscript.js"
]
}
],
"background": {
"scripts": [
"background.js"
]
}
}background.js
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
});
});myscript.js
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.message === "clicked_browser_action") {
console.log('Hello world!')
}
}
);https://stackoverflow.com/questions/21317476
复制相似问题