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](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/hello-extension-6e3eacba176d3.png?authuser=6&hl=de)
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:
- 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.
- Aktivieren Sie den Entwicklermodus, indem Sie auf die Ein-/Aus-Schaltfläche neben Entwicklermodus klicken.
- Klicken Sie auf die Schaltfläche Entpackt laden und wählen Sie das Verzeichnis der Erweiterung aus.
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ü () angezeigt. Hefte deine Erweiterung an die Symbolleiste an, um während der Entwicklung schnell auf die Erweiterung zuzugreifen.
![Erweiterung anpinnen](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/pinning-extension-215cb97773ab6.png?authuser=6&hl=de)
Klicken Sie auf das Aktionssymbol (Symbolleistensymbol) der Erweiterung. Daraufhin sollte ein Pop-up-Fenster erscheinen.
![Hello World Erweiterung](https://developer.chrome.google.cn/static/docs/extensions/get-started/tutorial/hello-world/image/hello-world-extension-27a679d21340d.png?authuser=6&hl=de)
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:
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:
- Öffnen Sie das Pop-up-Fenster.
- Klicken Sie mit der rechten Maustaste auf das Pop-up.
- Wählen Sie die Option Inspect (Untersuchen) aus.
Pop-up wird geprüft. - Rufen Sie in den DevTools den Bereich Console auf.
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.
Klicken Sie auf die Schaltfläche Fehler, um mehr über den Fehler zu erfahren:
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:
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 |