Erweiterung „Hello World“

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

Überblick

Sie erstellen ein „Hello World“-Beispiel, laden die Erweiterung lokal, suchen Logs und sehen sich weitere Empfehlungen an.

Hello World

Diese Erweiterung zeigt „Hello Extensions“ an, wenn der Nutzer auf das Symbol der Erweiterungssymbolleiste klickt.

Hello-Erweiterung
Pop-up der Erweiterung „Hello Extension“

Erstellen Sie zuerst ein neues Verzeichnis, in dem Sie Ihre Erweiterungsdateien speichern können. Wenn Sie möchten, können Sie den vollständigen Quellcode von GitHub herunterladen.

Erstellen Sie als Nächstes in diesem Verzeichnis eine neue Datei mit dem Namen manifest.json. In dieser JSON-Datei werden die Funktionen und die Konfiguration der Erweiterung beschrieben. Die meisten Manifestdateien enthalten beispielsweise einen "action"-Schlüssel, der das Bild, das Chrome als Aktionssymbol der Erweiterung verwenden soll, und die HTML-Seite angibt, die in einem Pop-up angezeigt wird, wenn auf das Aktionssymbol der Erweiterung geklickt 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 und achten Sie darauf, den Namen so zu ändern, dass er mit dem Namen im "default_icon"-Schlüssel übereinstimmt.

Erstellen Sie für das Pop-up 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 Popup-Fenster an, wenn auf das Aktionssymbol (Symbolleistensymbol) der Erweiterung geklickt wird. Sie können es in Chrome testen, indem Sie es lokal laden. Vergewissern Sie sich, dass alle Dateien gespeichert sind.

Entpackte Erweiterung laden

So laden Sie eine entpackte Erweiterung im Entwicklermodus:

  1. Rufen Sie die Seite „Erweiterungen“ auf, indem Sie in einem neuen Tab chrome://extensions eingeben. chrome://-URLs sind nicht verknüpfbar.
    • Alternativ können Sie auf das Rätselsymbol im Menü „Erweiterungen“ klicken und unten im Menü Erweiterungen verwalten auswählen.
    • Sie können auch auf das Chrome-Menü klicken, den Mauszeiger auf Weitere Tools bewegen und dann Erweiterungen auswählen.
  2. Aktivieren Sie den Entwicklermodus, indem Sie auf die Ein-/Aus-Schaltfläche neben Entwicklermodus klicken.
  3. Klicken Sie auf die Schaltfläche Entpackt laden und wählen Sie das Verzeichnis der Erweiterung aus.
    Auf der Seite „Erweiterungen“
    Seite „Erweiterungen“ (chrome://extensions)

Ta da! Die Erweiterung wurde erfolgreich installiert. Wenn das Manifest keine Erweiterungssymbole enthält, wird ein generisches Symbol für die Erweiterung erstellt.

Erweiterung anpinnen

Wenn du deine Erweiterung lokal lädst, wird sie standardmäßig im Erweiterungsmenü (Geduldsspiele) angezeigt. Hefte deine Erweiterung an die Symbolleiste an, um während der Entwicklung schnell auf die Erweiterung zuzugreifen.

Erweiterung anpinnen
Erweiterung anpinnen

Klicken Sie auf das Aktionssymbol (Symbolleistensymbol) der Erweiterung. Daraufhin sollte ein Pop-up-Fenster erscheinen.

Hello World Erweiterung
Erweiterung „Hello World“

Erweiterung aktualisieren

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

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

Damit diese Änderung im Browser angezeigt wird, müssen Sie nach dem Speichern der Datei auch die Erweiterung aktualisieren. Rufen Sie die Seite „Erweiterungen“ auf und klicken Sie auf das Aktualisierungssymbol neben der Ein-/Aus-Schaltfläche Ein/Aus:

Erweiterung aktualisieren

Wann die Erweiterung neu geladen werden soll

Die folgende Tabelle zeigt, welche Komponenten neu geladen werden müssen, um Änderungen zu sehen:

Erweiterungskomponente Erweiterung muss neu geladen werden
Das Manifest Ja
Service Worker Ja
Content-Skripts Ja (und die Hostseite)
Das Pop-up Nein
Seite „Optionen“ Nein
Andere Erweiterungs-HTML-Seiten Nein

Konsolenprotokolle und Fehler suchen

Konsolenprotokolle

Während der Entwicklung können Sie Ihren Code debuggen, indem Sie auf die Browserkonsolenprotokolle zugreifen. In diesem Fall suchen wir die Logs für das Pop-up. Fügen Sie hello.html als Erstes 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:

  1. Öffnen Sie das Pop-up-Fenster.
  2. Klicken Sie mit der rechten Maustaste auf das Pop-up.
  3. Wählen Sie die Option Inspect (Untersuchen) aus.
    Das Pop-up wird überprüft.
    Pop-up wird geprüft.
  4. Rufen Sie in den DevTools den Bereich Console auf.
    Codebereich der Entwicklertools
    Pop-up prüfen

Fehlerlogs

Jetzt wollen wir die Erweiterung zerstören. Dazu entfernen wir 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. Daraufhin wird die Schaltfläche Fehler eingeblendet.

Seite „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-Erweiterungen.

Erweiterungsprojekt strukturieren

Es gibt viele Möglichkeiten, ein Erweiterungsprojekt zu strukturieren. Die einzige Voraussetzung ist jedoch, dass die Datei "manifest.json" wie im folgenden Beispiel im Stammverzeichnis der Erweiterung abgelegt wird:

Die Inhalte eines Erweiterungsordners: „manifest.json“, „Background.js“, „Scripts“, „Pop-up-Ordner“ und „Bilder“.

TypeScript verwenden

Wenn Sie für die Entwicklung einen Code-Editor wie VSCode oder Atom verwenden, können Sie das npm-Paket chrome-types verwenden, um die automatische Vervollständigung für die Chrome API zu nutzen. Dieses npm-Paket wird automatisch aktualisiert, wenn sich der Chromium-Quellcode ändert.

🚀 Bereit, mit dem Bauen zu beginnen?

Wählen Sie eines der folgenden Anleitungen aus, um Ihre Erweiterungs-Lernreise zu beginnen.

Erweiterung Lerninhalte
Skripts auf jeder Seite ausführen So fügen Sie automatisch ein Element auf jeder Seite ein:
Skripts in den aktiven Tab einfügen Code auf der aktuellen Seite ausführen, nachdem auf die Erweiterungsaktion geklickt wurde
Tabs verwalten So erstellen Sie ein Pop-up, das Browsertabs verwaltet
Ereignisse mit Service Workern verarbeiten Verarbeitung von Ereignissen durch einen Erweiterungs-Service-Worker