scripting.insertCSS()

Syntax

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 zu injizierende CSS enthält. Entweder css oder files muss angegeben werden.

files Optional

array von string. Der Pfad der CSS-Dateien, die relativ zum Stammverzeichnis der Erweiterung injiziert werden sollen. Entweder files oder css muss angegeben werden.

origin Optional

string. Der Stil-Ursprung für die Injektion, entweder USER, um das CSS als Benutzer-Stylesheet hinzuzufügen, oder AUTHOR, um es als Autoren-Stylesheet hinzuzufügen. Standardmäßig AUTHOR. Diese Eigenschaft ist in Firefox 144 unveränderlich.

• USER ermöglicht es Ihnen, zu verhindern, dass Websites das von Ihnen eingefügte CSS überschreiben: siehe Cascading order.
• AUTHOR-Stylesheets verhalten sich so, als ob sie nach allen vom Webdokument spezifizierten Autorenregeln erscheinen. Dieses Verhalten umfasst 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 injiziert werden soll.

Rückgabewert

Ein Promise, das ohne Argumente erfüllt wird, wenn das gesamte CSS eingefügt ist. Wenn ein Fehler auftritt, wird das Promise abgelehnt.

Beispiele

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

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 ein, das aus einer Datei geladen wird (mit der Erweiterung gepackt), die "content-style.css" heißt:

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