Adressleisten-Schaltfläche
Häufig als Seitenaktionsschaltfläche 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.
Seitenaktionen und Browseraktionen
Die Adressleisten-Schaltfläche (oder Seitenaktion) ist der Werkzeugleistenschaltfläche (oder Browseraktion) ähnlich.
Die Unterschiede sind:
-
Position der Schaltfläche:
- Die Seitenaktion wird innerhalb der Adressleiste des Browsers angezeigt.
- Die Browseraktion wird außerhalb der Adressleiste in der Browser-Werkzeugleiste angezeigt.
-
Sichtbarkeit der Schaltfläche:
- Die Seitenaktion ist standardmäßig ausgeblendet (obwohl dieser Standard über die Eigenschaften
show_matchesundhide_matchesdes Manifest-Schlüssels geändert werden kann), und Sie rufenpageAction.show()undpageAction.hide()auf, um sie in bestimmten Tabs anzuzeigen oder auszublenden. - Die Browseraktion wird immer angezeigt.
- Die Seitenaktion ist standardmäßig ausgeblendet (obwohl dieser Standard über die Eigenschaften
Verwenden Sie eine Seitenaktion, wenn die Aktion mit der aktuellen Seite in Zusammenhang steht. Verwenden Sie eine Browseraktion, wenn die Aktion sich auf den gesamten Browser oder viele Seiten bezieht. Zum Beispiel:
| Typ | Lesezeichenaktion | Inhaltsaktion | Tabs-Operation |
|---|---|---|---|
| Seitenaktion | Diese Seite als Lesezeichen hinzufügen | Reddit-Verbesserung | Tab senden |
| Browseraktion | Alle Lesezeichen anzeigen | Werbeblocker aktivieren | Alle offenen Tabs synchronisieren |
Spezifizieren der Seitenaktion
Sie definieren die Eigenschaften der Seitenaktion mit dem page_action Schlüssel in der 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 Seitenaktion 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, auf das die Erweiterung mithilfe von
pageAction.onClickedreagiert: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, schließt es sich automatisch. Weitere Einzelheiten zum Erstellen und Verwalten von Popups finden Sie im Popup Artikel.
Beachten Sie, dass Ihre Erweiterung nur eine einzige Seitenaktion haben kann.
Sie können alle Eigenschaften der Seitenaktion programmatisch mit der pageAction API ändern.
Symbole
Sie können Bitmap-Bildformate wie PNG verwenden oder SVG-Symbole bereitstellen. Wenn Sie ein SVG-Symbol verwenden, können Sie eine Medienabfrage auf prefers-color-scheme verwenden, um das Symbol für helle und dunkle Designs zu aktualisieren. Weitere Informationen finden Sie unter "page_action" "default_icon" und im themed-icons Beispiel.
Hinweis:
Ein impliziter CSS-Filter wird auf SVG-Symbole in dunklen UI-Designs angewendet. Dieser Filter wird in Firefox Desktop-Version 152 (Firefox-Fehler 2016509) deaktiviert. Sie können SVG-Symbole mit deaktiviertem CSS-Filter testen, indem Sie eine boolesche about:config-Einstellung namens extensions.webextensions.pageActionIconDarkModeFilter.enabled erstellen und auf false setzen. Der Filter ist standardmäßig ab Firefox Desktop Nightly Version 149 deaktiviert.
Einzelheiten zur Erstellung von Symbolen für Ihre Seitenaktion finden Sie unter Ikonographie in der Acorn Design System Dokumentation.
Beispiele
Das webextensions-examples Repository auf GitHub umfasst das:
- chill-out Beispiel, das eine Seitenaktion ohne Popup implementiert.
- themed-icons Beispiel, das zeigt, wie ein SVG-Seitenaktionssymbol auf die hellen und dunklen Themen in der Browser-Benutzeroberfläche reagieren kann.