在Chrome扩展程序中引用JS库

Question

我正在尝试引用位于Chrome扩展脚本根文件夹中的本地库("/moment.js"(。我已经让该功能在 Google App 脚本中作为工作表扩展程序和在加载到 HTML 后引用库的脚本，而不是作为 Chrome 扩展程序。

这是我的清单.json

"name": "RE-Toolkit",
"version": "0.1",
"description": "Real Estate Toolkit",
"manifest_version": 2,
"permissions": [
"<all_urls>"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["/moment.js"]
}
],
//ICON
"browser_action": {
"default_icon": {
"512": "/home-icon.png"
},
"default_popup": "/popup.html"
},
"web_accessible_resources": ["moment.js", "script.js", "popup.html"]
}

我认为在清单中包含此资源后，我应该能够在我的脚本中使用

var m = moment();
console.log(m);

但到目前为止，它不起作用。有什么解决方案吗？

Answer 1

不确定您是否已经找到了解决方案，但无论如何我都会回答这个问题，以帮助面临相同问题的其他人。

为了解决此问题，您必须调整内容安全策略。简而言之，谷歌的CSP是一种机制，用于阻止非本地扩展使用的资源。这意味着(示例(您将无法使用 Jquery CDN，但下载 jquery 并引用其本地文件是可以接受的。您可以在此处阅读有关此内容的更多信息

若要允许扩展使用程序外部的资源，必须在manifest.json中显式声明它。为此，您必须在 manifest.json 中添加"content_security_policy"属性，如下所示：

"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"

所以基本上，content_security_policy值是一个字符串。替换对要使用的文件的 example.com 引用。

"content_security_policy": "script-src 'self' https://code.jquery.com/jquery-3.5.1.min.js; object-src 'self'"

对于想要向扩展添加多个外部资源的用户，请在第一个资源之后添加它，并在两者之间用空格分隔。您必须在"脚本-src 'self'"之后但分号之前添加资源。不要忘记将 cdn 文件链接也添加到您的代码中。希望这对某人有所帮助。