No se ejecuta jQuery simple dentro de la etiqueta <script> en la ventana emergente de extensión de Chrome

Este es mi 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>

Después de que se carga el documento, se supone que debe poner un borde rojo alrededor de todos mis divs (hay mucho en el archivo HTML), pero no lo hace. No veo qué pasa aquí. JQuery está en el mismo archivo y Google proporciona el enlace donde está alojado jQuery y también funciona.

Vale la pena mencionar que el.html el archivo es llamado porbrowser_action desde elmanifest.json archivo de una extensión de Google Chrome. Entonces, abre la ventana emergente de esta manera:

También vale la pena mencionar que la imagen de arriba es solo una imagen de ejemplo proporcionada por Google. Esta no es mi imagen. Mis div no tienen fronteras y jQuery no cambia eso.

manifest.json

.... 

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

No veo cómo esta ventana emergente afectaría el.js funcionalidad de archivo, pero estoy seguro de que tiene algo que ver con eso.

Agregado del comentario en una respuesta de OP:
Agregar un borde alrededor de todos estos divs fue solo mi forma de probar si jQuery funciona o no. Necesitaré jQuery para muchas otras cosas en el futuro. Ni siquiera funciona con esta cosa simple.

Respuestas a la pregunta(2)

Su respuesta a la pregunta