Extension refuses to load the script due to Content Security Policy directive

by

In a Chrome extension, external script sources must be explicitly allowed by the extension’s content security policy (CSP) in your manifest:

If you have a need for some external JavaScript or object resources, you can relax the policy to a limited extent by whitelisting secure origins from which scripts should be accepted…

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'"

Scripts can only be loaded into an extension over HTTPS, so you must load the jQuery CDN resource over HTTPS:

<script src="https://ajax.googleapis.com/..."></script>

And add a modified CSP to your manifest to allow that HTTPS resource:

{
    "manifest_version": 2,
    "name": "One-click Kittens",
    "description": "This extension demonstrates a 'browser action' with kittens.",
    "version": "1.0",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

And even better solution for your particular case, however, would be to include jQuery in your extension locally, instead of loading from the Internet (for example, your extension currently won’t work offline). Simply include a copy of jQuery in your extension folder and refer to it with a relative path in your script tag. Assuming your jQuery library and HTML popup file are in the same subdirectory, simply do:

<script src="jquery-x.y.z.min.js"></script>

More Related Contents:

  1. Chrome showing error as: Refused to execute inline script because of Content-Security-Policy
  2. How to wait until an element exists?
  3. How can I use jQuery in Greasemonkey scripts in Google Chrome?
  4. Click event on select option element in chrome
  5. How to use jQuery in chrome extension?
  6. Chrome Extension how to send data from content script to popup.html
  7. How to get a cookie from an AJAX response?
  8. jQuery .load() not working in Chrome
  9. jQuery `.is(“:visible”)` not working in Chrome
  10. How do I auto-hide placeholder text upon focus using css or jquery?
  11. jQuery .attr(“disabled”, “disabled”) not working in Chrome
  12. How do you stop Chrome and Opera sorting JSON objects by Index ASC?
  13. How to bind to localStorage change event using jQuery for all browsers?
  14. Distinguish Chrome from Safari using jQuery.browser
  15. Content-Security-Policy error in google chrome extension making
  16. CORS request – why are the cookies not sent?
  17. How to make Chrome remember password for an AJAX form?
  18. Can’t trigger click with jQuery in a Chrome extension
  19. In a Chrome Extension content script, must I wait for document.ready before processing the document?
  20. Selecting text on focus using jQuery not working in Safari and Chrome
  21. Chrome version 18+: How to allow inline scripting with a Content Security Policy?
  22. How to detect if a browser is Chrome using jQuery?
  23. Chrome Extension “Refused to load the script because it violates the following Content Security Policy directive”
  24. tabs.executeScript – passing parameters and using libraries?
  25. Google Chrome viewport-anchored expand direction with flexbox
  26. How to fix chrome-extension inline JavaScript invocation error?
  27. Custom CSS to allow chrome textarea resize smaller than initial state?
  28. Load JQuery into a Chrome extension?
  29. Chrome file upload bug: on change event won’t be executed twice with the same file
  30. Loading jQuery into chrome-extension

Leave a Comment