scripting.insertCSS()

Fügt CSS in eine Seite ein.

Hinweis: Diese Methode ist in 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 die "scripting"- Berechtigung und die Berechtigung für die URL des Ziels haben, entweder explizit als Host-Berechtigung oder mithilfe der activeTab-Berechtigung.

Sie können CSS nur in Seiten einfügen, deren URL mithilfe eines Match-Musters ausgedrückt werden kann: Das bedeutet, dass das Schema "http", "https" oder "file" sein muss. Das bedeutet, dass Sie kein CSS in eine der im Browser integrierten Seiten einfügen können, wie about:debugging, about:addons oder die Seite, die geöffnet wird, wenn Sie eine neue leere Registerkarte öffnen.

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

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

Dies ist eine asynchrone Funktion, die ein Promise zurückgibt.

Syntax

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

Parameter

details

Ein Objekt, das das einzufügende CSS und den Ort beschreibt, an dem 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 werden.

files Optional

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

origin Optional

string. Der Stilursprung für die Einfügung, entweder USER, um das CSS als Benutzerstilblatt hinzuzufügen, oder AUTHOR, um es als Autorenstilblatt hinzuzufügen. Standardmäßig AUTHOR. Diese Eigenschaft ist ab Firefox 144 nicht case-sensitiv.

USER ermöglicht es Ihnen, zu verhindern, dass Websites das von Ihnen eingefügte CSS überschreiben: siehe Cascading order.
AUTHOR-Stilblätter verhalten sich so, als ob sie nach allen von der Webseite angegebenen Autorenregeln erscheinen. Dieses Verhalten schließt alle dynamisch durch die Skripte der Seite hinzugefügten Autorenstile ein, selbst wenn diese Hinzufügung nach Abschluss des insertCSS-Aufrufs erfolgt.

target

scripting.InjectionTarget. Details, die das Ziel zur Einfügung des CSS spezifizieren.

Rückgabewert

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

Beispiele

Dieses Beispiel fügt CSS aus einem String in die aktive Registerkarte 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 aus einer Datei ein (die mit der Erweiterung gepackt wurde), genannt "content-style.css":

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

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden