tabs.insertCSS()

Fügt CSS in eine Seite ein.

Hinweis: Bei Verwendung von Manifest V3 oder höher, verwenden Sie scripting.insertCSS() und scripting.removeCSS(), um CSS einzufügen und zu entfernen.

Um diese API zu verwenden, müssen Sie die Erlaubnis für die URL der Seite haben, entweder explizit als Host-Erlaubnis, oder durch die Verwendung der activeTab-Erlaubnis.

Sie können CSS nur in Seiten injizieren, deren URL mithilfe eines Match-Musters ausgedrückt werden kann: Das bedeutet, das Schema muss "http", "https" oder "file" sein. Das bedeutet, dass Sie CSS nicht in eine der eingebauten Browser-Seiten injizieren 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 injizierten CSS-Dateien relativ zu der CSS-Datei selbst auf, anstatt zu der Seite, in die sie injiziert werden.

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 ist dies der aktive Tab des aktuellen Fensters.

details

Ein Objekt, das das einzufügende CSS beschreibt. Es enthält die folgenden Eigenschaften:

allFrames Optional

boolean. Wenn true, wird das CSS in alle Frames der aktuellen Seite injiziert. Bei false wird das CSS nur in den obersten Frame injiziert. Standardmäßig false.

code Optional

string. Zu injizierender Code als Textstring.

cssOrigin Optional

string. Dies kann einen von zwei Werten annehmen: "user", um das CSS als Benutzer-Stylesheet hinzuzufügen, oder "author", um es als Autor-Stylesheet hinzuzufügen. Wird diese Option weggelassen, wird das CSS als Autor-Stylesheet hinzugefügt.

  • "user" ermöglicht es Ihnen, zu verhindern, dass Websites das von Ihnen eingefügte CSS überschreiben: siehe Cascading Order.
  • "author"-Stylesheets verhalten sich so, als ob sie nach allen von der Webseite angegebenen Autorenregeln erscheinen. Dieses Verhalten schließt alle von den Skripten der Seite dynamisch hinzugefügten Autoren-Stylesheets ein, selbst wenn diese Hinzufügung nach Abschluss des insertCSS-Aufrufs erfolgt.
file Optional

string. Pfad zu einer Datei, die den zu injizierenden 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. Um browserübergreifend zu arbeiten, können Sie den Pfad als absolute URL angeben, beginnend am Wurzelverzeichnis der Erweiterung, wie folgt: "/path/to/stylesheet.css".

frameId Optional

integer. Der Frame, in den das CSS injiziert werden soll. Standardmäßig 0 (der oberste Frame).

matchAboutBlank Optional

boolean. Wenn true, wird der Code in eingebettete "about:blank"- und "about:srcdoc"-Frames injiziert, sofern Ihre Erweiterung Zugriff auf deren Elterndokument hat. Der Code kann nicht in oberste about: Frames eingefügt werden. Standardmäßig false.

runAt Optional

extensionTypes.RunAt. Der frühestmögliche Zeitpunkt, zu dem der Code in den Tab injiziert wird. Standardmäßig "document_idle".

Rückgabewert

Ein Promise, das ohne Argumente erfüllt wird, wenn das gesamte CSS eingefügt wurde. Tritt ein Fehler auf, wird das Promise mit einer Fehlermeldung abgelehnt.

Beispiele

Dieses Beispiel fügt in den aktuell aktiven Tab CSS ein, das aus einem String entnommen wird.

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 mit der Erweiterung gepackten Datei geladen wird. Das CSS wird in den Tab mit der ID 2 eingefügt:

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

Hinweis: Diese API basiert auf Chromiums chrome.tabs API. Diese Dokumentation wird aus tabs.json im Chromium-Code abgeleitet.