Komponenten der Benutzeroberfläche

Dies ist ein Katalog der Benutzeroberflächenelemente, 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. Beispielsweise kann ein Link-Shortener über eine Tastenkombination auf die angezeigte URL zugreifen und den gekürzten Link programmatisch in die Zwischenablage einfügen.

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, indem die Action API verwendet wird, oder ein Pop-up öffnen, in dem Nutzer mehrere Erweiterungsfunktionen aufrufen können. Erklären Sie den Nutzern mithilfe 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 auf, indem die Action API verwendet wird, oder es wird ein Pop-up geöffnet.

Das Symbol für die Google Dictionary-Erweiterung.
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 Textfragmente, die über dem Aktionssymbol platziert werden, um beispielsweise den Erweiterungsstatus oder erforderliche Nutzeraktionen anzugeben. 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 (links) und mit (rechts) Badge.

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

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 chrome.commands-Beispiel.

Kontextmenü

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

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 Kurzübersicht der API.

Seiten überschreiben

Eine Erweiterung kann eine dieser 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 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.

Informationen zum Erstellen eines Pop-ups finden Sie unter Pop-up hinzufügen. Sie können einen Schritt auch über eines der Beispiele für Aktionen 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 mit der 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 mit der Maus auf das Aktionssymbol zeigt. 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 Kurzinfos finden Sie im "default_title"-Element des Manifestschlüssels "action".

Entwicklertools

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

Benachrichtigungen

Nachrichten in der Taskleiste eines Nutzers können entweder über die Notifications API für Erweiterungen oder über die Notifications API für Webplattformen gepostet werden.

Eine Erweiterungsbenachrichtigung auf einem Mac.
Abbildung 10: Benachrichtigung über eine 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.

Weitere 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 unerlässlich, um die Erweiterung nutzen zu können.

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