Intereting Posts

Créez une forme dans d3.js par glisser-déposer d'un élément DOM Utilisation de JavaScript eval pour analyser JSON $ .post lancer "Invocation illégale" JQuery Version Conflict Sélection initiale dans les menus déroulants avec des objets utilisant KnockoutJS Comment utilisez-vous les paramètres de requête pour limiter les contacts récupérés dans l'API Google Contacts Comment JavaScript est-il simple? Fonction d'impression Javascript – nom de fichier Sélectionnez et concentrez une fenêtre déjà existante Réagir avec Flux: est-ce le modèle dogmatique ou existe-t-il des options égales / meilleures? Charge d'image croisée refusée par la politique de partage de ressources Cross-Origin Comment puis-je détecter l'intersection des lignes sur un globe géométrique D3? Héritage JavaScript avec _.extend () Vue des colonnes de groupe Google View.ChartWrapper Comment ajouter un fichier dans un complément Firefox?

Le jQuery simple dans la balise <script> dans la fenêtre contextuelle de l'extension Chrome n'exécute pas

C'est mon 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>

Après le chargement du document, il est supposé mettre une bordure rouge autour de toutes mes divs (il y a beaucoup dans le fichier HTML), mais ce n'est pas le cas. Je ne vois pas ce qui ne va pas ici. Le jQuery est tout dans le même fichier et le lien où jQuery est hébergé est fourni par Google et fonctionne également.

Il convient de mentionner que le fichier .html est appelé par browser_action partir du fichier manifest.json d'une extension Google Chrome. Donc, il ouvre le popup de cette façon:

Entrez la description de l'image ici

Il convient également de mentionner que l'image ci-dessus n'est qu'une image d'exemple fournie par Google. Ce n'est pas mon image. Mon div n'a pas de bordure et jQuery ne change pas cela.

Manifest.json

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

Je ne vois pas comment cette fenêtre est une popup affecterait la fonctionnalité de fichier .js , mais je suis sûr qu'elle a quelque chose à voir avec cela.

Ajouté pour commenter une réponse par OP:
Ajouter une bordure autour de toutes ces divs était juste ma façon de tester si jQuery fonctionne ou non. J'aurai besoin de jQuery pour beaucoup d'autres choses à l'avenir. Il ne fonctionne même pas avec cette chose simple.

Vous essayez de charger / exécuter des scripts qui violent la Politique de sécurité du contenu . Cela affecte à la fois votre tentative de charger jQuery d'une source externe à votre extension et votre tentative d'utilisation d'un script en ligne (votre code $(document).read() ).

Vous pouvez accéder à la console pour la fenêtre contextuelle en cliquant avec le bouton droit de la souris dans la fenêtre contextuelle et en sélectionnant "Inspecter". La console vous aurait montré les erreurs suivantes:

 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.

Politique de sécurité du contenu par défaut de l'extension

Pour les extensions Chrome, la stratégie de sécurité de contenu par défaut est:

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

Google explique que les raisons sont:

Cette politique ajoute de la sécurité en limitant les extensions et les applications de trois façons:

Eval et les fonctions associées sont désactivées

Le JavaScript en ligne ne sera pas exécuté
Cette restriction interdit à la fois les blocs en ligne et les gestionnaires d'événements en ligne (par exemple, <button onclick="..."> ).

Seules les ressources locales de script et d'objet sont chargées
Au lieu d'écrire un code qui dépend du chargement jQuery (ou de toute autre bibliothèque) à partir d'un CDN externe, envisagez d'inclure la version spécifique de jQuery dans votre package d'extension.

Chargement jQuery

Pour charger jQuery, la meilleure solution est de télécharger le code jQuery. À partir de la question, le code que vous utilisez est: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js . Cependant, comme l'a mentionné Ted, c'est une ancienne version de jQuery. Sauf si vous avez une raison d'utiliser une ancienne version, vous pouvez essayer https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js . Vous pouvez ensuite stocker ce fichier dans votre répertoire d'extension (ou dans un sous-répertoire) et l'inclure dans votre popupindex.html avec

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

Votre propre code

Votre propre code JavaScript n'est pas en cours d'exécution car la politique de sécurité de contenu par défaut pour les extensions ne permet pas les scripts en ligne. La meilleure solution est de déplacer votre code $(document).ready() dans un fichier distinct (p. Ex . Popupindex.js ) qui est ensuite inclus dans votre popupindex.html en utilisant:

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

Évidemment, cela doit être après la <script> qui charge jQuery.

Vous pouvez inclure des scripts en ligne, mais vous devrez fournir un « hash du script dans la directive « script-src »dans la valeur de la clé content_security_policy dans votre manifeste.json . Toutefois, ce n'est pas seulement la peine du temps et de l'effort. Il est beaucoup plus facile de déplacer le code dans un fichier distinct.

JavaScript inclus dans les gestionnaires d'événements définis HTML n'est pas autorisé

Le code que vous ajoutez en HTML pour les gestionnaires d'événements est JavaScript et n'est pas autorisé. Par exemple, les éléments suivants échoueront:

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

Vous devez coder cela comme suit:

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

Ensuite, dans votre fichier JavaScript séparé (voir ci-dessus), quelque chose comme:

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

Extension complète avec popup en cours d'exécution jQuery

L'extension complète suivante, qui exécute votre code jQuery, produit un popup qui ressemble à:

apparaitre

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

Téléchargé à partir de https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js et stocké sous jquery.min.js dans le répertoire de l'extension.

Essayez de déplacer votre étiquette de script vers le bas du corps, lorsque tous les éléments ont été chargés.