Fügt CSS in eine Seite ein.

Um diese API zu nutzen, müssen Sie die"scripting"-Berechtigung und die Berechtigung für die URL des Ziels haben, entweder explizit alsHost-Berechtigung oder durch Verwendung deractiveTab-Berechtigung.

Sie können CSS nur in Seiten injizieren, deren URL mit einemÜbereinstimmungsmuster ausgedrückt werden kann: Das bedeutet, dass das Schema entweder "http", "https" oder "file" sein muss. Das bedeutet, dass Sie kein CSS in eingebaute Browser-Seiten wie about:debugging, about:addons oder die Seite, die beim Öffnen eines neuen leeren Tabs geöffnet wird, injizieren können.

Das eingefügte CSS kann durch Aufrufen vonscripting.removeCSS() entfernt werden.

Dies ist eine asynchrone Funktion, die einPromise zurückgibt.

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:

cssOptional

string. Ein String, der das zu injizierende CSS enthält. Entwedercss oderfiles muss angegeben werden.

filesOptional

array vonstring. Der Pfad der CSS-Dateien, die relativ zum Stammverzeichnis der Erweiterung injiziert werden sollen. Entwederfiles odercss muss angegeben werden.

originOptional

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

• USER ermöglicht es Ihnen, zu verhindern, dass Websites das von Ihnen eingefügte CSS überschreiben: sieheCascading 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 desinsertCSS-Aufrufs erfolgt.

target

scripting.InjectionTarget. Details, die das Ziel angeben, in das das CSS injiziert werden soll.

Rückgabewert

EinPromise, 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}`);  }});

Beispielerweiterungen

• beastify

Browser-Kompatibilität