javascript - llamar - La jQuery simple dentro de la etiqueta<script> en la ventana emergente de extensión de Chrome no se está ejecutando

llamar javascript desde html (2)

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 el documento se carga, se supone que debe poner un borde rojo alrededor de todos mis divs (hay muchos en el archivo HTML), pero no es así. No veo lo que está mal aquí. El jQuery está en el mismo archivo y el enlace donde se aloja jQuery es proporcionado por Google y también funciona.

Vale la pena mencionar que el archivo .html es llamado por browser_action desde el archivo manifest.json de una extensión de Google Chrome. Por lo tanto, 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. Mi div no tiene fronteras y jQuery no cambia eso.

manifest.json

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

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

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

Intente mover la etiqueta de script a la parte inferior del cuerpo, cuando se hayan cargado todos los elementos.

Está intentando cargar / ejecutar scripts que infringen la Política de seguridad de contenido . Esto afecta tanto a su intento de cargar jQuery desde una fuente externa a su extensión como a su intento de usar un script en línea (su código $(document).read() ).

Puede acceder a la consola de la ventana emergente haciendo clic derecho en la ventana emergente y seleccionando "Inspeccionar". La consola le habría mostrado los siguientes errores:

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

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.

Política de seguridad de contenido predeterminada de la extensión

Para las extensiones de Chrome, la Política de seguridad de contenido predeterminada es:

script-src ''self''; object-src ''self''

Google explica que las razones para esto son:

Esta política agrega seguridad al limitar extensiones y aplicaciones de tres maneras:
Eval y funciones relacionadas están deshabilitadas
JavaScript en línea no se ejecutará
Esta restricción prohíbe tanto los bloques en línea como los manejadores de eventos en línea (por ejemplo, <button onclick="..."> ).
Solo se cargan guiones locales y recursos de objetos
En lugar de escribir código que depende de la carga de jQuery (o de cualquier otra biblioteca) desde un CDN externo, considere incluir la versión específica de jQuery en su paquete de extensión.

Cargando jQuery

Para cargar jQuery, la mejor solución es descargar el código jQuery. A partir de la pregunta, el código que está utilizando está en: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js . Sin embargo, como lo menciona Ted, esa es una versión bastante antigua de jQuery. A menos que tenga un motivo para usar una versión anterior, puede intentar https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js . A continuación, puede almacenar ese archivo en su directorio de extensión (o en un subdirectorio) e incluirlo en su popupindex.html con

<script src="jquery.min.js"></script>

Tu propio código

Su propio código JavaScript no se está ejecutando porque la política de seguridad de contenido predeterminada para las extensiones no permite las secuencias de comandos en línea. La mejor solución es mover su código $(document).ready() en un archivo separado (por ejemplo, popupindex.js ) que luego se incluye en su popupindex.html usando:

<script src="popupindex.js"></script>

Obviamente, eso tiene que ser después de la etiqueta <script> que está cargando jQuery.

Puede incluir scripts en línea, pero deberá proporcionar un " hash de la secuencia de comandos en la directiva " script-src "en el valor de la clave content_security_policy dentro de su manifest.json . Sin embargo, hacerlo no vale la pena el tiempo y el esfuerzo. Es mucho más fácil mover el código a un archivo separado.

JavaScript incluido en los controladores de eventos definidos HTML tampoco está permitido

El código que agrega en HTML para los manejadores de eventos es JavaScript y tampoco está permitido. Por ejemplo, el siguiente error:

<button onclick="doMyThing();">My button</button>

Necesita codificar eso como:

<button id="doMyThingButton">My button</button>

Luego, en su archivo JavaScript separado (ver arriba), algo como:

document.getElementById(''doMyThingButton'').addEventListener(''click'',doMyThing,false);

Extensión completa con ventana emergente ejecutando jQuery

La siguiente extensión completa, que ejecuta su código jQuery, produce una ventana emergente que se ve así:

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 :

Descargado de https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js y almacenado como jquery.min.js en el directorio de la extensión.