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.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/pinned-unpinned.png?authuser=6&hl=de)
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.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/icon.png?authuser=6&hl=de)
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.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/badges.png?authuser=6&hl=de)
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ü](https://developer.chrome.com/static/docs/extensions/develop/ui/image/context-menu-nested.png?authuser=6&hl=de)
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.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/omnibox.png?authuser=6&hl=de)
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.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/custom-history.png?authuser=6&hl=de)
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.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/popup.png?authuser=6&hl=de)
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](https://developer.chrome.com/static/docs/extensions/develop/ui/image/dictionary-side-panel.png?authuser=6&hl=de)
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.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/tooltip.png?authuser=6&hl=de)
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](https://developer.chrome.com/static/docs/extensions/develop/ui/image/mac-os-notification.png?authuser=6&hl=de)
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.](https://developer.chrome.com/static/docs/extensions/develop/ui/image/themes.png?authuser=6&hl=de)
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