recherche

Maison >interface Web >js tutoriel >Pourquoi les événements de clic de mon extension Chrome ne se déclenchent-ils pas ?

Pourquoi les événements de clic de mon extension Chrome ne se déclenchent-ils pas ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-26 06:51:14460parcourir

Why Aren't My Chrome Extension Popup's Click Events Firing?

Les événements de clic sur la fenêtre contextuelle de l'extension Chrome ne se déclenchent pas : résolution des violations de la politique de sécurité du contenu

La fenêtre contextuelle de votre extension Chrome ne répond pas aux clics sur les boutons, ce qui entrave le comportement prévu. Le coupable réside dans la politique de sécurité du contenu (CSP) par défaut appliquée par le navigateur.

Comprendre le problème

Pour déboguer le problème, cliquez avec le bouton droit sur le bouton contextuel. et sélectionnez "Inspecter la fenêtre contextuelle". Vous rencontrerez un message d'erreur indiquant qu'un script en ligne viole la directive CSP "script-src". Cela explique pourquoi l'événement de clic ne se déclenche pas.

Solution : séparation du code JavaScript

Pour résoudre le problème, déplacez tout le code JavaScript en ligne du fichier HTML vers un fichier séparé. Fichier JS. Cela respecte les exigences CSP en isolant les scripts du document HTML.

Code révisé :

hello.html (Popup Page)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>

popup.js

var a = 0;
function count() {
    a++;
    document.getElementById('demo').textContent = a;
}
document.getElementById('do-count').onclick = count;

Remarque : Remplacez innerHTML par textContent dans les cas où vous avez l'intention de modifier le texte. Bien que cela ne soit pas critique dans cet exemple, il est recommandé d'utiliser textContent pour une sécurité améliorée (atténuation XSS) dans les applications complexes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript chrome html xss for while select Error Event JS default this innerHTML issue
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Modal vs dialogueArticle suivant：Modal vs dialogue

Articles Liés

Voir plus