Diese Seite wurde von der Cloud Translation API übersetzt.

Erweiterung „Hello World“

Machen Sie sich mit den Grundlagen der Entwicklung von Chrome-Erweiterungen vertraut, indem Sie Ihre erste Hello World-Erweiterung erstellen.

Übersicht

Sie erstellen eine „Hello World“- Erweiterung lokal laden, Protokolle finden und weitere Empfehlungen ansehen.

Hallo Welt

Mit dieser Erweiterung wird „Hello Extensions“ angezeigt, wenn der Nutzer auf das Symbol der Erweiterung in der Symbolleiste klickt.

Erstellen Sie zuerst ein neues Verzeichnis, um Ihre Erweiterungsdateien zu speichern. Wenn Sie möchten, können Sie die vollständige Quellcode von GitHub bereit.

Erstellen Sie als Nächstes in diesem Verzeichnis eine neue Datei mit dem Namen manifest.json. Diese JSON-Datei beschreibt die Funktionen und Konfiguration. So enthalten beispielsweise die meisten Manifestdateien einen "action"-Schlüssel, der Folgendes deklariert: Das Bild, das Chrome als Aktionssymbol der Erweiterung verwenden soll, und die HTML-Seite, die in einem Pop-up-Fenster angezeigt wird, wenn das das Aktionssymbol der Erweiterung angeklickt wird.

{
  "manifest_version": 3,
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

Laden Sie das Symbol in Ihr Verzeichnis herunter. Ändern Sie seinen Namen entsprechend dem Namen im Schlüssel "default_icon".

Erstellen Sie für das Pop-up-Fenster eine Datei mit dem Namen hello.html und fügen Sie den folgenden Code hinzu:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

Die Erweiterung zeigt jetzt ein Pop-up-Fenster an, wenn auf das Aktionssymbol der Erweiterung (Symbolleistensymbol) geklickt wird. Sie können indem Sie sie lokal laden. Achten Sie darauf, dass alle Dateien gespeichert sind.

Entpackte Erweiterung laden

So laden Sie eine entpackte Erweiterung im Entwicklermodus:

Rufe die Seite „Erweiterungen“ auf, indem du in einem neuen Tab chrome://extensions eingibst. chrome:// URLs sind standardmäßig nicht verknüpfbar.
- Alternativ kannst du auch auf die Puzzle-Schaltfläche für das Menü „Erweiterungen“ klicken und unten im Menü Erweiterungen verwalten auswählen.
- Alternativ können Sie auf das Chrome-Menü klicken, den Mauszeiger auf Weitere Tools bewegen und dann Erweiterungen auswählen.
Aktivieren Sie den Entwicklermodus, indem Sie auf den Umschalter neben Entwicklermodus klicken.
Klicken Sie auf die Schaltfläche Entpackt laden und wählen Sie das Erweiterungsverzeichnis aus. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Seite „Erweiterungen“ (chrome://extensions)

Ta da! Die Erweiterung wurde installiert. Wenn keine Erweiterungssymbole in Manifest erstellen, wird ein generisches Symbol für die Erweiterung erstellt.

Erweiterung anpinnen

Wenn Sie Ihre Erweiterung lokal laden, wird sie standardmäßig im Erweiterungsmenü () angezeigt. Sie können Ihre Erweiterung an die Symbolleiste anpinnen, um während der Entwicklung schnell darauf zugreifen zu können.

Klicken Sie auf das Aktionssymbol der Erweiterung (Symbolleiste). sollten Sie ein Pop-up sehen.

Erweiterung aktualisieren

Kehren Sie zum Code zurück und ändern Sie den Namen der Erweiterung in "Hello Extensions of the world!". im Manifest.

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

Nach dem Speichern der Datei müssen Sie auch die Erweiterung aktualisieren, damit diese Änderung im Browser angezeigt wird. Los auf der Seite "Erweiterungen" und klicken Sie neben der Ein/Aus-Schaltfläche An/Aus auf das Symbol zum Aktualisieren:

Erweiterung aktualisieren

Wann die Erweiterung neu geladen werden soll

In der folgenden Tabelle sehen Sie, welche Komponenten neu geladen werden müssen, damit Änderungen angezeigt werden:

Erweiterungskomponente	Erweiterung muss aktualisiert werden
Das Manifest	Ja
Service Worker	Ja
Inhaltsskripte	Ja (plus die Hostseite)
Das Pop-up	Nein
Seite „Optionen“	Nein
Andere HTML-Seiten der Erweiterung	Nein

Konsolenprotokolle und Fehler suchen

Konsolenlogs

Während der Entwicklung können Sie Ihren Code debuggen, indem Sie auf die Konsolenprotokolle des Browsers zugreifen. In diesem Fall sucht nach den Logs für das Pop-up-Fenster. Fügen Sie hello.html zuerst ein Script-Tag hinzu.

<html>
  <body>
    <h1>Hello Extensions</h1>
    <script src="popup.js"></script>
  </body>
</html>

Erstellen Sie eine popup.js-Datei und fügen Sie den folgenden Code hinzu:

console.log("This is a popup!")

So rufen Sie diese Meldung in der Konsole auf:

Öffnen Sie das Pop-up-Fenster.
Klicken Sie mit der rechten Maustaste auf das Pop-up-Fenster.
Wählen Sie die Option Inspect (Untersuchen) aus. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Ein Pop-up wird geprüft.
Rufen Sie in den DevTools den Bereich Console auf. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Pop-ups prüfen

Fehlerlogs

Machen wir nun die Erweiterung kaputt. Entfernen Sie dazu das schließende Anführungszeichen in popup.js:

console.log("This is a popup!) // ❌ broken code

Rufen Sie die Seite „Erweiterungen“ auf und öffnen Sie das Pop-up-Fenster. Die Schaltfläche Fehler wird angezeigt.

Seite für Erweiterungen mit Fehlerschaltfläche

Klicken Sie auf die Schaltfläche Fehler, um mehr über den Fehler zu erfahren:

Details zu Erweiterungsfehlern

Weitere Informationen zum Debuggen des Service Workers, der Seite "Optionen" und der Inhaltsskripte finden Sie unter Debugging .

Erweiterungsprojekt strukturieren

Es gibt viele Möglichkeiten, ein Erweiterungsprojekt zu strukturieren. Die einzige Voraussetzung ist jedoch, Manifest.json im Stammverzeichnis der Erweiterung wie im folgenden Beispiel:

Der Inhalt eines Erweiterungsordners: „manifest.json“, „background.js“, „Scripts-Ordner“, „Pop-up-Ordner“ und „Images“.

TypeScript verwenden

Wenn Sie mit einem Code-Editor wie VSCode oder Atom entwickeln, können Sie die Methode „npm“ verwenden. chrome-types verpacken, um die automatische Vervollständigung für den Chrome-Browser API erstellen. Dieses npm-Paket wird automatisch aktualisiert, wenn der Chromium-Quellcode Änderungen.

🚀 Bereit, mit dem Bauen zu beginnen?

Wählen Sie eine der folgenden Anleitungen aus, um den Lernpfad zu Erweiterungen zu beginnen.

Erweiterung	Lerninhalte
Skripts auf jeder Seite ausführen	Um ein Element automatisch auf jeder Seite einzufügen
Skripts in den aktiven Tab einfügen	Nach dem Klicken auf die Erweiterungsaktion wird der Code auf der aktuellen Seite ausgeführt.
Tabs verwalten	Zum Erstellen eines Pop-ups, über das Browsertabs verwaltet werden.
Ereignisse mit Service Workern verarbeiten	So verarbeitet ein Erweiterungs-Service-Worker Ereignisse.