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

Question

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?

Answer 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'",  } 

Answer 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.