Pourquoi les événements de clic contextuels de mon extension Chrome ne fonctionnent-ils pas ?-js tutoriel-php.cn

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

Susan Sarandon

Libérer： 2024-12-06 01:18:10

original

406 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

popup.js:

var a = 0;

function count() {
  a++;
  document.getElementById('demo').textContent = a;
}

document.getElementById('do-count').onclick = count;

Copier après la connexion

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!