scripting.insertCSS()
Fügt CSS in eine Seite ein.
Hinweis: Diese Methode ist in Manifest V3 oder höher in Chrome und ab Firefox 101 verfügbar. In Safari und ab Firefox 102 ist diese Methode auch in Manifest V2 verfügbar.
Um diese API zu verwenden, benötigen Sie die scripting-Berechtigung und eine Berechtigung für die URL des Ziels, entweder ausdrücklich als Host-Berechtigung oder über die activeTab-Berechtigung.
Sie können CSS nur in Seiten einfügen, deren URL sich durch ein Match-Pattern ausdrücken lässt. Das bedeutet, dass das Schema „http“, „https“ oder „file“ sein muss. Daher können Sie CSS nicht in integrierte Browserseiten wie about:debugging, about:addons oder die Seite einfügen, die beim Öffnen eines neuen leeren Tabs angezeigt wird.
Hinweis: Firefox löst URLs in eingefügten CSS-Dateien relativ zur CSS-Datei auf, nicht relativ zur Seite, in die sie eingefügt werden.
Das eingefügte CSS kann durch Aufrufen von scripting.removeCSS() entfernt werden.
Dies ist eine asynchrone Funktion, die ein Promise zurückgibt.
Syntax
await browser.scripting.insertCSS(
details // object
)
Parameter
details-
Ein Objekt, das beschreibt, welches CSS wo eingefügt werden soll. Es enthält die folgenden Eigenschaften:
cssOptional-
string. Eine Zeichenfolge mit dem einzufügenden CSS. Entwedercssoderfilesmuss angegeben werden. filesOptional-
arrayvonstring. Die Pfade der einzufügenden CSS-Dateien relativ zum Stammverzeichnis der Erweiterung. Entwederfilesodercssmuss angegeben werden. originOptional-
string. Der Style-Origin für das Einfügen: entwederUSER, um das CSS als Benutzer-Stylesheet hinzuzufügen, oderAUTHOR, um es als Autoren-Stylesheet hinzuzufügen. Der Standardwert istAUTHOR. Ab Firefox 144 wird bei dieser Eigenschaft nicht zwischen Groß- und Kleinschreibung unterschieden.USERermöglicht es Ihnen, zu verhindern, dass Websites das von Ihnen eingefügte CSS überschreiben: siehe Kaskadierungsreihenfolge.AUTHOR-Stylesheets verhalten sich so, als stünden sie nach allen von der Webseite festgelegten Autorenregeln. Dies schließt auch Autoren-Stylesheets ein, die durch Skripte der Seite dynamisch hinzugefügt werden, selbst wenn dies erst nach Abschluss desinsertCSS-Aufrufs geschieht.
target-
scripting.InjectionTarget. Angaben zum Ziel, in das das CSS eingefügt werden soll.
Rückgabewert
Ein Promise, das ohne Argumente erfüllt wird, sobald das gesamte CSS eingefügt wurde. Wenn ein Fehler auftritt, wird das Promise abgelehnt.
Beispiele
Dieses Beispiel fügt CSS aus einer Zeichenfolge 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 aus einer Datei namens "content-style.css" ein, die mit der Erweiterung ausgeliefert wird:
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}`);
}
});
Beispielerweiterungen
Browser-Kompatibilität
Hinweis:
Diese API basiert auf der chrome.scripting-API von Chromium.