tabs.insertCSS()

Injiziert CSS in eine Seite.

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

Um diese API zu verwenden, 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 CSS nur in Seiten injizieren, deren URL mit einem Übereinstimmungsmuster ausgedrückt werden kann: Das heißt, ihr Schema muss eines von "http", "https" oder "file" sein. Dies bedeutet, dass Sie kein CSS in die integrierten Seiten des Browsers 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 zur CSS-Datei selbst auf, anstatt zur Seite, in die sie injiziert wird.

Das eingefügte CSS kann durch Aufrufen von tabs.removeCSS() wieder entfernt werden.

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, 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. Wenn es false ist, wird das CSS nur in den oberen Frame injiziert. Standardmäßig ist es false.

code Optional

string. Der einzufügende Code als Textzeichenfolge.

cssOrigin Optional

string. Dies kann einen von zwei Werten annehmen: "user", um das CSS als Nutzer-Stylesheet hinzuzufügen, oder "author", um es als Autoren-Stylesheet hinzuzufügen. Wenn diese Option ausgelassen wird, wird das CSS als Autoren-Stylesheet hinzugefügt.

  • "user" ermöglicht es Ihnen zu verhindern, dass Websites das von Ihnen eingefügte CSS überschreiben: siehe Kaskadierende Reihenfolge.
  • "author"-Stylesheets verhalten sich so, als würden sie nach allen von der Webseite angegebenen Autorenregeln erscheinen. Dieses Verhalten schließt alle dynamisch von den Skripten der Seite hinzugefügten Autoren-Stylesheets ein, selbst wenn diese Hinzufügung nach dem 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. Um plattformübergreifend zu arbeiten, können Sie den Pfad als absolute URL angeben, beginnend am Stamm 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, wenn Ihre Erweiterung Zugriff auf ihr übergeordnetes Dokument hat. Der Code kann nicht in Top-Level about: Frames eingefügt werden. Standardmäßig false.

runAt Optional

extensionTypes.RunAt. Der früheste 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. Wenn ein Fehler auftritt, wird das Promise mit einer Fehlermeldung abgelehnt.

Beispiele

Dieses Beispiel fügt CSS in den aktuell aktiven Tab ein, das aus einer Zeichenkette übernommen 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 verpackten Datei geladen 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

BCD tables only load in the browser

Hinweis: Diese API basiert auf der chrome.tabs API von Chromium. Diese Dokumentation stammt von tabs.json im Chromium-Code.