Maison >interface Web >js tutoriel >Pourquoi mon événement de clic sur le bouton contextuel de mon extension Chrome ne fonctionne-t-il pas ?

Pourquoi mon événement de clic sur le bouton contextuel de mon extension Chrome ne fonctionne-t-il pas ?

Patricia Arquetteoriginal: 2024-11-25 18:19:11593parcourir

Why is my Chrome Extension Popup Button Click Event Not Working?

Dépannage des fenêtres contextuelles d'extension avec des événements de clic désactivés

Lors du développement d'extensions Chrome, il est possible de rencontrer des situations dans lesquelles la fenêtre contextuelle ne répond pas ou des événements de clic de souris ne sont pas traités. Ce problème peut empêcher l'extension de fonctionner correctement.

Description du problème :

Un utilisateur a créé une fenêtre contextuelle d'extension Chrome qui comprend un bouton permettant d'incrémenter une variable en cas de clic. Cependant, le clic sur le bouton ne déclenche pas le comportement attendu d'incrémentation de la variable. Le fichier manifest.json et le code de la page HTML du popup sont fournis :

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"
  }
}

hello.html (Popup Page):

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

Enquête :

L'enquête révèle que le problème est dû à la politique de sécurité du contenu (CSP) par défaut appliquée par Chrome. Le CSP interdit l'exécution de JavaScript en ligne, qui est utilisé dans la page HTML contextuelle pour gérer l'événement de clic.

Solution :

Pour résoudre le problème, le JavaScript en ligne de le fichier HTML est supprimé et placé dans un fichier JS séparé :

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;

Avec ce changement, la fenêtre contextuelle incrémentera désormais la variable comme prévu lorsque le bouton est cliqué.

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 for Event JS default this 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：Pourquoi choisir ng-bind plutôt que l'interpolation {{}} dans AngularJS ?Article suivant：Pourquoi choisir ng-bind plutôt que l'interpolation {{}} dans AngularJS ?

Articles Liés

Voir plus