scripting.insertCSS()
Fügt einer Seite CSS hinzu.
Hinweis: Diese Methode ist ab 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 über die "scripting"
Berechtigung und die Berechtigung für die URL des Ziels verfügen, entweder explizit als Host-Berechtigung oder durch die Verwendung der activeTab-Berechtigung.
Sie können CSS nur in Seiten einfügen, deren URL mit einem Match-Muster ausgedrückt werden kann: das bedeutet, dass ihr Schema "http", "https" oder "file" sein muss. Das bedeutet, dass Sie kein CSS in eine der eingebauten Seiten des Browsers einfügen können, wie zum Beispiel about:debugging, about:addons oder die Seite, die sich öffnet, wenn Sie einen neuen leeren Tab öffnen.
Hinweis: Firefox löst URLs in eingefügten CSS-Dateien relativ zur CSS-Datei selbst auf und nicht relativ zu der Seite, in die sie eingefügt wird.
Das eingefügte CSS kann durch den Aufruf von scripting.removeCSS()
entfernt werden.
Diese Funktion ist asynchron und gibt ein Promise
zurück.
Syntax
await browser.scripting.insertCSS(
details // object
)
Parameter
details
-
Ein Objekt, das das einzufügende CSS beschreibt und wo es eingefügt werden soll. Es enthält die folgenden Eigenschaften:
css
Optional-
string
. Ein String, der das einzufügende CSS enthält. Entwedercss
oderfiles
muss angegeben sein. files
Optional-
array
vonstring
. Der Pfad der einzufügenden CSS-Dateien relativ zum Root-Verzeichnis der Erweiterung. Entwederfiles
odercss
muss angegeben sein. 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. Standard istAUTHOR
.USER
ermöglicht es Ihnen, zu verhindern, dass Websites das von Ihnen eingefügte CSS überschreiben: siehe Kaskadierung.AUTHOR
-Stylesheets verhalten sich so, als würden sie nach allen vom Webpage-Autor spezifizierten Regeln erscheinen. Dieses Verhalten umfasst auch alle Autoren-Stylesheets, die dynamisch durch die Skripte der Seite hinzugefügt werden, selbst wenn diese Hinzufügung nach 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 Argument erfüllt wird, wenn das gesamte CSS eingefügt ist. Bei Fehlern 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 aus einer Datei ein (die mit der Erweiterung verpackt ist), die "content-style.css"
genannt 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}`);
}
});
Browser-Kompatibilität
BCD tables only load in the browser
Hinweis: Diese API basiert auf Chromiums chrome.scripting
API.