Simple jQuery im <script> -Tag im Chrome-Erweiterungs-Popup wird nicht ausgeführt

Das ist mein 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>

Nachdem das Dokument geladen wurde, soll es einen roten Rand um alle meine Divs haben (in der HTML-Datei sind viele), aber das ist nicht der Fall. Ich verstehe nicht, was hier los ist. Die jQuery befindet sich alle in derselben Datei und der Link, in dem jQuery gehostet wird, wird von Google bereitgestellt und funktioniert auch.

Es ist erwähnenswert, dass die .html Datei wird von @ aufgerufbrowser_action von dem manifest.json -Datei einer Google Chrome-Erweiterung. So öffnet sich das Popup:

Es ist auch erwähnenswert, dass das obige Bild nur ein Beispielbild von Google ist. Das ist nicht mein Bild. Meine Divs haben keine Grenzen und die jQuery ändert das nicht.

manifest.json

.... 

"browser_action": {
    "default_popup": "popupindex.html",
}
....

Ich sehe nicht, wie sich dieses Fenster als Popup auf das @ auswirk .js Datei Funktionalität, aber ich bin sicher, es hat etwas damit zu tun.

Aus Kommentar zu einer Antwort von OP hinzugefügt:
Das Hinzufügen eines Rahmens um all diese divs war nur meine Art zu testen, ob jQuery funktioniert oder nicht. Ich werde jQuery für viele andere Dinge in der Zukunft brauchen. Es funktioniert nicht einmal mit dieser einfachen Sache.

Antworten auf die Frage(4)

Ihre Antwort auf die Frage