scripting.insertCSS()
Injiziert CSS in eine Seite.
Hinweis: Diese Methode ist in Manifest V3 oder höher in Chrome und Firefox 101 verfügbar. In Safari und Firefox 102+ ist diese Methode auch in Manifest V2 verfügbar.
Um diese API zu verwenden, müssen Sie die "scripting"
Berechtigung sowie die Berechtigung für die URL des Ziels haben, entweder explizit als Host-Berechtigung oder mit der activeTab-Berechtigung.
Sie können CSS nur in Seiten injizieren, deren URL mit einem Übereinstimmungsmuster ausgedrückt werden kann: Das bedeutet, dass das Schema "http", "https" oder "file" sein muss. Das bedeutet, dass Sie kein CSS in die integrierten Seiten des Browsers injizieren können, wie zum Beispiel about:debugging, about:addons oder die Seite, die öffnet, wenn Sie einen neuen leeren Tab öffnen.
Hinweis: Firefox löst URLs in injizierten CSS-Dateien relativ zur CSS-Datei auf, anstatt zur Seite, in die sie injiziert wird.
Das eingefügte CSS kann entfernt werden, indem scripting.removeCSS()
aufgerufen wird.
Dies ist eine asynchrone Funktion, die ein Promise
zurückgibt.
Syntax
await browser.scripting.insertCSS(
details // object
)
Parameter
details
-
Ein Objekt, das das einzufügende CSS und dessen Einfügeort beschreibt. Es enthält folgende Eigenschaften:
css
Optional-
string
. Ein String, der das zu injizierende CSS enthält. Entwedercss
oderfiles
muss angegeben werden. files
Optional-
array
vonstring
. Der Pfad zu den CSS-Dateien, die relativ zum Stammverzeichnis der Erweiterung injiziert werden sollen. Entwederfiles
odercss
muss angegeben werden. origin
Optional-
string
. Der Stilherkunft für die Injektion, entwederUSER
, um das CSS als Benutzer-Stil hinzuzufügen, oderAUTHOR
, um es als Autoren-Stil hinzuzufügen. Der Standardwert istAUTHOR
.USER
ermöglicht Ihnen, zu verhindern, dass Websites das von Ihnen eingefügte CSS überschreiben: siehe Kaskadierung Reihenfolge.AUTHOR
Stylesheets verhalten sich, als würden sie nach allen von der Webseite spezifizierten Autorrichtlinien erscheinen. Dieses Verhalten umfasst alle vom Skript der Seite dynamisch hinzugefügten Autorrichtlinien, selbst wenn diese Hinzufügung nach dem Abschluss desinsertCSS
-Aufrufs erfolgt.
target
-
scripting.InjectionTarget
. Details, die das Ziel spezifizieren, in das das CSS injiziert werden soll.
Rückgabewert
Ein Promise
, das ohne Argumente erfüllt wird, wenn das gesamte CSS eingefügt ist. Wenn ein Fehler auftritt, wird das Promise abgelehnt.
Beispiele
Dieses Beispiel fügt CSS, das aus einem String stammt, in den aktiven Tab ein.
browser.action.onClicked.addListener(async (tab) => {
try {
await browser.scripting.insertCSS({
target: {
tabId: tab.id,
},
css: `body { border: 20px dotted pink; }`,
});
} catch (err) {
console.error(`failed to insert CSS: ${err}`);
}
});
Dieses Beispiel fügt CSS, das aus einer Datei geladen wird (mit der Erweiterung gebündelt), namens "content-style.css"
ein:
browser.action.onClicked.addListener(async (tab) => {
try {
await browser.scripting.insertCSS({
target: {
tabId: tab.id,
},
files: ["content-style.css"],
});
} catch (err) {
console.error(`failed to insert CSS: ${err}`);
}
});
Browser-Kompatibilität
Hinweis:
Diese API basiert auf der chrome.scripting
API von Chromium.