如何在 chrome 扩展中使用 jQuery? [英] How to use jQuery in chrome extension?

问题描述

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

I am writing a chrome extension. And I want to use jQuery in my extension. I am not using any background page, just a background script.

这是我的文件:

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

My background.js file just runs another file named work.js

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

我的扩展的主要逻辑在 work.js 里面.对于这个问题，我认为其中的内容并不重要.

The main logic of my extension is inside work.js. The contents of which I don't think matters here for this question.

我想问的是如何在我的扩展中使用jQuery.因为我没有使用任何背景页面.我不能只向它添加 jQuery.那么如何在我的扩展中添加和使用 jQuery 呢?

What I want to ask is how can I use jQuery in my extension. Since I am not using any background page. I can't just add jQuery to it. So how can I add and use jQuery into my extension ?

我尝试从 background.js 文件中运行 jQuery 和我的 work.js.

I tried running jQuery along with my work.js from background.js file.

// 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 甚至可能在 before jQuery(或我将来可能添加的其他库)之前运行.

And it works fine, but I am having the concern whether the scripts added to be executed in this manner are being executed asynchronously. If yes then it can happen that work.js runs even before jQuery (or other libraries which I may add in future).

而且我还想知道在我的 chrome 扩展程序中使用第三方库的正确和最佳方式是什么.

And I would also like to know what's the correct and best way to use third party libraries, in my chrome extension.

推荐答案

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

You have to add your jquery script to your chrome-extension project and to the background section of your manifest.json like this :

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

如果你需要在 content_scripts 中使用 jquery，你也必须将它添加到清单中:

If you need jquery in a content_scripts, you have to add it in the manifest too:

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

Also, if I recall correctly, the background scripts are executed in a background window that you can open via chrome://extensions.

这篇关于如何在 chrome 扩展中使用 jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！