Question

我正在尝试创建Chrome扩展程序，但我的JS都没有。控制台显示此错误：

拒绝加载脚本＆＃39; https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js＆＃39; 因为它违反了以下内容安全策略指令：＆＃34; script-src＆＃39; self＆＃39; blob：filesystem：chrome-extension-resource：＆＃34;。

为什么阻止我的jQuery运行？

Answer 1

正如Chome website所述，有一个内容安全策略阻止您的脚本加载远程脚本：

允许通过HTTPS从example.com加载脚本资源的宽松策略定义可能如下所示：

＆＃34; content_security_policy＆＃34;：＆＃34; script-src＆＃39; self＆＃39; https://example.com; object-src＆＃39; self＆＃39;＆＃34;

因此，在您的情况下，manifest.json应包含：

 {
  "name": "My Extension",
  "manifest_version": 2,
  "background":{
     "scripts": [...]
  },
  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
 }

Answer 2

您是否在清单JSON文件中允许它。像这样：

manifest.json

 {
   "name": "My Extension",
   "content_scripts": [{
     "js": ["jquery.min.js", "YourJavaScriptFile.js"],
     "matches": ["http://*/*", "https://*/*"]
   }]
 }

我遗漏了必填字段，但只是给出了基本想法。

Answer 3

好吧，你不能将CDN用于js，你将不得不复制“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>

但请确保这是包含所提及网址

中所有数据的文件的写入路径

欢呼声，

Answer 4

内容安全策略是您应用程序的另一安全层。它使您可以定义从中加载任何样式，脚本或数据的所有原点。对于每种样式，脚本，字体或连接，您需要指定要在应用程序中加载的域。如果您正在使用其他域的CDN jQuery，则需要在内容安全策略中指定此域。

如果您不希望增加安全性，并且希望从任何所需的域中加载样式或脚本，只需在index.html中添加以下meta标签，并确保该标签位于任何导入之前。

<meta http-equiv="Content-Security-Policy" content="default-src *;">

此处*是通配符，可用于访问任何域。如果您想要增加安全性，我建议您转到documentation，它非常清楚如何指定要在应用程序中导入的所有域

Answer 5

我会告诉你长话短说。 Google Chrome浏览器具有 CSP（内容安全政策），这意味着Chrome扩展程序不允许使用外部脚本。如果您使用的是vue cdn，那么只需执行以下步骤即可。

在manifest.json中添加以下代码，并根据需要更改文件名。在这里'unsafe-eval'是您要寻找的东西，只需添加即可。

{
    "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: ""
    }
});

Answer 6

我的HTML文件有<script> some js code within it </script>。删除脚本标记后，错误消失了。

Answer 7

根据Chrome Extension documentation，您需要将外部资源的副本下载到package文件夹中并在本地加载脚本。

不允许加载外部脚本。

Answer 8

我找到了这个解决方案

清单 V3

"content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline' https://music.yandex.ru/;"
}

Chrome扩展程序＆＃34;拒绝加载脚本，因为它违反了以下内容安全策略指令＆＃34;

8 个答案: