javascript - 如何在 chrome 扩展中使用 jQuery？

Question

我正在写一个 chrome 扩展。我想在我的扩展中使用 jQuery。我没有使用任何背景页面，只是一个背景脚本。

这是我的文件:

list .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 扩展程序中使用第三方库的正确和最佳方式是什么。

Answer 1

您必须将 jquery 脚本添加到 chrome-extension 项目和 manifest.json 的 background 部分，如下所示:

  "background":
    {
        "scripts": ["thirdParty/jquery-2.0.3.js", "background.js"]
    }

如果您在 content_scripts 中需要 jquery，您也必须将其添加到 list 中:

"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 打开该窗口。