Entwickeln
Nachdem Sie den Abschnitt Erste Schritte gelesen haben, verwenden Sie diesen Leitfaden als Überblick über Erweiterungskomponenten, ihre Funktionen in Manifest V3 und wie sie miteinander kombiniert werden können. Machen Sie sich zunächst mit den Funktionen von Erweiterungen vertraut: Im Abschnitt zu den Kernkonzepten erfahren Sie, wie Sie diese Funktionen kombinieren können.
Benutzeroberfläche entwerfen
Die meisten Erweiterungen funktionieren nur, wenn eine Nutzerinteraktion stattfindet. Die Erweiterungsplattform bietet eine Vielzahl von Möglichkeiten, Interaktionen zu Ihrer Erweiterung hinzuzufügen. Dazu gehören Pop-ups, die über die Chrome-Symbolleiste ausgelöst werden, Seitenleisten, Kontextmenüs und mehr.
Seitenleiste
Mit der
chrome.sidePanel
API kannst du Inhalte in der Seitenleiste des Browsers neben dem Hauptinhalt einer Webseite hosten.
Aktion
Steuern Sie, wie das Symbol einer Erweiterung in der Symbolleiste angezeigt wird.
Menüs
Elemente zum Kontextmenü von Google Chrome hinzufügen
![](https://developer.chrome.com/static/docs/extensions/develop/images/develop-ui-sidepanel.png?authuser=6&%3Bhl=de&hl=de)
Browser steuern
Mit den Erweiterungs-APIs von Chrome können Sie die Funktionsweise Ihres Browsers ändern.
Chrome-Seiten und -Einstellungen überschreiben
Mit Einstellungsüberschreibungen können Erweiterungen ausgewählte Chrome-Einstellungen überschreiben. Außerdem können Erweiterungen mithilfe von HTML-Überschreibungen von Seiten eine Seite ersetzen, die Google Chrome normalerweise zur Verfügung stellt. Eine Erweiterung kann den Lesezeichen-Manager, den Tab „Verlauf“ oder den neuen Tab überschreiben.
Entwicklertools erweitern
Mit Entwicklertools-Erweiterungen ergänzen Sie zusätzliche Funktionen in den Chrome-Entwicklertools. Dazu greifen Sie über eine der Erweiterung hinzugefügte Entwicklertools-Seite auf Entwicklertools-spezifische Erweiterungs-APIs zu. Sie können auch die
chrome.debugger
API verwenden, um das Remote-Debugging-Protokoll von Chrome aufzurufen. Fügen Sie einen Anhang zu einem oder mehreren Tabs hinzu, um die Netzwerkinteraktion zu instrumentieren, JavaScript-Fehler zu beheben, das DOM zu ändern und vieles mehr.
Benachrichtigungen anzeigen
Mit der
chrome.notifications
API können Sie Benachrichtigungen mithilfe von Vorlagen erstellen und Nutzern diese Benachrichtigungen in der Taskleiste des Nutzers anzeigen.
Verlauf verwalten
Verwenden Sie die
chrome.history
API, um mit dem Browser-Datensatz zu besuchten Seiten zu interagieren, und die chrome.browsingData
API, um andere Browserdaten zu verwalten. Verwenden Sie chrome.topSites
, um auf die am häufigsten besuchten Websites zuzugreifen.
Tabs und Fenster steuern
Verwenden Sie APIs wie
chrome.tabs
, chrome.tabGroups
und chrome.windows
, um den Browser des Nutzers zu erstellen, zu ändern und einzurichten.
Tastenkombinationen hinzufügen
Mit der
chrome.commands
API können Sie Tastenkombinationen hinzufügen, die Aktionen in Ihrer Erweiterung auslösen. Sie können beispielsweise eine Verknüpfung zum Öffnen der Browseraktion hinzufügen oder einen Befehl an die Erweiterung senden.
Nutzer authentifizieren
Verwende die
chrome.identity
API, um OAuth 2.0-Zugriffstokens abzurufen.
Erweiterungen verwalten
Mit der
chrome.management
API können Sie die Liste der installierten und ausgeführten Erweiterungen verwalten. Dies ist besonders nützlich für Erweiterungen, die die integrierte Seite „Neuer Tab“ überschreiben.
Vorschläge machen
Mit der
chrome.omnibox
API können Sie ein Keyword mit der Omnibox (Adressleiste) von Google Chrome registrieren.
Chrome-Einstellungen aktualisieren
Mit der
chrome.privacy
API können Sie die Nutzung von Funktionen in Chrome steuern, die sich auf die Privatsphäre der Nutzer auswirken können. Informationen zum Verwalten der Proxy-Einstellungen von Chrome finden Sie auch über die chrome.proxy
API.
Downloads verwalten
Mit der
chrome.downloads
API können Sie Downloads programmatisch initiieren, überwachen, bearbeiten und suchen.
Lesezeichen und die Leseliste verwenden
Mit der
chrome.bookmarks
API und der chrome.readingList
API können Sie diese Listen erstellen, organisieren und anderweitig bearbeiten.
Das Web steuern
Sie können damit den Inhalt und das Verhalten von Webseiten dynamisch ändern. Sie können das Web steuern und ändern, indem Sie Skripts einfügen, Netzwerkanfragen abfangen und Web-APIs für die Interaktion mit Webseiten verwenden.
JavaScript und CSS einfügen
Content-Skripts sind Dateien, die im Kontext von Webseiten ausgeführt werden. Sie verwenden das standardmäßige Document Object Model (DOM), um Details zu Webseiten zu lesen, die der Browser besucht, um Änderungen daran vorzunehmen und Informationen an die übergeordnete Erweiterung zu übergeben.
Auf aktiven Tab zugreifen
Die Berechtigung
"activeTab"
gewährt einer Erweiterung vorübergehend Zugriff auf den derzeit aktiven Tab, wenn der Nutzer die Erweiterung aufruft, z. B. durch Klicken auf ihre Aktion. Der Zugriff auf den Tab bleibt bestehen, während sich der Nutzer auf der Seite befindet, und wird widerrufen, wenn er eine andere Seite aufruft oder den Tab schließt.
Webanfragen steuern
Mit den APIs
chrome.declarativeNetRequest
, chrome.webRequest
und chrome.webNavigation
können Sie Netzwerkanfragen beobachten, blockieren und ändern.
Audio- und Bildschirmaufnahme
Verschiedene Ansätze zum Aufzeichnen von Audio und Video aus einem Tab, Fenster oder Bildschirm mit Webplattform-APIs wie
chrome.tabCapture
oder getDisplayMedia()
Website-Einstellungen ändern
Mit der
chrome.contentSettings
API können Sie festlegen, ob Websites Funktionen wie Cookies, JavaScript und Plug-ins verwenden dürfen. Allgemein gesagt, können Sie über die Inhaltseinstellungen das Verhalten von Chrome auf Website-Basis statt global anpassen.
Wichtige Konzepte
Mithilfe von Webplattform- und Erweiterungs-APIs können Sie komplexere Funktionen erstellen, indem Sie verschiedene Benutzeroberflächenkomponenten und Funktionen der Erweiterungsplattform kombinieren.
Service Worker
Ein Extension Service Worker (service-worker.js) ist ein ereignisbasiertes Skript, das im Hintergrund im Browser ausgeführt wird. Sie wird häufig verwendet, um Daten zu verarbeiten, Aufgaben in verschiedenen Teilen einer Erweiterung zu koordinieren und als Ereignismanager einer Erweiterung zu verwenden.
Berechtigungen
Verstehen Sie Berechtigungen: wie sie funktionieren und wann Sie nicht nach ihnen fragen sollten, wenn sie nicht benötigt werden.
Filter für Inhalte
Es gibt verschiedene Möglichkeiten, Inhalts- und Netzwerkfilter in Chrome-Erweiterungen zu implementieren. Hier erfahren Sie mehr über die Funktionen zur Inhaltsfilterung in Erweiterungen und die verschiedenen Filteransätze, -techniken und -APIs, die von Chrome-Erweiterungen verwendet werden können.
Kommunikation
Häufig müssen Inhaltsskripte oder andere Erweiterungsseiten Informationen an den Extension Service Worker senden oder von diesem empfangen. In diesen Fällen kann jede Seite auf Nachrichten warten, die von der anderen Seite gesendet werden, und auf demselben Kanal antworten.
Natives Messaging
Aktivieren Sie Ihre Erweiterungen für den Austausch von Nachrichten mit nativen Anwendungen.
Remote gehosteten Code vermeiden
In Manifest V3 müssen Erweiterungen den gesamten von ihnen verwendeten Code innerhalb der Erweiterung selbst bündeln. Dafür gibt es verschiedene Strategien.
Speicher
Chrome-Erweiterungen haben eine spezielle Storage API, die für alle Erweiterungskomponenten verfügbar ist. Sie umfasst vier separate Speicherbereiche für bestimmte Anwendungsfälle und einen Event-Listener, der immer die Aktualisierung von Daten verfolgt.
Nicht sichtbare Dokumente
Service Worker haben keinen DOM-Zugriff. Mit der Offscreen API kann die Erweiterung DOM-APIs in einem verborgenen Dokument verwenden, ohne die Nutzererfahrung durch das Öffnen neuer Fenster oder Tabs zu unterbrechen.
Ursprungsübergreifende Isolierung
Mit der ursprungsübergreifenden Isolierung kann eine Webseite leistungsstarke Funktionen wie
SharedArrayBuffer
nutzen. Für eine Erweiterung kann die ursprungsübergreifende Isolierung aktiviert werden, indem die entsprechenden Werte für die Manifestschlüssel "cross_origin_embedder_policy"
und "cross_origin_opener_policy"
angegeben werden.