Simple jQuery within <script> tag in Chrome extension popup is not executing
This is my HTML:
<!doctype html>
<html>
<head>
<title>PassVault</title>
<link rel="stylesheet" type="text/css" href="stil.css">
<meta charset="utf-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$("div").css("border", "3px solid red");
});
</script>
</head>
<body>
<div id="rainbow"> </div>
<div id="loginBox">
<div id="welcome"> Dobrodošli, uporabnik! </div><br>
</div>
</body>
</html>
After the document loads up, it's supposed to put a red border around all my divs (there's plenty in the HTML file), but it doesn't. I don't see what's wrong here. The jQuery is all in the same file and the link where jQuery is hosted is provided by Google and also works.
It's worth mentioning that the .html file is called by browser_action from the manifest.json file of a Google Chrome extension. So, it opens the popup this way:
It is also worth mentioning that the above image is just an example image provided by Google. This is not my image. My div's have no borders and the jQuery doesn't change that.
manifest.json
....
"browser_action": {
"default_popup": "popupindex.html",
}
....
I don't see how this window being a popup would affect the .js file functionality but I'm sure it has something to do with that.
Added from comment on an answer by OP:
Adding a border around all these divs was just my way of testing whether or not jQuery works. I will be needing jQuery for plenty of other things in the future. It doesn't even work with this simple thing.
Solution 1:
You are attempting to load/run scripts that violate the Content Security Policy. This affects both your attempt to load jQuery from a source external to your extension and your attempted use of an inline script (your $(document).read() code).
You can access the console for the popup by right-clicking in the popup and selecting "Inspect". The console would have shown you the following errors:
Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".
and
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-qMVaiPhbudnaz91QqECVnbdTvKWnqeultnb/Nt/ybo8='), or a nonce ('nonce-...') is required to enable inline execution.
Extension Default Content Security Policy
For Chrome extensions, the default Content Security Policy is:
script-src 'self'; object-src 'self'
Google explains that the reasons for this are:
This policy adds security by limiting extensions and applications in three ways:
- Eval and related functions are disabled
- Inline JavaScript will not be executed
This restriction bans both inline blocks and inline event handlers (e.g.<button onclick="...">).- Only local script and and object resources are loaded
Instead of writing code that depends on jQuery (or any other library) loading from an external CDN, consider including the specific version of jQuery in your extension package.
Loading jQuery
For loading jQuery, the best solution is to download the jQuery code. From the question, the code you are using is at: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js. However, as mentioned by Ted, that is quite an old version of jQuery. Unless you have a reason to be using an older version, you might try https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js. You can then store that file in your extension directory (or in a subdirectory) and include it in your popupindex.html with
<script src="jquery.min.js"></script>
Your own code
Your own JavaScript code is not running because the default content security policy for extensions does not permit inline scripts. The best solution is to move your $(document).ready() code into a separate file (e.g. popupindex.js) which is then included in your popupindex.html using:
<script src="popupindex.js"></script>
Obviously, that needs to be after the <script> tag that is loading jQuery.
You can include inline scripts, but you will need to supply a "hash of the script in the "script-src" directive" in the value for the content_security_policy key within your manifest.json. However, doing so is just not worth the time and effort. It is much easier to move the code into a separate file.
JavaScript included in HTML defined event handlers is also not permitted
Code that you add in HTML for event handlers is JavaScript and is also not permitted. For example, the following will fail:
<button onclick="doMyThing();">My button</button>
You need to code that as:
<button id="doMyThingButton">My button</button>
Then, in your separate JavaScript file (see above), something like:
document.getElementById('doMyThingButton').addEventListener('click',doMyThing,false);
Complete extension with popup running jQuery
The following complete extension, which runs your jQuery code, produces a popup which looks like:
manifest.json:
{
"description": "Demonstrate use of jQuery in a popup.",
"manifest_version": 2,
"name": "jQuery-in-popup",
"version": "0.1",
"browser_action": {
"default_icon": {
"48": "myIcon.png"
},
"default_title": "Show panel",
"default_popup": "popupindex.html"
}
}
popupindex.html:
<!doctype html>
<html>
<head>
<title>PassVault</title>
<meta charset="utf-8">
<script type='text/javascript' src='jquery.min.js'></script>
<script type="text/javascript" src='popupindex.js'> </script>
</head>
<body>
<div id="rainbow"> </div>
<div id="loginBox">
<div id="welcome"> Dobrodošli, uporabnik! </div><br>
</div>
</body>
</html>
popupindex.js:
$(document).ready(function () {
$("div").css("border", "3px solid red");
});
jquery.min.js:
Downloaded from https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js and stored as jquery.min.js in the extension's directory.