onClick in Chrome Erweiterung 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 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:Ich bin mir nicht sicher, ob ich formatieren können, Zeug in die Kommentare, tut mir Leid. Nicht bekommen kann es arbeiten mit: <!doctype html> <html> <head> <title> Getting Started-Erweiterung Popup </title> <script src="popup.js"></script> <script type="text/javascript"> Fenster.onload = function() { var link = document.getElementById("link"); link.addEventListener("onclick",hellYeah("xxx"),false); } </script> </head> <body> <div id="text-holder"> ha </div> <br /> <div id="link"> hyhy </div> </body> </html>
Ich habe so etwas wie dieses: "Refused to execute inline-Skript, da Sie gegen die folgende Content-Security-Policy Richtlinie: "script-src 'self' chrome-Erweiterung-resource:"."
Javascript kann nicht in Ihre HTML-Datei-Erweiterungen. Lädst du alle javascript aus einer externen Quelle. So etwas wie
<script src="javascript.js"></script>
Beachten Sie, dass, obwohl Sie nicht inline
onclick="handleClick()"
Sie können immer nochel.onclick = handleClick
.InformationsquelleAutor 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"
.Irgendwelche Gedanken auf, wie könnte man anonymisieren diese Lösung, so dass es funktionieren könnte, für eine Winkel-app mit den generierten div-Namen? Ich kann nicht erstellt werden-Ereignis-Listener, da die Namen der Schaltflächen, die alle einzigartig sind für jeden Artikel in meinem ng-repeat... 🙁
InformationsquelleAutor
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 sergio0983
Ich veröffentlichen, mein Beispiel, dass ich in meinem Fall. Ich habe versucht ersetzen Sie Inhalt im div mit einem script. Mein problem war, dass Chrome nicht erkannt /nicht ausgeführt, das Skript.
Genauer, Was ich machen wollte: auf einen link Zu klicken, und den link zu "Lesen" eine externe html-Datei, die geladen werden soll in ein div-Abschnitt.
genannt wurde, das Skript hat nicht funktioniert.
Muss das Skript codiert werden, die Verwendung document.addEventListener('DOMContentLoaded', function() wie es gesagt wurde
InformationsquelleAutor Elias EstatisticsEU