cloneInto()
Diese Funktion bietet eine sichere Möglichkeit, ein Objekt, das in einem privilegierten Bereich definiert ist, zu nehmen und einen strukturierten Klon davon in einem weniger privilegierten Bereich zu erstellen. Sie gibt eine Referenz auf den Klon zurück:
const clonedObject = cloneInto(myObject, targetWindow);
Sie können den Klon dann einem Objekt im Zielbereich als Expando-Eigenschaft zuweisen, und Skripte, die in diesem Bereich ausgeführt werden, können darauf zugreifen:
targetWindow.foo = clonedObject;
Dies ermöglicht es privilegiertem Code, wie beispielsweise einer Erweiterung, ein Objekt mit weniger privilegiertem Code, wie einem Skript einer Webseite, zu teilen.
Hinweis:
Sie können auch structuredClone verwenden, um strukturierte Klone zu erzeugen. Ab Firefox 149 klont targetWindow.structuredClone(value) den Wert in das realm des Ziel-Fensters.
Syntax
let clonedObject = cloneInto(
obj, // object
targetScope, // object
options // optional object
);
Parameter
obj-
object. Das zu klonende Objekt. targetScope-
object. Das Objekt, an das das Objekt angehängt werden soll. optionsOptional-
object. Optionen für die Funktion.cloneFunctionsOptional-
boolean. Ob die Funktionen des Objekts geklont werden sollen. Standardmäßigfalse. Geklonte Funktionen haben die gleichen Semantiken wie Funktionen, die mitexportFunctionexportiert wurden. Siehe Klonen von Objekten, die Funktionen enthalten. Optional wrapReflectorsOptional-
boolean. Ob DOM-Objekte per Referenz statt geklont übergeben werden sollen. DOM-Objekte sind normalerweise nicht klonbar. Standardmäßigfalse. Siehe Klonen von Objekten, die DOM-Elemente enthalten.
Rückgabewert
Eine Referenz auf das geklonte Objekt.
Beispiele
Dieses Inhalts-Skript erstellt ein Objekt, klont es in das Inhaltsfenster und macht es zu einer Eigenschaft des globalen Inhaltsfensters:
// content script
const addonScriptObject = { greeting: "hello from your extension" };
window.addonScriptObject = cloneInto(addonScriptObject, window);
Skripte, die auf der Seite laufen, können auf das Objekt zugreifen:
// page script
button.addEventListener("click", () => {
console.log(window.addonScriptObject.greeting); // "hello from your extension"
});
Natürlich müssen Sie den Klon nicht dem Fenster selbst zuweisen; Sie können ihn einem anderen Objekt im Zielbereich zuweisen:
// Content script
window.foo.addonScriptObject = cloneInto(addonScriptObject, window);
Sie können es auch in eine Funktion übergeben, die im Seitenskript definiert ist. Angenommen, das Seitenskript definiert eine Funktion wie diese:
// page script
function foo(greeting) {
console.log(`they said: ${greeting.message}`);
}
Das Inhalts-Skript kann ein Objekt definieren, es klonen und in diese Funktion übergeben:
// content script
const addonScriptObject = { message: "hello from your extension" };
window.foo(cloneInto(addonScriptObject, window)); // "they said: hello from your extension"
Klonen von Objekten, die Funktionen enthalten
Wenn das zu klonende Objekt Funktionen enthält, müssen Sie das { cloneFunctions: true }-Flag übergeben, sonst erhalten Sie einen Fehler. Wenn Sie dieses Flag übergeben, werden die Funktionen im Objekt mit dem gleichen Mechanismus geklont, der in exportFunction verwendet wird:
// content script
const addonScriptObject = {
greetMe() {
alert("hello from your extension");
},
};
window.addonScriptObject = cloneInto(addonScriptObject, window, {
cloneFunctions: true,
});
// page script
const test = document.getElementById("test");
test.addEventListener("click", () => {
window.addonScriptObject.greetMe();
});
Klonen von Objekten, die DOM-Elemente enthalten
Standardmäßig schlägt die Klonoperation fehl, wenn das zu klonende Objekt Objekte enthält, die aus C++ reflektiert werden, wie DOM-Elemente. Wenn Sie das { wrapReflectors: true }-Flag übergeben, enthält das geklonte Objekt diese Objekte:
// content script
const addonScriptObject = {
body: window.document.body,
};
window.addonScriptObject = cloneInto(addonScriptObject, window, {
wrapReflectors: true,
});
// page script
const test = document.getElementById("test");
test.addEventListener("click", () => {
console.log(window.addonScriptObject.body.innerHTML);
});
Der Zugriff auf diese Objekte im Zielbereich unterliegt den normalen Skript-Sicherheitsüberprüfungen.