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

js
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. Wenn true, wird das CSS in alle Frames der aktuellen Seite eingefügt. Wenn false, wird das CSS nur in den Hauptframe eingefügt. Standardwert ist false.

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 ist 0 (der Hauptframe).

matchAboutBlank Optional

boolean. Wenn true, 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 ist false.

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.

js
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:

js
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 GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Firefox for Android
Safari on iOS
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.