Warum funktioniert das Klickereignis für die Popup-Schaltfläche meiner Chrome-Erweiterung nicht?-js-Tutorial-php.cn

Warum funktioniert das Klickereignis für die Popup-Schaltfläche meiner Chrome-Erweiterung nicht?

Patricia Arquette

Freigeben： 2024-11-25 18:19:11

Original

655 Leute haben es durchsucht

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

Fehlerbehebung bei Erweiterungs-Popups mit deaktivierten Klickereignissen

Bei der Entwicklung von Chrome-Erweiterungen kann es vorkommen, dass das Popup nicht reagiert oder Mausklickereignisse auftreten werden nicht behandelt. Dieses Problem kann dazu führen, dass die Erweiterung nicht ordnungsgemäß funktioniert.

Problembeschreibung:

Ein Benutzer hat ein Chrome-Erweiterungs-Popup erstellt, das eine Schaltfläche zum Erhöhen einer Variablen beim Klicken enthält. Das Klicken auf die Schaltfläche löst jedoch nicht das erwartete Verhalten beim Erhöhen der Variablen aus. Die manifest.json-Datei und der HTML-Seitencode für das Popup werden bereitgestellt:

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

Nach dem Login kopieren

hello.html (Popup Seite):

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

Nach dem Login kopieren

Untersuchung:

Die Untersuchung ergab, dass das Problem auf die von Chrome durchgesetzte standardmäßige Content Security Policy (CSP) zurückzuführen ist. Der CSP verbietet die Inline-JavaScript-Ausführung, die in der Popup-HTML-Seite zur Verarbeitung des Klickereignisses verwendet wird.

Lösung:

Um das Problem zu beheben, muss das Inline-JavaScript von Die HTML-Datei wird entfernt und in einer separaten JS-Datei abgelegt:

hello.html (Popup Seite):

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

Nach dem Login kopieren

popup.js:

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

Nach dem Login kopieren

Mit dieser Änderung erhöht das Popup nun die Variable wie erwartet, wenn die Schaltfläche gedrückt wird angeklickt wird.

Das obige ist der detaillierte Inhalt vonWarum funktioniert das Klickereignis für die Popup-Schaltfläche meiner Chrome-Erweiterung nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!