cloneInto()
Diese Funktion bietet eine sichere Möglichkeit, ein Objekt aus einem privilegierten Bereich zu nehmen und einen strukturierten Klon davon in einem weniger privilegierten Bereich zu erstellen. Es gibt eine Referenz auf den Klon zurück:
const clonedObject = cloneInto(myObject, targetWindow);
Sie können dann den Klon einem Objekt im Zielbereich als Expando-Eigenschaft zuweisen, und Skripte, die in diesem Bereich laufen, können darauf zugreifen:
targetWindow.foo = clonedObject;
Dies ermöglicht es privilegiertem Code, wie z.B. einer Erweiterung, ein Objekt mit weniger privilegiertem Code, wie z.B. einem Skript auf einer Webseite, zu teilen.
Hinweis:
Sie können auch structuredClone verwenden, um strukturierte Klone zu erstellen. 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 zu klonende Objekt angehängt wird. 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 unter Verwendung vonexportFunctionexportiert wurden. Siehe Klonen von Objekten, die Funktionen enthalten. Optional wrapReflectorsOptional-
boolean. Ob DOM-Objekte durch Referenz statt durch Klonen weitergegeben 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 Content-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 auch einem anderen Objekt im Zielbereich zuweisen:
// Content script
window.foo.addonScriptObject = cloneInto(addonScriptObject, window);
Sie können ihn auch in eine im Seitenskript definierte Funktion übergeben. Angenommen, das Seitenskript definiert eine Funktion wie diese:
// page script
function foo(greeting) {
console.log(`they said: ${greeting.message}`);
}
Das Content-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 Flag { cloneFunctions: true } übergeben, andernfalls 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 Objekt, das Sie klonen, Objekte enthält, die von C++ reflektiert werden, wie z.B. DOM-Elemente. Wenn Sie das Flag { wrapReflectors: true } übergeben, enthält das Objekt, das Sie klonen, 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.