onClick in Chrome Extension funktioniert nicht

Scheint dies die einfachste Sache zu tun, aber es funktioniert einfach nicht. In einem normalen browser die .html und .js-Dateien funktioniert perfekt, aber in der Chrome-Erweiterung die onClick Funktion nicht durchführen, was es tun soll.

.js-Datei:

function hellYeah(text) {
  document.getElementById("text-holder").innerHTML = text;
}

.html-Datei:

<!doctype html>
<html>
  <head>
    <title>
      Getting Started Extension's Popup
    </title>
    <script src="popup.js"></script>
  </head>
  <body>
    <div id="text-holder">
      ha
    </div>
    <br />
    <a onClick=hellYeah("xxx")>
      hyhy
    </a>
  </body>
</html>

Also im Grunde sobald der Benutzer klickt auf "hyhy", "ha" sollte sich ändern in "xxx". Und wieder - es funktioniert perfekt im browser, aber nicht in der Verlängerung. Wissen Sie, warum? Nur für den Fall, ich bin anbringen der manifestieren.json unten als auch.

Vielen Dank im Voraus!

manifestieren.json:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

InformationsquelleAutor der Frage teeZee | 2012-11-27

  1. 96

    Chrome-Erweiterungen nicht zulassen, Sie haben inline-JavaScript (Dokumentation). Sind Sie gehen zu müssen, etwas ähnliches zu tun.

    Weisen Sie eine ID an den link (<a onClick=hellYeah("xxx")> wird <a id="link">), und verwenden Sie addEventListener () zum binden der Veranstaltung. Setzen Sie die folgenden in Ihrem popup.js Datei:

    document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    //onClick's logic below:
    link.addEventListener('click', function() {
        hellYeah('xxx');
    });
});

    InformationsquelleAutor der Antwort David

  2. 29

    Grund

    Funktioniert dies nicht, da Chrome verbietet jede Art von inline-code in extensions über die Content-Security-Policy.

    Inline-JavaScript wird nicht ausgeführt. Diese Einschränkung verbietet sowohl inline - <script> Blöcke und inline-event-Handler (z.B. <button onclick="...">).

    Zu erkennen, wie

    Wenn dies tatsächlich das problem, Chrom produzieren würde, wird die folgende Fehlermeldung in der Konsole:

    Verweigert das ausführen von inline-script, weil es gegen die folgenden Content-Security-Policy Richtlinie: "script-src 'self' chrome-Erweiterung-resource:". Entweder die 'unsafe-inline' - Schlüsselwort, wird ein hash ('sha256-...'), oder eine nonce ('nonce-...') ist erforderlich, damit die inline-Ausführung.

    Zugriff auf ein popup-JavaScript-Konsole (das ist nützlich für das Debuggen im Allgemeinen) der rechten Maustaste auf den extension-button und wählen Sie "Inspect popup" aus dem Kontextmenü.

    Mehr Informationen zum Debuggen ein popup ist verfügbar hier.

    Wie zu beheben

    Muss man entfernen Sie alle inline-JavaScript. Es ist eine Anleitung in Chrome, Dokumentation.

    Nehme an, das original sieht so aus:

    <a onclick="handler()">Click this</a> <!-- Bad -->

    Braucht man zum entfernen der onclick Attribut und geben Sie dem element eine eindeutige id:

    <a id="click-this">Click this</a> <!-- Fixed -->

    Und befestigen Sie dann den Hörer aus einem Skript (was muss in einem .js Datei, nehme an popup.js):

    //Pure JS:
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("click-this").addEventListener("click", handler);
});

//The handler also must go in a .js file
function handler() {
  /* ... */
}

    Hinweis: die Verpackung in einem DOMContentLoaded Veranstaltung. Dadurch wird sichergestellt, dass das element vorhanden ist, auf den Zeitpunkt der Ausführung. Fügen Sie nun das Skript-tag, zum Beispiel in der <head> des Dokuments:

    <script src="popup.js"></script>

    Alternative, wenn man mit Hilfe von jQuery:

    //jQuery
$(document).ready(function() {
  $("#click-this").click(handler);
});

    Lockerung der Politik

    Q: Der Fehler erwähnt Möglichkeiten, damit inline-code. Ich will nicht /kann es nicht ändern mein code, wie kann ich das aktivieren von inline-Skripts?

    A: Trotz allem, was der Fehler sagt, Sie die nicht enable inline-Skript:

    Gibt es keinen Mechanismus für eine Lockerung der Beschränkung gegen die Ausführung von inline-JavaScript. Insbesondere, die Einstellung der Skript-Richtlinie mit 'unsafe-inline' wird keine Wirkung haben.

    Update: Da Chrom 46, ist es möglich, auf die whitelist bestimmte inline-code-Blöcke:

    Als der Chrome-46, inline-Skripte können in der Whitelist durch die Angabe der base64-kodierte hash-Wert der source-code in der Politik. Dieser hash muss vorangestellt werden, die durch die verwendeten hash-Algorithmus (sha256, sha384 oder sha512). Sehen Hash-Nutzung für <script> - Elemente für ein Beispiel.

    Allerdings glaube ich nicht leicht einen Grund sehen, dies zu nutzen, und es wird nicht aktivieren Sie die inline-Attribute wie onclick="code".

    InformationsquelleAutor der Antwort

  3. 1

    Ich hatte das gleiche problem, und wollte nicht den code neu schreiben, also schrieb ich eine Funktion, den code zu modifizieren und zu erstellen, die inline-declarated Veranstaltungen:

    function compile(qSel){
    var matches = [];
    var match = null;
    var c = 0;

    var html = $(qSel).html();
    var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;

    while (match = pattern.exec(html)) {
        var arr = [];
        for (i in match) {
            if (!isNaN(i)) {
                arr.push(match[i]);
            }
        }
        matches.push(arr);
    }
    var items_with_events = [];
    var compiledHtml = html;

    for ( var i in matches ){
        var item_with_event = {
            custom_id : "my_app_identifier_"+i,
            code : matches[i][5],
            on : matches[i][3],
        };
        items_with_events.push(item_with_event);
        compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
    }

    $(qSel).html(compiledHtml);

    for ( var i in items_with_events ){
        $("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
            eval(items_with_events[i].code);
        });
    }
}

$(document).ready(function(){
    compile('#content');
})

    Dies sollte entfernen Sie alle eingebundenen Veranstaltungen aus den ausgewählten Knoten, und erstellen Sie mit jquery statt.

    InformationsquelleAutor der Antwort sergio0983

Schreibe einen Kommentar