如何使用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甚至运行的前的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扩展项目，并在背景部分的manifest.json的是这样的：

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中打开执行：//扩展

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

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