O jQuery simples dentro da tag <script> no pop-up da extensão do Chrome não está sendo executado
Este é o meu 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>
Depois que o documento é carregado, ele deve colocar uma borda vermelha em torno de todos os meus divs (há muito no arquivo HTML), mas isso não acontece. Não vejo o que há de errado aqui. O jQuery está no mesmo arquivo e o link onde o jQuery está hospedado é fornecido pelo Google e também funciona.
Vale ressaltar que o.html arquivo é chamado porbrowser_action demanifest.json arquivo de uma extensão do Google Chrome. Então, ele abre o pop-up da seguinte maneira:
Também vale ressaltar que a imagem acima é apenas uma imagem de exemplo fornecida pelo Google. Esta não é a minha imagem. Meu div não tem bordas e o jQuery não muda isso.
manifest.json
....
"browser_action": {
"default_popup": "popupindex.html",
}
....
Não vejo como essa janela sendo pop-up afetaria o.js funcionalidade de arquivo, mas tenho certeza que tem algo a ver com isso.
Adicionado do comentário de uma resposta do OP:
Adicionar uma borda em torno de todas essas divs foi apenas a minha maneira de testar se o jQuery funciona ou não. Vou precisar do jQuery para muitas outras coisas no futuro. Nem funciona com essa coisa simples.