如何在chrome扩展中使用jQuery？

javascript jquery asynchronous google-chrome google-chrome-extension

2022-08-30 02:40:00

我正在编写一个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.jswork.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添加到我的扩展中？

我尝试将jQuery与我的工作一起运行.js从文件。background.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'
    });
});

它工作正常，但我担心以这种方式执行的脚本是否异步执行。如果是，那么它可能会发生工作.js甚至在jQuery（或我将来可能添加的其他库）之前运行。

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

答案 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

答案 2

只需执行以下操作即可轻松：

在 manifest.json 中添加以下行

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

现在你可以自由地直接从网址加载jQuery

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

来源：谷歌文档