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