Adressleisten-Schaltfläche

Häufig als Seitenaktion bezeichnet, ist diese Benutzeroberflächenoption eine Schaltfläche, die zur Adressleiste des Browsers hinzugefügt wird. Benutzer klicken auf die Schaltfläche, um mit Erweiterungen zu interagieren.

Seitenaktions-Schaltfläche ist ein Symbol eines Hundepfotenabdrucks

Seitenaktionen und Browseraktionen

Die Adressleisten-Schaltfläche (oder Seitenaktion) ist ähnlich der Toolbar-Schaltfläche (oder Browseraktion).

Die Unterschiede sind:

Die Position der Schaltfläche:
- Die Seitenaktion wird innerhalb der Adressleiste des Browsers angezeigt.
- Die Browseraktion wird außerhalb der Adressleiste, in der Toolbar des Browsers angezeigt.
Die Sichtbarkeit der Schaltfläche:
- Die Seitenaktion ist standardmäßig verborgen (obwohl dieser Standard über die show_matches und hide_matches Manifest-Schlüssel Eigenschaften 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 die Aktion sich auf die aktuelle Seite bezieht. Verwenden Sie eine Browseraktion, wenn sich die Aktion auf den gesamten Browser oder 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

Spezifizierung 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, welches die Erweiterung mithilfe von 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, schließt es sich automatisch. Siehe den Popup Artikel für mehr Details zur Erstellung und Verwaltung von Popups.

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

Sie können alle Eigenschaften der Seitenaktion programmatisch über die pageAction API ändern.

Symbole

Sie können Bitmap-Bildformate wie PNG verwenden oder SVG-Icons bereitstellen. Wenn Sie ein SVG-Icon verwenden, können Sie eine Medienabfrage für prefers-color-scheme verwenden, um das Icon für helle und dunkle Themen zu aktualisieren. Für mehr Informationen siehe "page_action" "default_icon" und das themed-icons Beispiel.

Hinweis: Ein impliziter CSS-Filter wird auf SVG-Icons in dunklen UI-Themen angewendet. Dieser Filter wird in Firefox Desktop Version 152 (Firefox Bug 2016509) deaktiviert. Sie können SVG-Icons mit dem deaktivierten CSS-Filter testen, indem Sie eine boolesche about:config-Präferenz namens extensions.webextensions.pageActionIconDarkModeFilter.enabled erstellen und auf false setzen. Der Filter ist standardmäßig in Firefox Desktop Nightly ab Version 149 deaktiviert.

Für Einzelheiten zur Erstellung von Icons für Ihre Seitenaktion siehe Ikonographie in der Acorn Design System Dokumentation.

Beispiele

Das webextensions-examples Repository auf GitHub enthält das:

chill-out Beispiel, welches eine Seitenaktion ohne Popup implementiert.
themed-icons Beispiel, welches zeigt, wie ein SVG-Seitenaktions-Symbol auf die hellen und dunklen Themen in der Benutzeroberfläche des Browsers reagieren 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