javascript - Chrome 扩展 |如何在来自cdn的内容和后台脚本中包含库

Question

我的 Chrome 扩展有两个文件:内容和后台脚本。我需要将 jQuery 添加到来自 cdn 的内容脚本，并将 lodash 添加到来自 cdn 的后台脚本。

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

"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'"

但这并没有帮助。

我的内容文件从后台文件注入(inject)页面:

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，但这样它也没有包含。

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

Answer 1

您可以从外部资源获取脚本，但这不是所述的首选方式 here .

此外，您不应该使用 background像这样标记。 Source

您最好下载您的扩展并将其与所需的库捆绑在一起，然后将其作为 content_script 获取。 .

示例来 self 的 manifest.json对于在 youtube 上运行的扩展程序:

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

---

如果您必须使用一些外部脚本，我发现使用一些技巧是最好的。

大意是在当前网页范围内执行一段JS代码，并添加一个<script>。用你想要的脚本标记。

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

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

而 chrome 是一个如此优秀的人，它只是执行它。