Adressleisten-Schaltfläche

Häufig als Page Action 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.

Page-Action-Schaltfläche ist ein Symbol einer Hunde-Pfotenabdruck

Page-Aktionen und Browser-Aktionen

Die Adressleisten-Schaltfläche (oder Page Action) ist der Toolbar-Schaltfläche (oder Browser Action) ähnlich.

Die Unterschiede sind:

  • Der Ort der Schaltfläche:

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

    • Die Page Action ist standardmäßig verborgen (obwohl diese Standardeinstellung ü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 zu verbergen.
    • Die Browser Action wird immer angezeigt.

Verwenden Sie eine Page Action, wenn die Aktion sich auf die aktuelle Seite bezieht. Verwenden Sie eine Browser Action, wenn die Aktion sich auf den Browser als Ganzes oder auf mehrere Seiten bezieht. Zum Beispiel:

Typ Lesezeichen-Aktion Inhaltsaktion Tab-Operation
Page Action Diese Seite mit einem Lesezeichen versehen Reddit-Verbesserung Tab senden
Browser Action Alle Lesezeichen anzeigen Werbeblocker aktivieren Alle offenen Tabs synchronisieren

Spezifizieren der Page Action

Sie definieren die Eigenschaften der Page Action mithilfe des page_action Schlüssels in 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, das die Erweiterung mit pageAction.onClicked abhört:

    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. Sehen Sie sich den Popup Artikel für mehr Details zur Erstellung und Verwaltung von Popups an.

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

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

Symbole

Für Details, wie Sie Symbole erstellen, die Sie mit Ihrer Page Action verwenden können, sehen Sie sich die Ikonographie im Acorn Design System an.

Beispiele

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