如何在 chrome 扩展中使用 jQuery？

Question

我正在写一个 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 扩展程序中使用第三方库的正确和最佳方法是什么。

原文由 Ishan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须将 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 打开该窗口。

原文由 Nico 发布，翻译遵循 CC BY-SA 3.0 许可协议