tabs.insertCSS()
Injiziert CSS in eine Seite.
Hinweis: Bei Verwendung von Manifest V3 oder höher nutzen Sie scripting.insertCSS()
und scripting.removeCSS()
um CSS einzufügen und zu entfernen.
Um diese API zu verwenden, müssen Sie die Berechtigung für die URL der Seite haben, entweder explizit als Host-Berechtigung oder durch die Verwendung der activeTab-Berechtigung.
Sie können CSS nur in Seiten injizieren, deren URL mit einem Übereinstimmungsmuster ausgedrückt werden kann: Das heißt, ihr Schema muss eines von "http", "https" oder "file" sein. Dies bedeutet, dass Sie kein CSS in die integrierten Seiten des Browsers injizieren können, wie etwa about:debugging, about:addons oder die Seite, die geöffnet wird, wenn Sie einen neuen leeren Tab öffnen.
Hinweis: Firefox löst URLs in injizierten CSS-Dateien relativ zur CSS-Datei selbst auf, anstatt zur Seite, in die sie injiziert wird.
Das eingefügte CSS kann durch Aufrufen von tabs.removeCSS()
wieder entfernt werden.
Dies ist eine asynchrone Funktion, die ein Promise
zurückgibt (nur in Firefox).
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 wird der aktive Tab des aktuellen Fensters verwendet. details
-
Ein Objekt, das das einzufügende CSS beschreibt. Es enthält die folgenden Eigenschaften:
allFrames
Optional-
boolean
. Wenntrue
, wird das CSS in alle Frames der aktuellen Seite injiziert. Wenn esfalse
ist, wird das CSS nur in den oberen Frame injiziert. Standardmäßig ist esfalse
. code
Optional-
string
. Der einzufügende Code als Textzeichenfolge. cssOrigin
Optional-
string
. Dies kann einen von zwei Werten annehmen: "user", um das CSS als Nutzer-Stylesheet hinzuzufügen, oder "author", um es als Autoren-Stylesheet hinzuzufügen. Wenn diese Option ausgelassen 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 Kaskadierende Reihenfolge.
- "author"-Stylesheets verhalten sich so, als würden sie nach allen von der Webseite angegebenen Autorenregeln erscheinen. Dieses Verhalten schließt alle dynamisch von den Skripten der Seite hinzugefügten Autoren-Stylesheets ein, selbst wenn diese Hinzufügung nach dem Abschluss des
insertCSS
-Aufrufs erfolgt.
file
Optional-
string
. Pfad zu einer Datei, die den einzufügenden 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 plattformübergreifend zu arbeiten, können Sie den Pfad als absolute URL angeben, beginnend am Stamm der Erweiterung, wie folgt:"/path/to/stylesheet.css"
. frameId
Optional-
integer
. Der Frame, in den das CSS injiziert werden soll. Standardmäßig0
(der oberste Frame). matchAboutBlank
Optional-
boolean
. Wenntrue
, wird der Code in eingebettete "about:blank" und "about:srcdoc" Frames injiziert, wenn Ihre Erweiterung Zugriff auf ihr übergeordnetes Dokument hat. Der Code kann nicht in Top-Level about: Frames eingefügt werden. Standardmäßigfalse
. 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. Wenn ein Fehler auftritt, wird das Promise mit einer Fehlermeldung abgelehnt.
Beispiele
Dieses Beispiel fügt CSS in den aktuell aktiven Tab ein, das aus einer Zeichenkette übernommen 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 verpackten 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);
});
Beispiel-Erweiterungen
Browser-Kompatibilität
BCD tables only load in the browser
Hinweis: Diese API basiert auf der chrome.tabs
API von Chromium. Diese Dokumentation stammt von tabs.json
im Chromium-Code.