Chrome Extension Boilerplate mit Popup-Interaktion (Manifest V3)

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 an 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. Es erscheint 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 im Popup ausgeführt!“

Dieses Boilerplate bietet eine solide Grundlage für die Erstellung komplexerer Chrome-Erweiterungen. Fühlen Sie sich frei, es an Ihre spezifischen Bedürfnisse anzupassen und zu erweitern.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonChrome Extension Boilerplate mit Popup-Interaktion (Manifest V3). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!