In diesem Video lernst du, wie du mithilfe von ChatGPT eine eigene Chrome-Extension erstellst – ganz ohne Programmierkenntnisse. Wir gehen Schritt für Schritt durch den Prozess, um ein Plugin zu bauen, das Links auf Webseiten farblich markiert. Zudem erfährst du, wie du neue Features hinzufügst und deine Extension im Chrome Web Store veröffentlichst.
- Einführung: Erläutere das Ziel des Videos und was du lernen wirst.
- Ideenfindung: Frage ChatGPT nach einfachen Chrome-Extension-Ideen, z.B. ein Link-Highlighter.
- Projekt-Setup:
- Erstelle einen Projekt-Ordner.
- Definiere die
manifest.jsonDatei mit Name, Version, Beschreibung und Berechtigungen.
- HTML und JavaScript:
- Erstelle eine
popup.htmlDatei für die Benutzerschnittstelle zur Farbauswahl. - Erstelle eine
popup.jsDatei für die JavaScript-Funktionalität.
- Erstelle eine
- Content- und Background-Scripts:
- Erstelle ein Content-Script, um die Links auf der Webseite zu markieren.
- Erstelle ein Background-Script für die Hintergrundüberwachung.
- Zipping und Laden:
- Verwende ChatGPT, um alle Dateien zu zippen und herunterzuladen.
- Lade die entpackte Erweiterung im Chrome-Browser im Entwicklermodus.
- Testen der Extension:
- Teste die Extension auf einer Webseite und passe die Farben an.
- Feature-Erweiterung:
- Füge neue Features hinzu, wie einen Aktivieren/Deaktivieren-Button und ein Rechtsklick-Menü.
- Lade die aktualisierte Version erneut in den Chrome-Browser.
- Veröffentlichung:
- Erstelle ein Entwicklerkonto im Chrome Web Store.
- Lade deine Extension hoch und veröffentliche sie.
- Verstehen der Grundstruktur einer Chrome-Extension.
- Erstellen einer funktionalen Chrome-Extension mit ChatGPT.
- Hinzufügen und Testen neuer Features in einer bestehenden Extension.
- Veröffentlichung einer Chrome-Extension im Chrome Web Store.
- ChatGPT
- Google Chrome Browser
- Texteditor (z.B. VS Code)
- Chrome Web Store Developer Dashboard
