Werkzeugleistenschaltfläche

Allgemein als Browser-Action bezeichnet, ist diese Benutzeroberflächenoption eine Schaltfläche, die der Browser-Werkzeugleiste hinzugefügt wird. Benutzer klicken auf die Schaltfläche, um mit Ihrer Erweiterung zu interagieren. Ein benutzerdefiniertes Browser-Action-Symbol in der Browser-Werkzeugleiste, das wie ein Pfotenabdruck aussieht.

Die Werkzeugleistenschaltfläche (Browser-Action) ähnelt sehr der Adressleistenschaltfläche (Seitenaktion). Für die Unterschiede und Anleitungen, wann Sie welche verwenden sollten, siehe Seitenaktionen und Browser-Aktionen.

Die Browser-Action festlegen

Sie definieren die Eigenschaften der Browser-Action mit dem Schlüssel "browser_action" in der manifest.json:

json
"browser_action": {
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?"
}

Für diesen Schlüssel gibt es keine zwingenden Eigenschaften. Wenn Sie "default_icon" nicht angeben, wird das Erweiterungssymbol verwendet, und wenn die Erweiterung kein Symbol angibt, wird das Standard-Webextension-Puzzle-Symbol verwendet. Wenn "default_title" nicht angegeben ist, wird der Erweiterungsname verwendet.

Es gibt zwei Möglichkeiten, eine Browser-Action anzugeben: mit oder ohne ein Popup. Wenn Sie kein Popup angeben, wird beim Klicken auf die Schaltfläche ein Ereignis an die Erweiterung gesendet, das die Erweiterung mithilfe von browserAction.onClicked empfängt:

js
browser.browserAction.onClicked.addListener(handleClick);

Wenn Sie ein Popup angeben, wird das Klickereignis nicht gesendet: Stattdessen wird das Popup angezeigt, wenn der Benutzer die Schaltfläche anklickt. Der Benutzer kann mit dem Popup interagieren, das automatisch geschlossen wird, wenn der Benutzer außerhalb des Popups klickt. Weitere Details zur Erstellung und Verwaltung von Popups finden Sie im Artikel Popup.

Beachten Sie, dass Ihre Erweiterung nur eine Browser-Action haben kann.

Sie können viele der Eigenschaften der Browser-Action programmgesteuert über die browserAction API ändern.

Symbole

Details zum Erstellen von Symbolen für Ihre Browser-Action finden Sie unter Ikonographie in der Acorn Design System Dokumentation.

Beispiele

Das webextensions-examples Repository auf GitHub enthält zwei Beispiele für Erweiterungen, die Browser-Aktionen implementieren:

  • bookmark-it verwendet eine Browser-Action ohne Popup
  • beastify verwendet eine Browser-Action mit Popup