Komponenten der Benutzeroberfläche

Dies ist ein Katalog von Benutzeroberflächenelementen, die in Erweiterungen verfügbar sind. Jeder Eintrag enthält:

  • Ein Bild des Elements (falls zutreffend).
  • Eine Beschreibung, wofür sie verwendet wird.
  • Zugehörige Benutzeroberflächenelemente (falls zutreffend).
  • Links zu Implementierungsanleitungen und Codebeispielen

Diese Elemente sind verschiedene Möglichkeiten, Erweiterungsfunktionen aufzurufen. Sie müssen nicht alle implementieren. Tatsächlich werden in einigen Anwendungsfällen möglicherweise keine dieser APIs verwendet. Ein Link-Shortener könnte beispielsweise über eine Tastenkombination auf die angezeigte URL zugreifen und den gekürzten Link programmatisch in die Zwischenablage kopieren.

Aktionen

Eine Aktion wird ausgeführt, wenn ein Nutzer auf das Aktionssymbol für Ihre Erweiterung klickt. Eine Aktion kann entweder über die Action API eine Erweiterungsfunktion aufrufen oder ein Pop-up öffnen, über das Nutzer mehrere Erweiterungsfunktionen aufrufen können. Erklären Sie den Nutzern mit einer Kurzinfo, was die Aktion bewirkt.

Sowohl eine angepinnte als auch eine nicht angepinnte Erweiterung.
Abbildung 1: Angepinnte (links) und nicht angepinnte (rechts) Erweiterungen.

Informationen zum Erstellen einer Aktion finden Sie unter Aktion implementieren oder in den Aktionsbeispielen.

Aktionssymbole

Für eine Erweiterung ist mindestens ein Symbol erforderlich. Nutzer klicken auf das Symbol, um eine Aktion aufzurufen. Diese Aktion ruft entweder eine Erweiterungsfunktion über die Action API auf oder öffnet ein Pop-up.

Symbol für die Google-Wörterbucherweiterung
Abbildung 2: Symbol für die Google-Wörterbucherweiterung (rot).

Sie können dem Symbol auch ein Label hinzufügen, das hier als „Badge“ bezeichnet wird, um beispielsweise den Erweiterungsstatus oder erforderliche Nutzeraktionen anzugeben.

Informationen zum Erstellen einer Aktion finden Sie unter Aktion implementieren oder in den Aktionsbeispielen.

Badges

Badges sind formatierte Textteile, die über dem Aktionssymbol platziert werden, um beispielsweise den Erweiterungsstatus oder erforderliche Nutzeraktionen anzugeben. Sie können den Text des Logos mit browser.action.setBadgeText() und die Bannerfarbe mit browser.action.setBadgeBackgroundColor() festlegen.

Ein Erweiterungssymbol ohne und mit Badge.
Abbildung 3: Ein Erweiterungssymbol ohne (links) und mit (rechts) Badge.

Informationen zum Erstellen einer Aktion finden Sie unter Aktion implementieren oder im Beispiel „Wasser trinken“.

Befehle

Befehle sind Tastenkombinationen, mit denen eine Erweiterungsfunktion aufgerufen wird. Definieren Sie Tastenkombinationen in der Datei „manifest.json“ und reagieren Sie mit der Commands API darauf. Informationen zum Implementieren eines Befehls finden Sie in der API-Referenz oder im browser.commands-Beispiel.

Kontextmenü

Es wird ein Kontextmenü für den alternativen Klick (häufig als Rechtsklick bezeichnet) einer Maus angezeigt. Kontextmenüs mit der Context Menus API definieren

Ein verschachteltes Kontextmenü.
Abbildung 4: Ein Kontextmenü und ein verschachteltes Untermenü.

Informationen zum Implementieren eines Kontextmenüs finden Sie in den Kontextmenü-Beispielen.

Omnibox

Sie können über die Chrome-Omnibox mit Nutzern interagieren. Wenn ein Nutzer von der Erweiterung definierte Keywords in die Omnibox eingibt, bestimmt Ihre Erweiterung, was der Nutzer in der Omnibox sieht. Definieren Sie Keywords in der Datei manifest.json und reagieren Sie mit der Omnibox API darauf.

Die Omnibox des Browsers.
Abbildung 5: Die Omnibox des Browsers.

Informationen zum Überschreiben der Omnibox finden Sie unter Aktionen über die Omnibox auslösen oder im Beispiel für die API-Kurzreferenz.

Seiten überschreiben

Eine Erweiterung kann eine der folgenden integrierten Chrome-Seiten überschreiben:

  • Verlauf
  • Neuer Tab
  • Lesezeichen
Beispiel für eine benutzerdefinierte Verlaufsseite
Abbildung 6: Beispiel für eine benutzerdefinierte Verlaufsseite

Informationen zum Überschreiben von Chrome-Seiten finden Sie unter Chrome-Seiten überschreiben oder im Überschreiben-Beispiel.

Pop-ups

Ein Pop-up ist eine Aktion, bei der ein Fenster angezeigt wird, in dem Nutzer mehrere Erweiterungsfunktionen aufrufen können. Pop-ups können geöffnet werden, wenn der Nutzer auf das Aktionssymbol klickt, über eine Tastenkombination oder durch Aufrufen von browser.action.openPopup().

Beispiel für ein Pop-up
Abbildung 7: Beispiel für ein Pop-up

Informationen zum Erstellen eines Pop‑ups finden Sie unter Pop‑up hinzufügen. Sie können einen Schritt auch über eines der Aktionsbeispiele herunterladen.

Seitenleisten

Über eine Seitenleiste können Nutzer Erweiterungsfunktionen neben Webseiten aufrufen (siehe Abbildung). Eine Seitenleiste kann an einen einzelnen Tab oder an ein ganzes Fenster angehängt werden. Eine Seitenleiste wird über die Side Panel API gesteuert.

Wörterbucherweiterung, die das Wort definiert
Abbildung 8: Wörterbucherweiterung, die das Wort „Erweiterungen“ definiert.

Informationen zum Erstellen einer Seitenleiste finden Sie unter Anwendungsfälle für Seitenleisten oder in den Seitenleistenbeispielen.

Kurzinfos

Eine Kurzinfo ist eine Möglichkeit, zu zeigen, was die Aktion Ihrer Erweiterung bewirkt, wenn ein Nutzer den Mauszeiger auf das Aktionssymbol bewegt. Standardmäßig wird in der Kurzinfo der Name der Erweiterung angezeigt.

Beispiel für eine Kurzinfo für ein Aktionssymbol.
Abbildung 9: Beispiel für eine Kurzinfo für ein Aktionssymbol.

Informationen zum Hinzufügen eines Tooltips finden Sie im "default_title"-Element des Manifestschlüssels "action".

Entwicklertools

Mit der DevTools Panels API können Sie benutzerdefinierte Bereiche (die Tabs in den Entwicklertools) hinzufügen. Mit anderen Entwicklertools-APIs können Sie Fenster und Netzwerkverkehr überwachen. Sie können auch das Recorder-Panel in den DevTools anpassen. Der eigene Lighthouse-Bereich der Chrome-Entwicklertools begann als DevTools-Erweiterung.

Benachrichtigungen

Nachrichten in der Taskleiste eines Nutzers posten – entweder über die Notifications API für Erweiterungen oder die Notifications API für Webplattformen.

Eine Erweiterungsbenachrichtigung auf einem Mac.
Abbildung 10: Benachrichtigung einer Erweiterung auf einem Mac.

Informationen zur Verwendung von Benachrichtigungen finden Sie unter Nutzer benachrichtigen.

Designs

Ein Design ist eine spezielle Art von Erweiterung, die das Aussehen des Browsers verändert. Designs werden wie normale Erweiterungen verpackt, enthalten aber keinen JavaScript- oder HTML-Code.

Abbildung 11: Beispiel für ein Thema.

Informationen zum Erstellen eines Designs finden Sie unter Was sind Designs?.

Weitere Möglichkeiten zur Interaktion mit Nutzern

In diesem Abschnitt werden weitere Möglichkeiten beschrieben, wie Ihre Erweiterung mit Nutzern interagieren kann. Sie sind zwar für eine einfache Erweiterung nicht unbedingt erforderlich, können aber wichtige Bestandteile Ihrer Erweiterung sein. Für viele Nutzer sind einige dieser Funktionen für die Nutzung der Erweiterung unerlässlich.

Bedienungshilfen

Für viele Nutzer ist die Barrierefreiheit die Benutzeroberfläche selbst. Die Funktionen können oft auch für Nutzer nützlich sein, die nicht primär auf Barrierefreiheit angewiesen sind, um mit Ihrer Erweiterung zu interagieren. Grundlagen zur Barrierefreiheit von Erweiterungen

Internationalisierung

Sprechen Sie Nutzer in ihrer eigenen Sprache an. Informationen zur Internationalisierung der Benutzeroberfläche