tabs.insertCSS()

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 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 eingefügt. Wenn false, wird das CSS nur in den obersten Frame eingefügt. Der Standardwert ist false.

code Optional

string. Der einzufügende Code als Textzeichenfolge.

cssOrigin Optional

string. Diese Eigenschaft 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 eingefügte CSS überschreiben: siehe Kaskadierungsreihenfolge.
• „author“-Stylesheets verhalten sich so, als stünden sie nach allen von der Webseite festgelegten Autor-Regeln. Dies gilt auch für Autor-Stylesheets, die durch Skripte der Seite dynamisch hinzugefügt werden – selbst wenn dies erst nach Abschluss des insertCSS-Aufrufs geschieht.

file Optional

string. Pfad zu einer Datei mit dem einzufügenden Code. In Firefox werden relative URLs relativ zur URL der aktuellen Seite aufgelöst. In Chrome werden diese URLs relativ zur Basis-URL der Erweiterung aufgelöst. Damit dies browserübergreifend funktioniert, können Sie den Pfad als absolute URL angeben, die beim Stammverzeichnis der Erweiterung beginnt, zum Beispiel: "/path/to/stylesheet.css".

frameId Optional

integer. Der Frame, in den das CSS eingefügt werden soll. Der Standardwert ist 0 (der oberste Frame).

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. In about:-Frames auf oberster Ebene kann der Code nicht eingefügt werden. Der Standardwert ist false.

runAt Optional

extensionTypes.RunAt. Der früheste Zeitpunkt, zu dem der Code in den Tab eingefügt wird. Der Standardwert ist „document_idle“.

Rückgabewert

Eine Promise, die ohne Argumente erfüllt wird, sobald das gesamte CSS eingefügt wurde. Tritt ein Fehler auf, wird die Promise mit einer Fehlermeldung zurückgewiesen.

Beispiele

Dieses Beispiel fügt CSS aus einer Zeichenfolge 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 aus einer Datei ein, die mit der Erweiterung ausgeliefert wird. Das CSS wird in den Tab mit der ID 2 eingefügt:

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

• apply-css
• session-state

Browser-Kompatibilität