Schaltfläche in der Adressleiste

Häufig als Seitenaktion-Schaltflä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.

Seitenaktionsknopf ist ein Symbol eines Hundepfotenabdrucks

Seitenaktionen und Browseraktionen

Die Schaltfläche in der Adressleiste (oder Seitenaktion) ähnelt der Symbolleistenschaltfläche (oder Browseraktion).

Die Unterschiede sind:

  • Der Standort der Schaltfläche:

    • Die Seitenaktion wird innerhalb der Adressleiste des Browsers angezeigt.
    • Die Browseraktion wird außerhalb der Adressleiste, in der Symbolleiste des Browsers, angezeigt.
  • Die Sichtbarkeit der Schaltfläche:

    • Die Seitenaktion ist standardmäßig verborgen (obwohl diese Standardeinstellung über die show_matches und hide_matches Schlüssel im Manifest geändert werden kann), und Sie rufen pageAction.show() und pageAction.hide() auf, um sie in bestimmten Tabs anzuzeigen oder zu verbergen.
    • Die Browseraktion wird immer angezeigt.

Verwenden Sie eine Seitenaktion, wenn sich die Aktion auf die aktuelle Seite bezieht. Verwenden Sie eine Browseraktion, wenn sich die Aktion auf den Browser insgesamt oder auf viele Seiten bezieht. Zum Beispiel:

Typ Lesezeichenaktion Inhaltsaktion Tab-Operation
Seitenaktion Diese Seite als Lesezeichen speichern Reddit-Verbesserung Tab senden
Browseraktion Alle Lesezeichen anzeigen Werbeblocker aktivieren Alle offenen Tabs synchronisieren

Festlegen der Seitenaktion

Sie definieren die Eigenschaften der Seitenaktion 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 Seitenaktion anzugeben: 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 abfängt:

    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, schließt es sich automatisch. Weitere Informationen zum Erstellen und Verwalten von Popups finden Sie im Artikel Popup.

Beachten Sie, dass Ihre Erweiterung nur eine Seitenaktion haben kann.

Sie können alle Eigenschaften der Seitenaktion programmatisch mit der pageAction-API ändern.

Symbole

Für Details, wie Sie Symbole für Ihre Seitenaktion erstellen, sehen Sie sich die Ikonografie in der Acorn Design System Dokumentation an.

Beispiele

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