Das Ziel

Diese Standarderweiterung bietet Entwicklern einen Ausgangspunkt für die Erstellung ihrer eigenen Chrome-Erweiterungen mit Manifest V3.

Was ist neu

Die größte Verbesserung in dieser Version ist die Hinzufügung einer Popup-Oberfläche. Wenn Benutzer jetzt auf die Erweiterungsschaltfläche in der oberen Leiste des Browsers klicken, wird ihnen ein interaktives Popup angezeigt, anstatt nur eine Nachricht an die Konsole zu protokollieren.

Merkmale

Dieses Boilerplate demonstriert drei wichtige Erweiterungsverhalten:

1. Vor dem Laden der Seite: Drucken Sie eine Nachricht an die DevTools-Konsole, bevor die Seite geladen wird.
2. Nach dem Laden der Seite: Drucken Sie eine Nachricht an die DevTools-Konsole, bevor die Seite geladen wird.
3. Popup-Interaktion: Zeigt ein Popup an, wenn der Benutzer auf die Erweiterungsschaltfläche klickt, was komplexere Benutzerinteraktionen ermöglicht.

Die Erweiterung bietet jetzt eine Schaltfläche im Popup, die beim Klicken ein Skript in die aktive Registerkarte einfügt, um das DOM zu ändern und eine Nachricht in der Konsole zu protokollieren.

Installation

1. Klonen Sie die Dateien oder laden Sie sie von github.com/llagerlof/fresh-chrome-extension herunter und legen Sie sie in einem Verzeichnis ab.
2. Öffnen Sie die Erweiterungsseite Ihres Browsers: chrome://extensions
3. Aktivieren Sie „Entwicklermodus“ in der oberen rechten Ecke.
4. Klicken Sie auf „Load Unpacked“ und wählen Sie das Erweiterungsverzeichnis aus.

So testen Sie es

1. Öffnen Sie eine beliebige Website.
2. Klicken Sie auf die Erweiterungsschaltfläche in der oberen Leiste des Browsers. Sie sehen ein Popup mit einer Schaltfläche.
3. Klicken Sie im Popup auf die Schaltfläche „Klicken Sie auf diese Schaltfläche, um der Seite ein orangefarbenes Div hinzuzufügen“.
4. Beachten Sie die folgenden Änderungen:
   • Oben auf der Seite erscheint ein orangefarbenes Div mit der Meldung „DOM geändert!“
   • Öffnen Sie die Entwicklertools (F12) und sehen Sie sich die Konsole an. Sie sehen die Meldung „Aktion vom Popup ausgeführt!“

Dieses Boilerplate bietet eine solide Grundlage für die Erstellung komplexerer Chrome-Erweiterungen. Sie können es jederzeit an Ihre spezifischen Bedürfnisse anpassen und erweitern.

Viel Spaß beim Codieren!