Adressleisten-Schaltfläche
Häufig als Page Action bezeichnet, ist diese Benutzeroberflächenoption eine Schaltfläche, die der Adressleiste des Browsers hinzugefügt wird. Benutzer klicken auf die Schaltfläche, um mit Erweiterungen zu interagieren.
Page-Aktionen und Browser-Aktionen
Die Adressleisten-Schaltfläche (oder Page Action) ist der Toolbar-Schaltfläche (oder Browser Action) ähnlich.
Die Unterschiede sind:
-
Der Ort der Schaltfläche:
- Die Page Action wird innerhalb der Adressleiste des Browsers angezeigt.
- Die Browser Action wird außerhalb der Adressleiste, in der Symbolleiste des Browsers, angezeigt.
-
Die Sichtbarkeit der Schaltfläche:
- Die Page Action ist standardmäßig verborgen (obwohl diese Standardeinstellung über die Eigenschaften
show_matches
undhide_matches
des Manifest-Schlüssels geändert werden kann), und Sie rufenpageAction.show()
undpageAction.hide()
auf, um sie in bestimmten Tabs anzuzeigen oder zu verbergen. - Die Browser Action wird immer angezeigt.
- Die Page Action ist standardmäßig verborgen (obwohl diese Standardeinstellung über die Eigenschaften
Verwenden Sie eine Page Action, wenn die Aktion sich auf die aktuelle Seite bezieht. Verwenden Sie eine Browser Action, wenn die Aktion sich auf den Browser als Ganzes oder auf mehrere Seiten bezieht. Zum Beispiel:
Typ | Lesezeichen-Aktion | Inhaltsaktion | Tab-Operation |
---|---|---|---|
Page Action | Diese Seite mit einem Lesezeichen versehen | Reddit-Verbesserung | Tab senden |
Browser Action | Alle Lesezeichen anzeigen | Werbeblocker aktivieren | Alle offenen Tabs synchronisieren |
Spezifizieren der Page Action
Sie definieren die Eigenschaften der Page Action mithilfe des page_action
Schlüssels in manifest.json:
"page_action": {
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?"
}
Der einzige obligatorische Schlüssel ist default_icon
.
Es gibt zwei Möglichkeiten, eine Page Action zu spezifizieren: mit oder ohne ein Popup.
-
Ohne ein Popup: Wenn der Benutzer auf die Schaltfläche klickt, wird ein Ereignis an die Erweiterung gesendet, das die Erweiterung mit
pageAction.onClicked
abhört:jsbrowser.pageAction.onClicked.addListener(handleClick);
-
Mit einem Popup: Das
click
-Ereignis wird nicht gesendet. Stattdessen erscheint das Popup, wenn der Benutzer auf die Schaltfläche klickt. Der Benutzer interagiert dann mit dem Popup. Wenn der Benutzer außerhalb des Popups klickt, wird es automatisch geschlossen. Sehen Sie sich den Popup Artikel für mehr Details zur Erstellung und Verwaltung von Popups an.
Beachten Sie, dass Ihre Erweiterung nur eine Page Action haben kann.
Sie können alle Eigenschaften der Page Action programmatisch mit der pageAction
API ändern.
Symbole
Für Details, wie Sie Symbole erstellen, die Sie mit Ihrer Page Action verwenden können, sehen Sie sich die Ikonographie im Acorn Design System an.
Beispiele
Das webextensions-examples Repository auf GitHub enthält das chill-out Beispiel, das eine Page Action ohne Popup implementiert.