Schaltfläche in der Adressleiste

Diese Benutzeroberflächenoption, häufig als page action-Schaltfläche bezeichnet, fügt der Adressleiste des Browsers eine Schaltfläche hinzu. Benutzer klicken auf die Schaltfläche, um mit Erweiterungen zu interagieren.

Hervorgehobene Schaltfläche mit einem Pfotenabdruck-Symbol in der Firefox-Adressleiste

Page actions und browser actions

Die Schaltfläche in der Adressleiste (oder page action) ähnelt der Schaltfläche in der Symbolleiste (oder browser action).

Die Unterschiede sind:

Position 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.
Sichtbarkeit der Schaltfläche:
- Die page action ist standardmäßig ausgeblendet (dieser Standardwert kann jedoch über die Eigenschaften show_matches und hide_matches des Manifest-Schlüssels geändert werden). Mit pageAction.show() und pageAction.hide() können Sie sie in bestimmten Tabs ein- oder ausblenden.
- Die browser action wird immer angezeigt.

Verwenden Sie eine page action, wenn sich die Aktion auf die aktuelle Seite bezieht. Verwenden Sie eine browser action, wenn sich die Aktion auf den Browser als Ganzes oder auf viele Seiten bezieht. Zum Beispiel:

Typ	Lesezeichenaktion	Inhaltsaktion	Tab-Aktion
page action	Diese Seite als Lesezeichen speichern	Reddit erweitern	Tab senden
browser action	Alle Lesezeichen anzeigen	Werbeblockierung aktivieren	Alle geöffneten Tabs synchronisieren

Page action festlegen

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

json

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

Es gibt zwei Möglichkeiten, eine page action festzulegen: mit oder ohne Popup.

Ohne Popup: Wenn der Benutzer auf die Schaltfläche klickt, wird ein Ereignis an die Erweiterung gesendet. Die Erweiterung wartet mit pageAction.onClicked auf dieses Ereignis:
js
```
browser.pageAction.onClicked.addListener(handleClick);
```
Mit Popup: Das click-Ereignis wird nicht gesendet. Stattdessen erscheint das Popup, wenn der Benutzer auf die Schaltfläche klickt. Anschließend kann der Benutzer mit dem Popup interagieren. Wenn der Benutzer außerhalb des Popups klickt, wird es automatisch geschlossen. Weitere Informationen zum Erstellen und Verwalten von Popups finden Sie im Artikel Popups.

Beachten Sie, dass Ihre Erweiterung nur eine page action haben kann.

Sie können alle Eigenschaften der page action programmgesteuert über die pageAction-API ändern.

Symbole

Sie können Bitmap-Bildformate wie PNG verwenden oder SVG-Symbole bereitstellen. Wenn Sie ein SVG-Symbol verwenden, können Sie mit einer Media Query für prefers-color-scheme das Symbol an helle und dunkle Themes anpassen. Weitere Informationen finden Sie unter "page_action" "default_icon" und im Beispiel themed-icons.

Hinweis: In dunklen Benutzeroberflächen-Themes wird implizit ein CSS-Filter auf SVG-Symbole angewendet. Dieser Filter wird in Firefox Desktop Version 152 deaktiviert (Firefox-Bug 2016509). Sie können SVG-Symbole bei deaktiviertem CSS-Filter testen, indem Sie eine boolesche about:config-Einstellung namens extensions.webextensions.pageActionIconDarkModeFilter.enabled erstellen und auf false setzen. In Firefox Desktop Nightly ist der Filter ab Version 149 standardmäßig deaktiviert.

Wie Sie Symbole für Ihre page action erstellen, erfahren Sie unter Ikonografie in der Dokumentation des Acorn Design System.

Beispiele

Das Repository webextensions-examples auf GitHub enthält folgende Beispiele:

chill-out implementiert eine page action ohne Popup.
themed-icons zeigt, wie sich ein SVG-Symbol für eine page action an das helle und das dunkle Theme der Browseroberfläche anpassen kann.

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden