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

Posted

技术标签:

【中文标题】Chrome 扩展程序 |如何在 CDN 的内容和后台脚本中包含库【英文标题】:Chrome Extension | How to include library in content and background scripts from cdn 【发布时间】:2016-10-03 05:58:21 【问题描述】:

我的 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,但这种方式也不包含在内。

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

【问题讨论】:

【参考方案1】:

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

此外,您不应该像这样使用background 标签。 Source

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

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

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

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

总体思路是在当前网页范围内执行一段JS代码,并在你想要的脚本中添加<script>标签。

这是来自需要包含我们的一些专有 js 的扩展的 sn-p:

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

而 chrome 是一个这么好的人,只是执行它。

【讨论】:

感谢您的回答,但是是的,我知道这种下载必要库的方式,然后像您一样将它们包括在内。但我真的需要知道如何从外部资源中包含它们 @Ms.史密斯 好的,会提供的,给我一分钟。 @Somrlik 这些方法都不适合我。我正在尝试添加 lodash 并在通过script 标签添加到我的popup.html 的 js 文件中使用它。但是我不断收到_ is undefined。我已经尝试过其他软件包,所以它必须与我的实现有关。有什么想法吗? 没关系:我能够通过使用chrome.tabs.executeScript 注入包来使其工作,文件由下载的包提供。

以上是关于Chrome 扩展程序 |如何在 CDN 的内容和后台脚本中包含库的主要内容,如果未能解决你的问题,请参考以下文章

将 Google CDN 替换为国内源的 Chrome 扩展,实现网站加速⚡️

Chrome扩展程序,使内容脚本在所有页面上运行?

如何让 Chrome 扩展程序休眠一段时间并在端口上发布消息

如何在 chrome 扩展 manifest.json 文件中设置多个内容安全策略

SwiftUI:如何将内容阻止程序应用于 chrome?

如何开发Chrome扩展程序