Komponenten der Benutzeroberfläche

Dies ist ein Katalog mit Elementen der Benutzeroberfläche, die in Erweiterungen verfügbar sind. Jeder Eintrag enthält Folgendes:

  • Ein Bild des Elements (falls zutreffend).
  • Eine Beschreibung des Zwecks.
  • Zugehörige Elemente der Benutzeroberfläche (falls zutreffend).
  • Links zu Implementierungsanleitungen und Codebeispielen.

Diese Elemente stellen verschiedene Möglichkeiten zum Aufrufen von Erweiterungsfunktionen dar. Sie müssen nicht alle implementieren. In manchen Anwendungsfällen werden sie sogar gar nicht eingesetzt. Ein kürzerer Link könnte beispielsweise mithilfe einer Tastenkombination auf die angezeigte URL reagieren und den gekürzten Link programmatisch in die Zwischenablage einfügen.

Aktionen

Eine Aktion ist das, was geschieht, wenn ein Nutzer auf das Aktionssymbol für die Erweiterung klickt. Eine Aktion kann entweder eine Erweiterungsfunktion über die Action API aufrufen oder ein Pop-up öffnen, mit dem Nutzer mehrere Erweiterungsfunktionen aufrufen können. Teilen Sie den Nutzern mithilfe einer Kurzinfo mit, 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

Eine Erweiterung benötigt mindestens ein Symbol, um sie zu repräsentieren. Nutzer klicken auf das Symbol, um eine Aktion aufzurufen, unabhängig davon, ob damit über die Action API eine Erweiterungsfunktion aufgerufen oder ein Pop-up geöffnet wird.

Das Symbol für die Wörterbucherweiterung von Google.
Abbildung 2: Symbol für die Google-Wörterbucherweiterung (in Rot).

Sie können dem Symbol auch ein Label, das sogenannte „Badge“, hinzufügen, um beispielsweise den Erweiterungsstatus oder Nutzeraktionen zu kennzeichnen.

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

Badges

Badges sind formatierter Text, der über dem Aktionssymbol platziert wird, um beispielsweise den Erweiterungsstatus oder Aktionen des Nutzers anzuzeigen. Sie können den Text des Logos festlegen, indem Sie chrome.action.setBadgeText() aufrufen. Die Bannerfarbe legen Sie mit chrome.action.setBadgeBackgroundColor() fest.

Ein Erweiterungssymbol ohne Badge, jedoch mit Badge.
Abbildung 3: Erweiterungssymbol ohne Symbol (links) und mit Logo (rechts)

Informationen zum Erstellen einer Aktion finden Sie unter Eine Aktion implementieren oder in der Beispielprobe Wasser trinken.

Befehle

Befehle sind Tastenkombinationen, die eine Erweiterungsfunktion aufrufen. Definieren Sie Schlüsselkombinationen in der Datei „manifest.json“ und antworten Sie mit der Commands API. Informationen zum Implementieren eines Befehls finden Sie in der API-Referenz oder im chrome.commands-Beispiel.

Kontextmenü

Für den alternativen Klick (häufig auch Rechtsklick genannt) einer Maus wird ein Kontextmenü angezeigt. Sie können Kontextmenüs mit der Context Menus API definieren.

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

Informationen zum Implementieren eines Kontextmenüs finden Sie in den Beispielen für das Kontextmenü.

Omnibox

Sie können über die Chrome-Omnibox mit Nutzern interagieren. Wenn ein Nutzer erweiterungsdefinierte Suchbegriffe in die Omnibox eingibt, steuert die Erweiterung, was der Nutzer in der Omnibox sieht. Definieren Sie Keywords in manifest.json und antworten Sie mit der Omnibox API darauf.

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

Informationen zum Überschreiben der Omnibox finden Sie im Abschnitt zum Auslösen von Aktionen über die Omnibox oder im Beispiel Quick API-Referenz.

Seiten überschreiben

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

  • Verlauf
  • Neuer Tab
  • Lesezeichen
Ein 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 Beispiel zum Überschreiben.

Pop-ups

Ein Pop-up ist eine Aktion, die ein Fenster anzeigt, in dem Nutzer mehrere Erweiterungsfunktionen aufrufen können. Pop-ups können nur geöffnet werden, wenn der Nutzer auf das Aktionssymbol klickt. Das Pop-up einer Erweiterung kann das Pop-up nicht programmatisch öffnen.

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

Informationen zum Erstellen von Pop-ups finden Sie unter Pop-ups hinzufügen. Sie können auch eines der Aktionsbeispiele herunterladen.

Seitenleisten

Über eine Seitenleiste können Nutzer Erweiterungsfunktionen neben Webseiten aufrufen (siehe Abbildung). Eine Seitenleiste kann mit einem einzelnen Tab oder einem ganzen Fenster verbunden werden. Eine Seitenleiste wird mit der Side Panel API gesteuert.

Wörterbucherweiterung mit Definition des Wortes
Abbildung 8: Wörterbucherweiterung mit der Definition des Wortes „Erweiterungen“

Informationen zum Erstellen einer Seitenleiste finden Sie in den Anwendungsfällen für Seitenleisten oder in den Beispielen für Seitenleisten.

Kurzinfos

In einer Kurzinfo sehen Sie, was die Aktion Ihrer Erweiterung bewirkt, wenn ein Nutzer die Maus auf Ihr Aktionssymbol bewegt. Standardmäßig wird in der Kurzinfo der Name der Erweiterung angezeigt.

Beispielkurzinfo für ein Aktionssymbol.
Abbildung 9: Eine Beispielkurzinfo für ein Aktionssymbol.

Wenn Sie erfahren möchten, wie Sie eine Kurzinfo hinzufügen, verwenden Sie das Element "default_title" des "action"-Schlüssels für Manifestdateien.

DevTools

Mit der DevTools Panels API kannst du den Entwicklertools benutzerdefinierte Bereiche (sogenannte Tabs in den Entwicklertools) hinzufügen. Mit anderen Entwicklertools-APIs kannst du Fenster und Netzwerkverkehr überwachen. Sie können auch den Rekorder-Bereich der Entwicklertools anpassen. Der Lighthouse-Bereich der Chrome-Entwicklertools wurde als Erweiterung für die Entwicklertools eingeführt.

Benachrichtigungen

Sie können Nachrichten in der Taskleiste des Nutzers posten. Dazu können Sie entweder die Notifications API der Erweiterungen oder die Notifications API der Webplattformen verwenden.

Auf dem Mac über eine Erweiterungsbenachrichtigung
Abbildung 10: Eine Erweiterungsbenachrichtigung auf einem Mac.

Weitere Informationen zur Verwendung von Benachrichtigungen finden Sie unter Nutzer benachrichtigen.

Themen

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

Ein Beispielthema.
Abbildung 11: Ein Beispielthema.

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

Andere Möglichkeiten der Interaktion mit Nutzern

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

Barrierefreiheit

Für viele Nutzer ist Barrierefreiheit im wahrsten Sinne des Wortes die Benutzeroberfläche. Die entsprechenden Funktionen sind oft nützlich für diejenigen, die keine Barrierefreiheit als primäres Mittel zur Interaktion mit Ihrer Erweiterung benötigen. Informationen zu den Grundlagen, um Ihre Erweiterung zugänglich zu machen

Internationalization

Sprechen Sie Nutzer in ihrer eigenen Sprache an. Internationalisierung der Schnittstelle