Toolbar-Schaltfläche
Häufig als Browser-Aktion bezeichnet, ist diese Benutzeroberflächenoption eine Schaltfläche, die der Browser-Toolbar hinzugefügt wird. Benutzer klicken auf die Schaltfläche, um mit Ihrer Erweiterung zu interagieren.
Die Toolbar-Schaltfläche (Browser-Aktion) ähnelt sehr der Adressleisten-Schaltfläche (Seitenaktion). Für die Unterschiede und Hinweise, wann man was verwenden sollte, siehe Seitenaktionen und Browser-Aktionen.
Festlegen der Browser-Aktion
Sie definieren die Eigenschaften der Browser-Aktion in der manifest.json-Datei Ihrer Erweiterung mit:
- dem Schlüssel
"browser_action"für Manifest V2-Erweiterungen. - dem Schlüssel
"action"für Manifest V3-Erweiterungen.
Die Syntax für diese Schlüssel ist identisch.
"action": {
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?"
}
Es gibt keine verpflichtenden Eigenschaften für diesen Schlüssel.
Es gibt zwei Möglichkeiten, eine Browser-Aktion anzugeben: mit oder ohne ein Popup. Wenn Sie kein Popup angeben, wird beim Klicken des Benutzers auf die Schaltfläche ein Ereignis an die Erweiterung gesendet, auf das die Erweiterung mit action.onClicked hört:
browser.action.onClicked.addListener(handleClick);
Wenn Sie ein Popup angeben, wird das Klick-Ereignis nicht gesendet: Stattdessen wird das Popup angezeigt, wenn der Benutzer auf die Schaltfläche klickt. Der Benutzer kann mit dem Popup interagieren, das sich automatisch schließt, wenn der Benutzer außerhalb davon klickt. Siehe den Artikel Popup für weitere Details zum Erstellen und Verwalten von Popups.
Beachten Sie, dass Ihre Erweiterung nur eine einzige Browser-Aktion haben kann.
Viele der Eigenschaften der Browser-Aktion können Sie programmatisch ändern mit:
- der API
browserActionfür Manifest V2-Erweiterungen. - der API
actionfür Manifest V3-Erweiterungen.
Symbole
Wenn Sie "default_icon" nicht angeben, wird das Erweiterungssymbol verwendet. Wenn die Erweiterung kein Symbol angibt, wird das Standard-Symbol des Web-Extensions-Puzzleteils verwendet. Wenn "default_title" nicht angegeben wird, wird der Erweiterungsname verwendet.
Sie können Symbole für helle und dunkle UI-Themen mit der Eigenschaft "theme_icons" bereitstellen oder eine Medienabfrage zu prefers-color-scheme in einem SVG-Symbol verwenden. Weitere Informationen finden Sie in "browser_action" "theme_icons" oder "action" "theme_icons" sowie im themed-icons-Beispiel.
Details, wie Sie Symbole für Ihre Browser-Aktion erstellen, finden Sie unter Ikonographie in der Dokumentation des Acorn Design Systems.
Beispiele
Das webextensions-examples-Repository auf GitHub enthält zwei Beispiele von Erweiterungen, die Browser-Aktionen implementieren:
- bookmark-it verwendet eine Browser-Aktion ohne Popup
- beastify verwendet eine Browser-Aktion mit einem Popup