tabs.insertCSS()

Fügt CSS in eine Seite ein.

Hinweis: Verwenden Sie bei der Nutzung von Manifest V3 oder höher 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 activeTab-Berechtigung.

Sie können nur CSS in Seiten einfügen, deren URL mittels eines Übereinstimmungsmusters ausgedrückt werden kann: Das bedeutet, dass das Schema "http", "https" oder "file" sein muss. Das heißt, dass Sie kein CSS in irgendeine der eingebauten Browser-Seiten einfügen können, wie etwa about:debugging, about:addons oder die Seite, die sich öffnet, wenn Sie eine neue leere Registerkarte öffnen.

Hinweis: Firefox löst URLs in eingebetteten CSS-Dateien relativ zur CSS-Datei selbst auf, anstatt zu der 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 der Registerkarte, in die das CSS eingefügt werden soll. Standardmäßig wird die aktive Registerkarte 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 eingefügt. Wenn false, wird das CSS nur in den obersten Frame eingefügt. Standardmäßig 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 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" erlaubt es Ihnen, zu verhindern, dass Webseiten das von Ihnen eingefügte CSS überschreiben: siehe Kaskadierungsreihenfolge.
  • "author"-Stylesheets verhalten sich, als ob sie nach allen vom Web Seite spezifizierten Autor-Regeln erscheinen. Dieses Verhalten schließt alle von der Seite dynamisch durch Skripte hinzugefügten Autor-Stylesheets ein, auch 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. Um länderü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 eingefügt werden soll. Standardmäßig 0 (der oberste Frame).

matchAboutBlank Optional

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

runAt Optional

extensionTypes.RunAt. Der früheste Zeitpunkt, zu dem der Code in die Registerkarte eingefügt wird. Standardmäßig "document_idle".

Rückgabewert

Ein Promise, das ohne Argumente erfüllt wird, wenn alle CSS eingefügt wurden. Wenn ein Fehler auftritt, wird das Promise mit einer Fehlermeldung abgelehnt.

Beispiele

Dieses Beispiel fügt in die aktuell aktive Registerkarte CSS ein, das aus einem String stammt.

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 gepackt ist. Das CSS wird in die Registerkarte eingefügt, deren 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

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