如何在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' }); }); 

它工作正常，但我担心是否添加到这种方式执行的脚本正在asynchronous执行。 如果是的话，那么可能会发生这样的情况：即使在 jQuery（或者我将来添加的其他库） 之前 ，work.js也会运行。

我也想知道什么是使用第三方库的正确和最好的方式，在我的Chrome扩展。

Answer 1

你必须把你的jQuery脚本添加到你的chrome扩展项目中，并添加到你的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来打开。

Answer 2

非常简单，只需执行以下操作：

在mainfest.json中添加以下行

 "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'", 

现在你可以直接从url加载jquery

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 

来源： 谷歌文档

Answer 3

它工作正常，但我担心是否添加到这种方式执行的脚本正在asynchronous执行。 如果是的话，那么可能会发生这样的情况：即使在jQuery（或者我将来添加的其他库）之前，work.js也会运行。

这应该不是一个问题：排队在某个JS上下文中执行的脚本，并且该上下文不能有竞争条件，因为它是单线程的。

然而，消除这种担忧的正确方法是连接呼叫：

 chrome.browserAction.onClicked.addListener(function (tab) { chrome.tabs.executeScript({ file: 'thirdParty/jquery-2.0.3.js' }, function() { // Guaranteed to execute only after the previous script returns chrome.tabs.executeScript({ file: 'work.js' }); }); }); 

或者，泛化：

 function injectScripts(scripts, callback) { if(scripts.length) { var script = scripts.shift(); chrome.tabs.executeScript({file: script}, function() { if(chrome.runtime.lastError && typeof callback === "function") { callback(false); // Injection failed } injectScripts(scripts, callback); }); } else { if(typeof callback === "function") { callback(true); } } } injectScripts(["thirdParty/jquery-2.0.3.js", "work.js"], doSomethingElse); 

或者，被普遍化（带来更符合正确的签名）：

 function injectScript(tabId, injectDetails) { return new Promise((resolve, reject) => { chrome.tabs.executeScript(tabId, injectDetails, (data) => { if (chrome.runtime.lastError) { reject(chrome.runtime.lastError.message); } else { resolve(data); } }); }); } injectScript(null, {file: "thirdParty/jquery-2.0.3.js"}).then( () => injectScript(null, {file: "work.js"}) ).then( () => doSomethingElse ).catch( (error) => console.error(error) ); 

或者，为什么没有， async / await更清晰的语法：

 function injectScript(tabId, injectDetails) { return new Promise((resolve, reject) => { chrome.tabs.executeScript(tabId, injectDetails, (data) => { if (chrome.runtime.lastError) { reject(chrome.runtime.lastError.message); } else { resolve(data); } }); }); } try { await injectScript(null, {file: "thirdParty/jquery-2.0.3.js"}); await injectScript(null, {file: "work.js"}); doSomethingElse(); } catch (err) { console.error(err); } 

请注意，在Firefox中，您可以使用browser.tabs.executeScript因为它会返回一个Promise。