Chrome 扩展 |如何在 CDN 的内容和背景脚本中包含库 [英] Chrome Extension | How to include library in content and background scripts from cdn

问题描述

我的 Chrome 扩展程序有两个文件:内容和后台脚本.我还需要将 jQuery 添加到 CDN 的内容脚本中，并将 lodash 添加到 CDN 的后台脚本中.

my Chrome extension has two files: content and background scripts. I need to add jQuery to content script from cdn and lodash to background script from cdn too.

在我的清单中，我尝试像这样从 cdn 添加 lodash:

In my manifest I tried to add lodash from cdn like this:

"background": {
      "scripts": ["background.js", "https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"]
  },

  "content_security_policy": "script-src 'self' https://cdn.jsdelivr.net;     object-src 'self'"

但这并没有帮助.

我的内容文件是从后台文件注入页面的:

My content file is injected to the page from the background file:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete') {
        chrome.tabs.insertCSS(null, {file: "mainStyles.css"});
        chrome.tabs.executeScript(null, {
            code: 'var config = ' + JSON.stringify(config)
        }, function() {
            chrome.tabs.executeScript(null, { file: "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js" }, function()     {
                chrome.tabs.executeScript(null, { file: "content.js" })
            });
        });
    }
});

正如你所看到的，我试图从 cdn 中包含 jQuery，但这样它也不包含在内.

And as you can see I tried to include jQuery from cdn but this way it's not included either.

也许有人知道如何做到这一点?非常感谢！

Maybe someone knows the way how to do this? Many thanks in advance!

推荐答案

你可以从外部资源中获取你的脚本，但这不是所描述的首选方式 此处.

You can get your scripts from external resources, but it's not the preferred way as stated here.

此外，您不应该像这样使用 background 标签.来源

Furthermore, you shouldn't use the background tag like this. Source

您最好下载扩展程序并将其与所需的库捆绑在一起，并将其作为 content_script.

You're better off downloading and bundling your extension with required libraries and getting it as a content_script.

来自我的 manifest.json 的示例，用于在 youtube 上运行的扩展程序:

Example from my manifest.json for an extension running on youtube:

"content_scripts": [ {
    "matches": ["http://*.youtube.com/*", "https://*.youtube.com/*"],
    "js": ["jquery.js", "content.js"]
}],

<小时>

如果您必须使用一些外部脚本，我发现使用一点点 hack 效果最好.

---

If you must use some external scripts, I found that doing it using a little hack works the best.

大体思路是在当前网页的范围内执行一段JS代码，并添加一个<script>标签和你想要的脚本.

The general idea is that it executes a piece of JS code in the scope of current webpage and adds a <script> tag with your desired script.

这是一个需要包含我们专有 js 的扩展的片段:

This is a snippet from an extension that required some of our proprietary js to be included:

chrome.tabs.executeScript(tab.id, {code:
    "document.body.appendChild(document.createElement('script')).src = 'https://example.com/script.js';"
});

而 chrome 是一个很好的人，只是执行它.

And chrome being such a good guy just executes it.

这篇关于Chrome 扩展 |如何在 CDN 的内容和背景脚本中包含库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！