scripting.insertCSS()

Fügt einer Seite CSS hinzu.

Hinweis: Diese Methode ist ab Manifest V3 oder höher in Chrome und Firefox 101 verfügbar. In Safari und Firefox 102+ ist diese Methode auch in Manifest V2 verfügbar.

Um diese API zu verwenden, müssen Sie über die "scripting" Berechtigung und die Berechtigung für die URL des Ziels verfügen, entweder explizit als Host-Berechtigung oder durch die Verwendung der activeTab-Berechtigung.

Sie können CSS nur in Seiten einfügen, deren URL mit einem Match-Muster ausgedrückt werden kann: das bedeutet, dass ihr Schema "http", "https" oder "file" sein muss. Das bedeutet, dass Sie kein CSS in eine der eingebauten Seiten des Browsers einfügen können, wie zum Beispiel about:debugging, about:addons oder die Seite, die sich öffnet, wenn Sie einen neuen leeren Tab öffnen.

Hinweis: Firefox löst URLs in eingefügten CSS-Dateien relativ zur CSS-Datei selbst auf und nicht relativ zu der Seite, in die sie eingefügt wird.

Das eingefügte CSS kann durch den Aufruf von scripting.removeCSS() entfernt werden.

Diese Funktion ist asynchron und gibt ein Promise zurück.

Syntax

js
await browser.scripting.insertCSS(
  details     // object
)

Parameter

details

Ein Objekt, das das einzufügende CSS beschreibt und wo es eingefügt werden soll. Es enthält die folgenden Eigenschaften:

css Optional

string. Ein String, der das einzufügende CSS enthält. Entweder css oder files muss angegeben sein.

files Optional

array von string. Der Pfad der einzufügenden CSS-Dateien relativ zum Root-Verzeichnis der Erweiterung. Entweder files oder css muss angegeben sein.

origin Optional

string. Der Stil-Ursprung für die Einfügung, entweder USER, um das CSS als Benutzer-Stylesheet hinzuzufügen, oder AUTHOR, um es als Autoren-Stylesheet hinzuzufügen. Standard ist AUTHOR.

  • USER ermöglicht es Ihnen, zu verhindern, dass Websites das von Ihnen eingefügte CSS überschreiben: siehe Kaskadierung.
  • AUTHOR-Stylesheets verhalten sich so, als würden sie nach allen vom Webpage-Autor spezifizierten Regeln erscheinen. Dieses Verhalten umfasst auch alle Autoren-Stylesheets, die dynamisch durch die Skripte der Seite hinzugefügt werden, selbst wenn diese Hinzufügung nach Abschluss des insertCSS-Aufrufs erfolgt.
target

scripting.InjectionTarget. Details, die das Ziel angeben, in das das CSS eingefügt werden soll.

Rückgabewert

Ein Promise, das ohne Argument erfüllt wird, wenn das gesamte CSS eingefügt ist. Bei Fehlern wird das Promise abgelehnt.

Beispiele

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

js
browser.action.onClicked.addListener(async (tab) => {
  try {
    await browser.scripting.insertCSS({
      target: {
        tabId: tab.id,
      },
      css: `body { border: 20px dotted pink; }`,
    });
  } catch (err) {
    console.error(`failed to insert CSS: ${err}`);
  }
});

Dieses Beispiel fügt CSS aus einer Datei ein (die mit der Erweiterung verpackt ist), die "content-style.css" genannt wird:

js
browser.action.onClicked.addListener(async (tab) => {
  try {
    await browser.scripting.insertCSS({
      target: {
        tabId: tab.id,
      },
      files: ["content-style.css"],
    });
  } catch (err) {
    console.error(`failed to insert CSS: ${err}`);
  }
});

Browser-Kompatibilität

BCD tables only load in the browser

Hinweis: Diese API basiert auf Chromiums chrome.scripting API.