我正在尝试创建一个 Chrome 扩展程序，但我的 JS 都不起作用。控制台显示此错误：
拒绝加载脚本 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js' 因为它违反了以下内容安全政策指令： “script-src 'self' blob：文件系统：chrome-extension-resource：”。
为什么它会阻止我的 jQuery 运行？
【问题讨论】：
标签： javascript jquery html google-chrome google-chrome-extension
我找到了这个解决方案
清单 V3
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline' https://music.yandex.ru/;"
}
【讨论】：
我会告诉你长话短说。 Google Chrome 具有 CSP（内容安全策略），这意味着 chrome 扩展程序不允许外部脚本。如果您使用的是vue cdn，那么只需执行以下步骤即可。
{
"manifest_version": 2,
"name" : "Hello Extension",
"version" : "1.0",
"permissions": [
"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
],
"background": {
"scripts": ["popup.js"],
"persistent": false
},
"description" : "Testing the hello world extension",
"icons": {
"16" : "icons16.png",
"48" : "icons16.png",
"128" : "icons16.png"
},
"browser_action": {
"default_icon" : "icons16.png",
"default_popup" : "popup.html"
},
"content_security_policy": "script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self'"
}
external js 此处 popup.js 添加 Vue 代码，一切都会很好。var app = new Vue({
el: "#app",
data: {
name: ""
}
});
【讨论】：
根据Chrome Extension documentation，您需要将外部资源的副本下载到您的包文件夹中并在本地加载脚本。
不允许加载外部脚本。
【讨论】：
如 Chome website 中所述， 有一个内容安全策略阻止您的脚本加载远程脚本：
允许通过 HTTPS 从 example.com 加载脚本资源的宽松策略定义可能如下所示：
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"
所以在你的情况下，manifest.json 应该包含：
{
"name": "My Extension",
"manifest_version": 2,
"background":{
"scripts": [...]
},
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
}
【讨论】：
script-src 添加一个元素，否则，只需添加另一个带有分号的指令;)
; 标记最后一个跨度>
内容安全策略是您应用程序的另一层安全保护。它可以让您定义您加载任何样式、脚本或数据的所有来源。对于每种样式、脚本、字体或连接，您需要指定要在应用程序中加载的域。如果您使用的是其他域的 CDN jQuery，则需要在 Content Security Policy 中指定该域。
如果您不想要这个额外的安全层并且想从您希望的任何域加载样式或脚本，只需在 index.html 中添加以下元标记并确保它位于任何导入之前.
<meta http-equiv="Content-Security-Policy" content="default-src *;">
这里 * 是通配符，可让您访问任何域。如果你想要这个额外的安全层，我建议你去documentation，它非常清楚如何指定你想要在你的应用程序中导入的所有域
【讨论】：
好吧，你不能为 js 使用 CDN，你将不得不复制“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”的内容并在你的 js 目录中创建一个新文件并将其命名为 jquery.min.js 并将所有内容粘贴到其中，然后在您的 HTML 文件标题中删除包含此 url 的行并改用此
<script src="js/jquery.min.js"></script>
但请确保这是包含上述 url 中所有数据的文件的写入路径
干杯，
【讨论】：
我的 HTML 文件有 <script> some js code within it </script>。删除脚本标签后，错误消失了。
【讨论】：
您是否在清单 JSON 文件中允许它。像这样的：
{
"name": "My Extension",
"content_scripts": [{
"js": ["jquery.min.js", "YourJavaScriptFile.js"],
"matches": ["http://*/*", "https://*/*"]
}]
}
我省略了一些必填字段，但只是给出了基本概念。
【讨论】：
Uncaught ReferenceError: $ is not defined