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
Du musst angemeldet sein, um einen Kommentar abzugeben.
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 SieaddEventListener ()
zum binden der Veranstaltung. Setzen Sie die folgenden in Ihrempopup.js
Datei:InformationsquelleAutor der Antwort David
Grund
Funktioniert dies nicht, da Chrome verbietet jede Art von inline-code in extensions über die Content-Security-Policy.
Zu erkennen, wie
Wenn dies tatsächlich das problem, Chrom produzieren würde, wird die folgende Fehlermeldung in der Konsole:
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:
Braucht man zum entfernen der
onclick
Attribut und geben Sie dem element eine eindeutige id:Und befestigen Sie dann den Hörer aus einem Skript (was muss in einem
.js
Datei, nehme anpopup.js
):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:Alternative, wenn man mit Hilfe von jQuery:
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:
Update: Da Chrom 46, ist es möglich, auf die whitelist bestimmte inline-code-Blöcke:
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
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:
Dies sollte entfernen Sie alle eingebundenen Veranstaltungen aus den ausgewählten Knoten, und erstellen Sie mit jquery statt.
InformationsquelleAutor der Antwort sergio0983