Chrome Extension "Refused to load the script because it violates the following Content Security Policy directive"
Solution 1
As explained on the Chome website, there is a Content Security Policy preventing your script to load remote script:
A relaxed policy definition which allows script resources to be loaded from example.com over HTTPS might look like:
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"
So in your case, the manifest.json
should contain:
{
"name": "My Extension",
"manifest_version": 2,
"background":{
"scripts": [...]
},
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
}
Solution 2
Did you allow it in your manifest JSON file. Something like this:
{
"name": "My Extension",
"content_scripts": [{
"js": ["jquery.min.js", "YourJavaScriptFile.js"],
"matches": ["http://*/*", "https://*/*"]
}]
}
There are required fields I left out, but just giving the basic idea.
Solution 3
I will tell you long story short. Google Chrome has CSP (Content Security Policy), which means chrome extensions don't allow the external script. If you are using the vue cdn
then just perform following steps and your are good to go.
- Add following code in your manifest.json and change your filenames as per need. Here 'unsafe-eval' is the thing you are looking for, just add this.
{
"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'"
}
- In your
external js
here popup.js add the Vue code and everything will work great.
var app = new Vue({
el: "#app",
data: {
name: ""
}
});
Solution 4
Content Security Policy is another layer of security for your application. It lets you define all the origins from which you are loading any styles, scripts or data. For each of the style, script, font or connect, you need to specify the domains which you are loading in your application. If you are using a CDN jQuery of another domain, you need to specify this domain in the Content Security Policy.
If you don't want this added layer of security and would like to load styles or scripts from any domain you wish, just add this following meta tag in your index.html and make sure this is located before any of your imports.
<meta http-equiv="Content-Security-Policy" content="default-src *;">
here * is the wildcard character which lets you access any domain. If you want this added layer of security I suggest you go to the documentation which is very clear about how to specify all the domains you want import in your application
Solution 5
I found this solution
manifest V3
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline' https://music.yandex.ru/;"
}
Related videos on Youtube
Mia
Updated on July 09, 2022Comments
-
Mia almost 2 years
I'm trying to create a Chrome extension, but none of my JS works. The console shows this error:
Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".
Why is it blocking my jQuery from running?
-
epascarello over 8 yearsDid you add it to your manifest?
-
Mia over 8 years@epascarello That's the problem then, because I don't know what else I could be missing. How can I add it to the manifest?
-
rsanchez over 8 yearsPossible duplicate of Extension refuses to load the script due to Content Security Policy directive
-
-
Mia over 8 yearsGot it all setup now. Thank you for your help, it's worth a lot!
-
Mia over 8 yearsWell, that didn't go as planned. I now get the following console error:
Uncaught ReferenceError: $ is not defined
-
Jun711 over 5 years@serv-inc do u know what the syntax is for more than one endpoint?
-
serv-inc over 5 years@Jun: as of w3c.github.io/webappsec-csp/#header-content-security-policy, w3c.github.io/webappsec-csp/#grammardef-serialized-policy, and w3c.github.io/webappsec-csp/#grammardef-serialized-directive, you should be able to just add the value (if you mean just add an element to
script-src
, otherwise, just add another directive with a semicolon;
) -
Jun711 over 5 years@serv-inc right, "content_security_policy": "script-src 'self' example.com example2.com; object-src 'self'",
;
to mark the last one -
gumuruh over 4 yearsloading external script is not allowed? But how to change it become allowed?
-
john ktejik about 4 yearsso what goes in example.com? The domain name? The jquery file? Can you give a complete example based on the OP's post?
-
john ktejik about 4 yearsI get a 'failed to load extension' after using this syntax
-
gumuruh over 2 yearshow to update that content_security_policy into manifest v3... as many people said there would be different.