Komponenten der Benutzeroberfläche

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

  • Ein Bild des Elements (falls zutreffend).
  • Eine Beschreibung des Zwecks.
  • Verwandte Benutzeroberflächenelemente (falls zutreffend).
  • Links zu Implementierungsanleitungen und Codebeispielen.

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

Aktionen

Eine Aktion ist das, was passiert, wenn ein Nutzer auf das Aktionssymbol für Ihre Erweiterung klickt. Eine Aktion kann entweder eine Erweiterungsfunktion aufrufen über die Action API oder ein Pop-up-Fenster öffnen, in dem Nutzer mehrere Erweiterungsfunktionen aufrufen können. Informieren Sie Nutzer über eine Kurzinfo darüber, 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-Fenster.

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

Sie können dem Symbol auch ein Label hinzufügen, das hier als „Badge“ bezeichnet wird, um beispielsweise den Erweiterungsstatus anzugeben oder darauf hinzuweisen, dass Nutzer Aktionen ausführen müssen.

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 anzugeben oder darauf hinzuweisen, dass Nutzer Aktionen ausführen müssen. Sie können den Text des Badges mit chrome.action.setBadgeText() und die Bannerfarbe mit chrome.action.setBadgeBackgroundColor() festlegen.

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

Informationen zum Erstellen einer Aktion finden Sie unter Aktion implementieren oder im Beispiel „Drink water“.

Befehle

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

Kontextmenü

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

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 in der Omnibox von der Erweiterung definierte Keywords eingibt, steuert Ihre Erweiterung, was der Nutzer in der Omnibox sieht. Definieren Sie Keywords in der Datei manifest.json und reagieren Sie darauf mit der Omnibox API.

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 schnelle API-Referenz.

Überschreibungsseiten

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 Überschreibungsbeispiel.

Pop-ups

Ein Pop-up-Fenster 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 chrome.action.openPopup().

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

Informationen zum Erstellen eines Pop-up-Fensters finden Sie unter Pop-up-Fenster hinzufügen. Sie können auch eine der Aktionsbeispiele durchgehen.

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 mit der Side Panel API gesteuert.

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

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

Kurzinfos

Eine Kurzinfo ist eine Möglichkeit, anzuzeigen, was die Aktion Ihrer Erweiterung bewirkt, wenn ein Nutzer mit der Maus 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 einer Kurzinfo finden Sie unter dem Mitglied "default_title" des Schlüssels "action" der Manifestdateien.

DevTools

Mit der DevTools Panels API können Sie den Entwicklertools benutzerdefinierte Bereiche (die in den Entwicklertools als Tabs bezeichnet werden) hinzufügen. Mit anderen Entwicklertools APIs können Sie Fenster und Netzwerkverkehr überwachen. Sie können auch den Bereich „Recorder“ der Entwicklertools anpassen. Der Lighthouse-Bereich der Chrome-Entwicklertools war ursprünglich eine Erweiterung für die Entwicklertools.

Benachrichtigungen

Sie können Nachrichten an die Taskleiste eines Nutzers senden. Verwenden Sie dazu entweder die Notifications API für Erweiterungen Notifications API oder die Notifications API für Webplattformen Notifications API.

Eine Erweiterungsbenachrichtigung auf einem Mac.
Abbildung 10: Eine Erweiterungsbenachrichtigung unter macOS.

Informationen zur Verwendung von Benachrichtigungen finden Sie unter Nutzer benachrichtigen.

Designs

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

Abbildung 11: Beispiel für ein Design.

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. 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 absolut notwendig, um die Erweiterung verwenden zu können.

Bedienungshilfen

Für viele Nutzer ist die Bedienungshilfe die Benutzeroberfläche. Die Funktionen können auch für Nutzer nützlich sein, die Bedienungshilfen nicht als primäres Mittel zur Interaktion mit Ihrer Erweiterung benötigen. Hier finden Sie die Grundlagen zur Barrierefreiheit Ihrer Erweiterung.

Internationalisierung

Sprechen Sie Nutzer in ihrer eigenen Sprache an. Informationen zum Internationalisieren der Benutzeroberfläche