Beschreibung
Mit der chrome.declarativeContent
API können Sie Aktionen ausführen, die vom Inhalt einer Seite abhängen, ohne dass Sie die Berechtigung zum Lesen des Seiteninhalts benötigen.
Berechtigungen
declarativeContent
Konzepte und Verwendung
Mit der Declarative Content API können Sie die Aktion Ihrer Erweiterung abhängig von der URL einer Webseite oder davon aktivieren, ob ein CSS-Sellektor mit einem Element auf der Seite übereinstimmt, ohne Hostberechtigungen hinzufügen oder ein Inhaltsskript einschleusen zu müssen.
Verwenden Sie die Berechtigung activeTab, um mit einer Seite zu interagieren, nachdem der Nutzer auf die Aktion der Erweiterung geklickt hat.
Regeln
Regeln bestehen aus Bedingungen und Aktionen. Wenn eine der Bedingungen erfüllt ist, werden alle Aktionen ausgeführt. Die Aktionen sind setIcon()
und showAction()
.
Die PageStateMatcher
wird nur dann auf Webseiten angewendet, wenn alle aufgeführten Kriterien erfüllt sind. Es kann mit einer Seiten-URL, einem CSS-Komposit-Sellektor oder dem Zustand der Seitenmarkierung übereinstimmen. Mit der folgenden Regel wird die Aktion der Erweiterung auf Google-Seiten aktiviert, wenn ein Passwortfeld vorhanden ist:
let rule1 = {
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostSuffix: '.google.com', schemes: ['https'] },
css: ["input[type='password']"]
})
],
actions: [ new chrome.declarativeContent.ShowAction() ]
};
Wenn Sie die Aktion der Erweiterung auch für Google-Websites mit einem Video aktivieren möchten, können Sie eine zweite Bedingung hinzufügen. Jede Bedingung reicht aus, um alle angegebenen Aktionen auszulösen:
let rule2 = {
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { hostSuffix: '.google.com', schemes: ['https'] },
css: ["input[type='password']"]
}),
new chrome.declarativeContent.PageStateMatcher({
css: ["video"]
})
],
actions: [ new chrome.declarativeContent.ShowAction() ]
};
Beim Ereignis onPageChanged
wird geprüft, ob für eine Regel mindestens eine Bedingung erfüllt ist. Falls ja, werden die Aktionen ausgeführt. Regeln bleiben über Browsersitzungen hinweg erhalten. Daher sollten Sie während der Installation der Erweiterung zuerst removeRules
verwenden, um zuvor installierte Regeln zu löschen, und dann addRules
, um neue zu registrieren.
chrome.runtime.onInstalled.addListener(function(details) {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([rule2]);
});
});
Wenn Sie die Berechtigung activeTab verwenden, werden in Ihrer Erweiterung keine Berechtigungswarnungen angezeigt. Wenn der Nutzer auf die Erweiterungsaktion klickt, wird sie nur auf relevanten Seiten ausgeführt.
Übereinstimmung der Seiten-URL
Die PageStateMatcher.pageurl
stimmt überein, wenn die URL-Kriterien erfüllt sind. Die gängigsten Kriterien sind eine Koncatenate aus „host“, „path“ oder „url“, gefolgt von „enthält“, „gleich“, „präfix“ oder „suffix“. Die folgende Tabelle enthält einige Beispiele:
Kriterien | Übereinstimmungen |
---|---|
{ hostSuffix: 'google.com' } |
Alle Google-URLs |
{ pathPrefix: '/docs/extensions' } |
URLs zu Erweiterungsdokumenten |
{ urlContains: 'developer.chrome.com' } |
URLs zu allen Chrome-Entwicklerdokumenten |
Bei allen Kriterien wird zwischen Groß- und Kleinschreibung unterschieden. Eine vollständige Liste der Kriterien finden Sie unter UrlFilter.
CSS-Abgleich
PageStateMatcher.css
-Bedingungen müssen zusammengesetzte Selektoren sein. Das bedeutet, dass Sie keine Kombinatoren wie Leerzeichen oder „>
“ in Ihre Selektoren aufnehmen können. So kann Chrome die Auswahlmöglichkeiten effizienter abgleichen.
Zusammengesetzte Selektoren (OK) | Komplexe Selektoren (nicht zulässig) |
---|---|
a |
div p |
iframe.special[src^='http'] |
p>span.highlight |
ns|* |
p + ol |
#abcd:checked |
p::first-line |
CSS-Bedingungen stimmen nur mit angezeigten Elementen überein: Wenn ein Element, das mit Ihrem Selektor übereinstimmt, display:none
ist oder eines seiner übergeordneten Elemente display:none
ist, wird die Bedingung nicht erfüllt. Elemente, die mit visibility:hidden
formatiert, außerhalb des Bildschirms positioniert oder durch andere Elemente verdeckt sind, können trotzdem dazu führen, dass die Bedingung erfüllt wird.
Übereinstimmung des Status „Als Lesezeichen gespeichert“
Mit der Bedingung PageStateMatcher.isBookmarked
kann der Status der aktuellen URL im Profil des Nutzers abgeglichen werden. Damit diese Bedingung verwendet werden kann, muss die Berechtigung „bookmarks“ im manifest der Erweiterung deklariert werden.
Typen
ImageDataType
Weitere Informationen finden Sie unter https://developer.mozilla.org/en-US/docs/Web/API/ImageData.
Typ
ImageData
PageStateMatcher
Der Status einer Webseite wird anhand verschiedener Kriterien abgeglichen.
Attribute
-
Konstruktor
void
Die
constructor
-Funktion sieht so aus:(arg: PageStateMatcher) => {...}
-
Argument
-
Gibt zurück
-
-
css
string[] optional
Übereinstimmung, wenn alle CSS-Selektoren im Array mit angezeigten Elementen in einem Frame mit demselben Ursprung wie der Hauptframe der Seite übereinstimmen. Alle Auswahlen in diesem Array müssen zusammengesetzte Auswahlen sein, um die Abgleichgeschwindigkeit zu erhöhen. Hinweis: Wenn Sie Hunderte von CSS-Selektoren auflisten oder CSS-Selektoren auflisten, die hunderte Male pro Seite übereinstimmen, kann dies die Websites verlangsamen.
-
isBookmarked
boolescher Wert optional
Chrome 45 und höherStimmt überein, wenn der Status der Seite als Lesezeichen gespeichert ist und mit dem angegebenen Wert übereinstimmt. Erfordert die Berechtigung „Lesezeichen“.
-
pageUrl
UrlFilter optional
Übereinstimmt, wenn die Bedingungen der
UrlFilter
für die URL der obersten Ebene der Seite erfüllt sind.
RequestContentScript
Deklarative Ereignisaktion, mit der ein Inhaltsskript eingefügt wird.
WARNUNG:Diese Aktion befindet sich noch in der Entwicklungsphase und wird in stabilen Chrome-Builds nicht unterstützt.
Attribute
-
Konstruktor
void
Die
constructor
-Funktion sieht so aus:(arg: RequestContentScript) => {...}
-
Argument
-
Gibt zurück
-
-
allFrames
boolescher Wert optional
Gibt an, ob das Inhaltsskript in allen Frames der übereinstimmenden Seite oder nur im obersten Frame ausgeführt wird. Standardwert ist
false
. -
css
string[] optional
Namen von CSS-Dateien, die als Teil des Inhaltsscripts eingefügt werden sollen.
-
js
string[] optional
Namen von JavaScript-Dateien, die als Teil des Inhaltsscripts eingefügt werden sollen.
-
matchAboutBlank
boolescher Wert optional
Ob das Content-Script auf
about:blank
undabout:srcdoc
eingefügt werden soll. Der Standardwert istfalse
.
SetIcon
Deklarative Ereignisaktion, die das quadratische n-dip-Symbol für die Seitenaktion oder Browseraktion der Erweiterung festlegt, wenn die entsprechenden Bedingungen erfüllt sind. Diese Aktion kann ohne Hostberechtigungen verwendet werden, die Erweiterung muss jedoch eine Seiten- oder Browseraktion haben.
Es muss genau eine von imageData
oder path
angegeben werden. Bei beiden handelt es sich um Wörterbücher, die einer Bilddarstellung eine bestimmte Anzahl von Pixeln zuordnen. Die Bilddarstellung in imageData
ist ein ImageData-Objekt, z. B. aus einem canvas
-Element. Die Bilddarstellung in path
ist der Pfad zu einer Bilddatei, bezogen auf das Manifest der Erweiterung. Wenn scale
Displaypixel in ein geräteunabhängiges Pixel passen, wird das Symbol scale * n
verwendet. Wenn dieser Maßstab fehlt, wird ein anderes Bild auf die erforderliche Größe skaliert.
Attribute
-
Konstruktor
void
Die
constructor
-Funktion sieht so aus:(arg: SetIcon) => {...}
-
Argument
-
Gibt zurück
-
-
imageData
ImageData | object optional
Entweder ein
ImageData
-Objekt oder ein Dictionary {size -> ImageData}, das ein festzulegendes Symbol darstellt. Wenn das Symbol als Dictionary angegeben ist, wird das verwendete Bild je nach Pixeldichte des Bildschirms ausgewählt. Wenn die Anzahl der Bildpixel, die in eine Bildschirmfläche passen,scale
entspricht, wird ein Bild mit der Größescale * n
ausgewählt. Dabei ist n die Größe des Symbols in der Benutzeroberfläche. Es muss mindestens ein Bild angegeben werden. Beachten Sie, dassdetails.imageData = foo
details.imageData = {'16': foo}
entspricht.
ShowAction
Eine deklarative Ereignisaktion, die die Aktion der Symbolleiste der Erweiterung aktiviert, wenn die entsprechenden Bedingungen erfüllt sind. Diese Aktion kann ohne Hostberechtigungen verwendet werden. Wenn die Erweiterung die Berechtigung activeTab hat, wird durch Klicken auf die Seitenaktion Zugriff auf den aktiven Tab gewährt.
Auf Seiten, auf denen die Bedingungen nicht erfüllt sind, ist die Symbolleiste der Erweiterung ausgegraut. Wenn Sie darauf klicken, wird das Kontextmenü geöffnet, anstatt dass die Aktion ausgelöst wird.
Attribute
-
Konstruktor
void
Die
constructor
-Funktion sieht so aus:(arg: ShowAction) => {...}
-
Argument
-
Gibt zurück
-
ShowPageAction
Verwenden Sie declarativeContent.ShowAction
.
Eine deklarative Ereignisaktion, die die Seitenaktion der Erweiterung auf „Aktiviert“ setzt, während die entsprechenden Bedingungen erfüllt sind. Diese Aktion kann ohne Hostberechtigungen verwendet werden, die Erweiterung muss jedoch eine Seitenaktion haben. Wenn die Erweiterung die Berechtigung activeTab hat, wird durch Klicken auf die Seitenaktion Zugriff auf den aktiven Tab gewährt.
Auf Seiten, auf denen die Bedingungen nicht erfüllt sind, ist die Symbolleiste der Erweiterung ausgegraut. Wenn Sie darauf klicken, wird das Kontextmenü geöffnet, anstatt dass die Aktion ausgelöst wird.
Attribute
-
Konstruktor
void
Die
constructor
-Funktion sieht so aus:(arg: ShowPageAction) => {...}
-
Argument
-
Gibt zurück
-
Ereignisse
onPageChanged
Bietet die Declarative Event API, die aus addRules
, removeRules
und getRules
besteht.