tabs.insertCSS()
Fügt CSS in eine Seite ein.
Hinweis:
Bei der Verwendung von Manifest V3 oder höher sollten Sie scripting.insertCSS()
und scripting.removeCSS()
verwenden, um CSS einzufügen und zu entfernen.
Um diese API zu nutzen, müssen Sie die Berechtigung für die URL der Seite haben, entweder explizit als Host-Berechtigung oder durch die Verwendung der activeTab-Berechtigung.
Sie können nur CSS in Seiten einfügen, deren URL durch ein Match-Muster ausgedrückt werden kann, d. h., ihr Schema muss "http", "https" oder "file" sein. Das bedeutet, dass Sie kein CSS in die integrierten Seiten des Browsers einfügen können, wie etwa about:debugging, about:addons oder die Seite, die geöffnet wird, 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 zur Seite, in die sie eingefügt wird.
Das eingefügte CSS kann wieder entfernt werden, indem tabs.removeCSS()
aufgerufen wird.
Dies ist eine asynchrone Funktion, die ein Promise
zurückgibt (nur in Firefox).
Syntax
let inserting = browser.tabs.insertCSS(
tabId, // optional integer
details // object
)
Parameter
tabId
Optional-
integer
. Die ID des Tabs, in den das CSS eingefügt werden soll. Standardmäßig wird der aktive Tab des aktuellen Fensters verwendet. details
-
Ein Objekt mit der Beschreibung des einzufügenden CSS. Es enthält folgende Eigenschaften:
allFrames
Optional-
boolean
. Wenntrue
, wird das CSS in alle Frames der aktuellen Seite eingefügt. Wennfalse
, wird das CSS nur in den Hauptframe eingefügt. Standardwert istfalse
. code
Optional-
string
. Code, der als Text-String eingefügt werden soll. cssOrigin
Optional-
string
. Dies kann einen der beiden Werte annehmen: "user", um das CSS als Benutzer-Stylesheet hinzuzufügen, oder "author", um es als Autor-Stylesheet hinzuzufügen. Wenn diese Option weggelassen wird, wird das CSS als Autor-Stylesheet hinzugefügt.- "user" ermöglicht es Ihnen, zu verhindern, dass Websites das eingefügte CSS überschreiben: siehe Kaskadierungsreihenfolge.
- "author"-Stylesheets verhalten sich so, als ob sie nach allen anderen Autor-Regeln eingefügt werden, die von der Webseite angegeben wurden. Dies umfasst auch alle dynamisch durch Skripte der Seite hinzugefügten Autor-Stylesheets, selbst wenn diese Hinzufügung nach Abschluss des
insertCSS
-Aufrufs erfolgt.
file
Optional-
string
. Pfad zu einer Datei, die den einzufügenden Code enthält. In Firefox werden relative URLs relativ zur aktuellen Seiten-URL aufgelöst. In Chrome werden diese URLs relativ zur Basis-URL der Erweiterung aufgelöst. Damit es browserübergreifend funktioniert, können Sie den Pfad als absolute URL angeben, beginnend im Wurzelverzeichnis der Erweiterung, z. B.:"/path/to/stylesheet.css"
. frameId
Optional-
integer
. Der Frame, in den das CSS eingefügt werden soll. Standardwert ist0
(der Hauptframe). matchAboutBlank
Optional-
boolean
. Wenntrue
, wird der Code in eingebettete "about:blank"- und "about:srcdoc"-Frames eingefügt, sofern Ihre Erweiterung Zugriff auf deren übergeordnetes Dokument hat. Der Code kann nicht in übergeordnete about:-Frames eingefügt werden. Standardwert istfalse
. runAt
Optional-
extensionTypes.RunAt
. Der früheste Zeitpunkt, zu dem der Code in den Tab eingefügt wird. Standardwert ist "document_idle".
Rückgabewert
Ein Promise
, das ohne Argumente erfüllt wird, wenn das gesamte CSS eingefügt wurde. Wenn ein Fehler auftritt, wird das Promise mit einer Fehlermeldung zurückgewiesen.
Beispiele
Dieses Beispiel fügt CSS, das aus einem String stammt, in den aktuell aktiven Tab ein.
let css = "body { border: 20px dotted pink; }";
browser.browserAction.onClicked.addListener(() => {
function onError(error) {
console.log(`Error: ${error}`);
}
let insertingCSS = browser.tabs.insertCSS({ code: css });
insertingCSS.then(null, onError);
});
Dieses Beispiel fügt CSS ein, das aus einer Datei geladen wird, die mit der Erweiterung geliefert wird. Das CSS wird in den Tab eingefügt, dessen ID 2 ist:
browser.browserAction.onClicked.addListener(() => {
function onError(error) {
console.log(`Error: ${error}`);
}
let insertingCSS = browser.tabs.insertCSS(2, { file: "content-style.css" });
insertingCSS.then(null, onError);
});
Beispielerweiterungen
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | ||||||
---|---|---|---|---|---|---|---|
insertCSS | |||||||
cssOrigin | |||||||
frameId | |||||||
matchAboutBlank | |||||||
runAt |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
Hinweis:
Diese API basiert auf der chrome.tabs
-API von Chromium. Diese Dokumentation wurde aus tabs.json
im Chromium-Code abgeleitet.