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

Pourquoi les événements de clic contextuels de mon extension Chrome ne fonctionnent-ils pas ?

Susan Sarandonoriginal: 2024-12-06 01:18:10404parcourir

Why Aren't My Chrome Extension Popup Click Events Working?

Résolution des problèmes de fenêtres contextuelles d'extension Chrome : gestion des événements de clic

Lors de la création d'une fenêtre contextuelle d'extension Chrome avec JavaScript, les utilisateurs peuvent rencontrer des problèmes liés aux événements de clic. pas géré correctement. Cela peut être dû à des violations de la politique de sécurité du contenu (CSP) par défaut.

Description du problème :

Un développeur a créé une variable JavaScript et un bouton dans le fichier de l'extension. surgir. En cliquant sur le bouton, la variable devrait s'incrémenter de 1. Cependant, le code ne fonctionne pas comme prévu.

Configuration Manifest.json :

{
  "name":"Facebook",
  "version":"1.0",
  "description":"My Facebook Profile",
  "manifest_version":2,
  "browser_action":{
    "default_icon":"google-plus-red-128.png",
    "default_popup":"hello.html"
  }
}

Page contextuelle HTML :

<!DOCTYPE html>
<html>
<head>
  <script>
    var a=0;
    function count()
    {
      a++;
      document.getElementById("demo").innerHTML=a;
      return a;
    }
  </script>
</head>
<body>
  <p>

Explication :

Le problème survient en raison de la présence de JavaScript en ligne dans le fichier HTML. Le JavaScript en ligne est interdit par le CSP par défaut.

Solution :

Pour résoudre ce problème, déplacez tout le JavaScript en ligne vers un fichier JS distinct.

bonjour.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 supplémentaire :

Utiliser textContent au lieu de innerHTML lors de la modification du contenu du texte pour éviter d'éventuelles vulnérabilités de sécurité.

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 json chrome html 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：Comment ouvrir en toute sécurité des fichiers HTML locaux dans Chrome ?Article suivant：Comment ouvrir en toute sécurité des fichiers HTML locaux dans Chrome ?

Articles Liés

Voir plus