Schaltfläche in der Adressleiste

Oft wird diese Benutzeroberflächenoption als Page-Action Schaltfläche bezeichnet. Dabei handelt es sich um eine Schaltfläche, die der Browser-Adressleiste hinzugefügt wird. Benutzer klicken auf die Schaltfläche, um mit Erweiterungen zu interagieren.

Page-Action-Schaltfläche ist ein Symbol eines Hundepfotenabdrucks

Page Actions und Browser Actions

Die Schaltfläche in der Adressleiste (oder Page Action) ist ähnlich der Symbolleistenschaltfläche (oder Browser Action).

Die Unterschiede sind:

Die Position der Schaltfläche:
- Die Page Action wird innerhalb der Browser-Adressleiste angezeigt.
- Die Browser Action wird außerhalb der Adressleiste, in der Browser-Symbolleiste, angezeigt.
Die Sichtbarkeit der Schaltfläche:
- Die Page Action ist standardmäßig ausgeblendet (obwohl dieser Standard über die Eigenschaften show_matches und hide_matches des Manifest-Schlüssels geändert werden kann), und Sie rufen pageAction.show() und pageAction.hide() auf, um sie in bestimmten Tabs anzuzeigen oder auszublenden.
- Die Browser Action wird immer angezeigt.

Verwenden Sie eine Page Action, wenn die Aktion sich auf die aktuelle Seite bezieht. Nutzen Sie eine Browser Action, wenn die Aktion sich auf den gesamten Browser oder auf viele Seiten bezieht. Zum Beispiel:

Typ	Lesezeichenaktion	Inhaltsaktion	Tab-Operation
page action	Diese Seite als Lesezeichen hinzufügen	Reddit-Verbesserung	Tab senden
browser action	Alle Lesezeichen anzeigen	Werbungsblockierung aktivieren	Alle offenen Tabs synchronisieren

Festlegen der Page Action

Sie definieren die Eigenschaften der Page Action mit dem page_action Schlüssel in der manifest.json:

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, welches die Erweiterung mit pageAction.onClicked überwacht:
js
```
browser.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. Siehe den Popup Artikel für weitere Details zur Erstellung und Verwaltung von Popups.

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

Sie können jede der Eigenschaften der Page Action programmatisch mit der pageAction API ändern.

Symbole

Für Details zur Erstellung von Symbolen, die Sie mit Ihrer Page Action verwenden können, sehen Sie unter Iconography in der Acorn Design System Dokumentation nach.

Beispiele

Das webextensions-examples Repository auf GitHub enthält das chill-out Beispiel, das eine Page Action ohne ein Popup implementiert.