Chrome Extension "Refused to load the script because it violates the following Content Security Policy directive"

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?

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:

manifest.json

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