Inhaltsskripte werden in einer Umgebung mit "isolierter Welt" ausgeführt . Sie müssen Ihre state()Methode in die Seite selbst einfügen.
Wenn Sie eine der chrome.*APIs im Skript verwenden möchten , müssen Sie einen speziellen Ereignishandler implementieren, wie in dieser Antwort beschrieben: Chrome-Erweiterung - Abrufen der ursprünglichen Nachricht von Google Mail .
Wenn Sie keine chrome.*APIs verwenden müssen, empfehle ich dringend, den gesamten JS-Code durch Hinzufügen eines <script>Tags in die Seite einzufügen:
Inhaltsverzeichnis
- Methode 1: Injizieren Sie eine andere Datei
- Methode 2: Injizieren Sie eingebetteten Code
- Methode 2b: Verwenden einer Funktion
- Methode 3: Verwenden eines Inline-Ereignisses
- Dynamische Werte im injizierten Code
Methode 1: Injizieren Sie eine andere Datei
Dies ist die einfachste / beste Methode, wenn Sie viel Code haben. Fügen Sie beispielsweise Ihren tatsächlichen JS-Code in eine Datei in Ihrer Erweiterung ein script.js. Lassen Sie dann Ihr Inhaltsskript wie folgt aussehen (hier erklärt: Google Chome "Application Shortcut" Custom Javascript ):
var s = document.createElement('script');
// TODO: add "script.js" to web_accessible_resources in manifest.json
s.src = chrome.runtime.getURL('script.js');
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
Hinweis: Wenn Sie diese Methode verwenden, muss die injizierte script.jsDatei zum "web_accessible_resources"Abschnitt hinzugefügt werden ( Beispiel ). Wenn Sie dies nicht tun, wird Chrome verweigert Ihr Skript und zeigt den folgenden Fehler in der Konsole zu laden:
Verweigern des Ladens der Chrome-Erweiterung: // [EXTENSIONID] /script.js. Ressourcen müssen im Manifestschlüssel web_accessible_resources aufgeführt sein, damit sie von Seiten außerhalb der Erweiterung geladen werden können.
Methode 2: Injizieren Sie eingebetteten Code
Diese Methode ist nützlich, wenn Sie schnell einen kleinen Code ausführen möchten. (Siehe auch: So deaktivieren Sie Facebook-Hotkeys mit der Chrome-Erweiterung? )
var actualCode = `// Code here.
// If you want to use a variable, use $ and curly braces.
// For example, to use a fixed random number:
var someFixedRandomValue = ${ Math.random() };
// NOTE: Do not insert unsafe variables in this way, see below
// at "Dynamic values in the injected code"
`;
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();
Hinweis: Vorlagenliterale werden nur in Chrome 41 und höher unterstützt. Wenn die Erweiterung in Chrome 40- funktionieren soll, verwenden Sie:
var actualCode = ['/* Code here. Example: */' + 'alert(0);',
'// Beware! This array have to be joined',
'// using a newline. Otherwise, missing semicolons',
'// or single-line comments (//) will mess up your',
'// code ----->'].join('\n');
Methode 2b: Verwenden einer Funktion
Für einen großen Teil des Codes ist das Zitieren der Zeichenfolge nicht möglich. Anstatt ein Array zu verwenden, kann eine Funktion verwendet und stringifiziert werden:
var actualCode = '(' + function() {
// All code is executed in a local scope.
// For example, the following does NOT overwrite the global `alert` method
var alert = null;
// To overwrite a global variable, prefix `window`:
window.alert = null;
} + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.head||document.documentElement).appendChild(script);
script.remove();
Diese Methode funktioniert, da der +Operator für Zeichenfolgen und eine Funktion alle Objekte in eine Zeichenfolge konvertiert. Wenn Sie den Code mehrmals verwenden möchten, sollten Sie eine Funktion erstellen, um eine Wiederholung des Codes zu vermeiden. Eine Implementierung könnte folgendermaßen aussehen:
function injectScript(func) {
var actualCode = '(' + func + ')();'
...
}
injectScript(function() {
alert("Injected script");
});
Hinweis: Da die Funktion serialisiert ist, gehen der ursprüngliche Bereich und alle gebundenen Eigenschaften verloren!
var scriptToInject = function() {
console.log(typeof scriptToInject);
};
injectScript(scriptToInject);
// Console output: "undefined"
Methode 3: Verwenden eines Inline-Ereignisses
Manchmal möchten Sie sofort Code ausführen, z. B. um Code auszuführen, bevor das <head>Element erstellt wird. Dies kann durch Einfügen eines <script>Tags mit erfolgen textContent(siehe Methode 2 / 2b).
Eine Alternative, die jedoch nicht empfohlen wird, ist die Verwendung von Inline-Ereignissen. Es wird nicht empfohlen, da Inline-Ereignis-Listener blockiert werden, wenn die Seite eine Inhaltssicherheitsrichtlinie definiert, die Inline-Skripts verbietet. Von der Erweiterung eingefügte Inline-Skripte werden dagegen weiterhin ausgeführt. Wenn Sie weiterhin Inline-Ereignisse verwenden möchten, gehen Sie wie folgt vor:
var actualCode = '// Some code example \n' +
'console.log(document.documentElement.outerHTML);';
document.documentElement.setAttribute('onreset', actualCode);
document.documentElement.dispatchEvent(new CustomEvent('reset'));
document.documentElement.removeAttribute('onreset');
Hinweis: Bei dieser Methode wird davon ausgegangen, dass keine anderen globalen Ereignis-Listener für das resetEreignis vorhanden sind. Wenn ja, können Sie auch eines der anderen globalen Ereignisse auswählen. Öffnen Sie einfach die JavaScript-Konsole (F12), geben Sie document.documentElement.ondie verfügbaren Ereignisse ein und wählen Sie sie aus.
Dynamische Werte im injizierten Code
Gelegentlich müssen Sie eine beliebige Variable an die injizierte Funktion übergeben. Zum Beispiel:
var GREETING = "Hi, I'm ";
var NAME = "Rob";
var scriptToInject = function() {
alert(GREETING + NAME);
};
Um diesen Code einzufügen, müssen Sie die Variablen als Argumente an die anonyme Funktion übergeben. Stellen Sie sicher, dass Sie es richtig implementieren! Folgendes wird nicht funktionieren:
var scriptToInject = function (GREETING, NAME) { ... };
var actualCode = '(' + scriptToInject + ')(' + GREETING + ',' + NAME + ')';
// The previous will work for numbers and booleans, but not strings.
// To see why, have a look at the resulting string:
var actualCode = "(function(GREETING, NAME) {...})(Hi, I'm ,Rob)";
// ^^^^^^^^ ^^^ No string literals!
Die Lösung besteht darin, JSON.stringifyvor dem Übergeben des Arguments zu verwenden. Beispiel:
var actualCode = '(' + function(greeting, name) { ...
} + ')(' + JSON.stringify(GREETING) + ',' + JSON.stringify(NAME) + ')';
Wenn Sie viele Variablen haben, lohnt es sich, diese JSON.stringifyeinmal zu verwenden , um die Lesbarkeit zu verbessern:
...
} + ')(' + JSON.stringify([arg1, arg2, arg3, arg4]) + ')';
player.addEventListener("onStateChange", state);