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 der aktive Tab im aktuellen Fenster.

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

code Optional

string. Der zu injizierende Code als Text-String.

cssOrigin Optional

string. Kann einen der beiden Werte annehmen: "user", um das CSS als Benutzer-Stylesheet hinzuzufügen oder "author", um es als Autoren-Stylesheet hinzuzufügen. Wenn diese Option weggelassen 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 Kaskadierungsreihenfolge.
• "author"-Stylesheets verhalten sich, als ob sie nach allen vom Web veröffentlichten Autoren-Regeln erscheinen. Dieses Verhalten schließt alle Autoren-Stylesheets ein, die dynamisch durch die Skripte der Seite hinzugefügt wurden, selbst wenn diese Addition 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 funktionieren, können Sie den Pfad als absolute URL angeben, beginnend beim 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 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 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 CSS in den aktuell aktiven Tab ein, das aus einem String genommen wird.

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 eingefügt, dessen ID 2 ist:

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
• beastify
• session-state

Browser-Kompatibilität