Following is my code of HTML
Scripts:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="background.js"></script>
HTML:
<button name="btnlogin" id="btnlogin">Login</button><br/><br/>
and following is js
$(document).ready(function(){
document.getElementById("#btnlogin").click(function(){
alert("s");
});
});
manifest file:
{
"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"
},
}
I found that when I run this code simply in browser than alert appears properly but when I run it as a chrome extension it gives me following errors.
Uncaught ReferenceError: $ is not defined
and
Refused to load the script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
I don't understand what are these errors. Please help me understanding the extension..
Thank you
Best Answer
In a Chrome extension, external script sources must be explicitly allowed by the extension's content security policy (CSP) in your manifest:
Scripts can only be loaded into an extension over HTTPS, so you must load the jQuery CDN resource over HTTPS:
And add a modified CSP to your manifest to allow that HTTPS resource:
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: