Chrome扩展程序| 如何在cdn的内容和后台脚本中包含库

Question

我的Chrome扩展程序有两个文件:内容和后台脚本.我需要将jQuery添加到内容脚本,从cdn和lodash到cdn的后台脚本.

在我的清单中,我试图从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'"

但这没有帮助.

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

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

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

此外,您不应该使用这样的background标签.资源

您最好下载并使用所需的库捆绑您的扩展并将其作为content_script.

我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就是这样一个好人只是执行它.