it-swarm.com.de

Das Chrome-Erweiterungs-Popup funktioniert nicht, Klickereignisse werden nicht behandelt

Ich habe eine JavaScript-Variable erstellt, und wenn ich auf die Schaltfläche klicke, sollte sie um 1 erhöht werden, aber dies geschieht nicht.

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

Hier ist der Code für die HTML-Seite 

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

Ich möchte, dass die Erweiterung mir den Wert von a anzeigt und jedes Mal um eins erhöht, wenn ich auf die Erweiterung oder die Schaltfläche klicke

picture of the extension

24
Sainath

Ihr Code funktioniert nicht, da er gegen die standardmäßige Inhaltssicherheitsrichtlinie verstößt. Ich habe einen Screencast von einer Minute erstellt, um zu zeigen, was falsch ist:

 screencast

Zuerst habe ich gezeigt, wie das Problem behoben werden kann. Klicken Sie mit der rechten Maustaste auf die Popup-Schaltfläche und klicken Sie auf "Inspect popup" . Anschließend wird die folgende Fehlermeldung angezeigt:

Die Ausführung eines Inline-Skripts wurde abgelehnt, weil es die folgende Richtlinie zur Richtlinie zur Einhaltung der Richtlinie zur Sicherheit von Inhalten verletzt:.

Dies erklärt, dass Ihr Code nicht funktioniert, da er gegen den Standard-CSP verstößt: Inline-JavaScript wird nicht ausgeführt . Um das Problem zu lösen, müssen Sie sämtliches Inline-JavaScript aus Ihrer HTML-Datei entfernen und es in einer separaten JS-Datei ablegen.

Das Ergebnis wird unten gezeigt:

hello.html (Popup-Seite)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">=a</p>
<button type="button" id="do-count">Count</button>
<script src="popup.js"></script>
</body>
</html>

popup.js

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

Beachten Sie, dass ich innerHTML durch textContent ersetzt habe. Lernen Sie, textContent anstelle von innerHTML zu verwenden, wenn Sie den Text ändern möchten. In diesem einfachen Beispiel spielt es keine Rolle, aber in komplexeren Anwendungen kann es zu einem Sicherheitsproblem in Form von XSS werden.

113
Rob W

Ändern Sie Ihre onclick:

onclick="count"

Oder ändern Sie Ihre Zählfunktion folgendermaßen:

function count()
{

    var demo = document.getElementById("demo");
    return function() {
        demo.innerHTML = ++a;
    }

}

Hier ist eine schöne Demo, die ich zusammengestellt habe:

Code (dies setzt voraus, dass Sie id="the_button" zu Ihrer Schaltfläche hinzufügen):

window.onload = function () {
    var button = document.getElementById("the_button");
    button.onclick = count();

    function count() {
        var a = 0;
        var demo = document.getElementById("demo");
        return function () {
            demo.innerHTML = ++a;
        }
    }
}

Demo: http://jsfiddle.net/maniator/ck5Yz/

0
Neal