scripting.insertCSS()
Fügt CSS in eine Seite ein.
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 und die Berechtigung für die URL des Ziels besitzen, entweder explizit als Host-Berechtigung oder mithilfe der activeTab-Berechtigung.
Sie können CSS nur in Seiten einfügen, deren URL mit einem Match Pattern ausgedrückt werden kann. Das bedeutet, dass das Schema "http", "https" oder "file" sein muss. Sie können CSS nicht in eine der eingebauten Browserseiten einfügen, wie z. B. about:debugging, about:addons oder die Seite, die sich öffnet, wenn Sie eine neue leere Registerkarte öffnen.
Hinweis: Firefox löst URLs in eingefügten CSS-Dateien relativ zur CSS-Datei auf, anstatt relativ zur Seite, in die sie eingefügt 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 die folgenden Eigenschaften:
css
Optional-
string
. Ein String, der das einzufügende CSS enthält. Entwedercss
oderfiles
muss angegeben werden. files
Optional-
array
vonstring
. Der Pfad der einzufügenden CSS-Dateien relativ zum Stammverzeichnis der Erweiterung. Entwederfiles
odercss
muss angegeben werden. origin
Optional-
string
. Der Stil-Ursprung für die Einfügung, entwederUSER
, um das CSS als Benutzer-Stylesheet hinzuzufügen, oderAUTHOR
, um es als Autoren-Stylesheet hinzuzufügen. Standardwert istAUTHOR
.USER
ermöglicht es Ihnen, zu verhindern, dass Websites das eingefügte CSS überschreiben: siehe Kaskadier-Reihenfolge.AUTHOR
-Stylesheets verhalten sich so, als ob sie nach allen von der Webseite angegebenen Autorenregeln erscheinen. Dieses Verhalten umfasst auch alle dynamisch von den Skripten der Seite hinzugefügten Autoren-Stylesheets, selbst wenn diese Hinzufügung nach dem Abschluss desinsertCSS
-Aufrufs erfolgt.
target
-
scripting.InjectionTarget
. Details, die das Ziel angeben, in das das CSS eingefügt 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 die aktive Registerkarte 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 aus einer Datei ein (die mit der Erweiterung verpackt ist) mit dem Namen "content-style.css"
:
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 Chromiums chrome.scripting
-API.