1. Die Idee: Warum überhaupt?
Anfang 2025 hatte ich bereits mein Favoritenportal als Web-App am Laufen - eine intelligente Bookmark-Verwaltung mit automatischer Metadaten-Extraktion und Tag-Vorschlägen. Es funktionierte schon gut, aber mir fehlte noch eine wichtige Sache: Eine Chrome Extension für den schnellen Zugriff.
Was ich brauchte:
- Ein-Klick-Speichern von Links direkt aus dem Browser
- Automatische Metadaten-Extraktion wie in der Web-App
- Tag-Vorschläge basierend auf dem Seiteninhalt
- Sichere Authentifizierung mit meinem bestehenden Account
- Einfaches, schnelles Interface
Eigentlich nur ein kleines Plugin, das meine bestehende API nutzt. Sollte schnell gehen, dachte ich mir. Spoiler: Es ging wirklich schnell! 🚀
Warum KI?
2025 ist KI-unterstütztes Coding schon fast Standard geworden. Bei meiner Web-App hatte ich bereits gute Erfahrungen mit Gemini Advanced gemacht. Also warum nicht auch für die Extension nutzen?
2. Welche KI nutzen?
Anfang 2025 hatte ich bereits mit verschiedenen KI-Tools experimentiert. Für die Extension entschied ich mich hauptsächlich für Gemini Advanced - hier ein kurzer Vergleich der verfügbaren Optionen:
Gemini Advanced ⭐
✅ Sehr kostengünstig bei guter Qualität
✅ Schnelle Code-Generierung
✅ Solide für MVP-Entwicklung
Meine Wahl für dieses Projekt
ChatGPT-4
✅ Gut für Architektur-Entscheidungen
✅ Starke Erklärungen und Konzepte
❌ Oft zu ausführlich bei einfachen Tasks
Claude.ai
✅ Beste Code-Qualität und Struktur
✅ Folgt Anweisungen sehr genau
❌ Teurer als andere Optionen
Gemini Advanced war die perfekte Wahl - es lieferte sofort funktionierenden Code und verstand meine Anforderungen auf Anhieb.
3. Der erste Prompt & erste Erfolge
Da ich bereits eine funktionierende API hatte, war mein Prompt sehr spezifisch:
"Erstelle eine Chrome Extension, die den aktuellen Tab-URL und -Titel an meine bestehende API sendet: POST /api/bookmarks mit url, title, description. Brauche Popup-Interface und automatische Metadaten-Extraktion."
Und siehe da: Gemini lieferte sofort funktionierenden Code! Manifest V3, korrekte Permissions, sauberes Popup-HTML. Ich war ehrlich überrascht.
Erfolg nach wenigen Stunden:
- ✅ Manifest V3 perfekt konfiguriert
- ✅ JavaScript funktionierte sofort
- ✅ Chrome APIs korrekt implementiert
- ✅ API-Integration funktional
- ✅ UI sah sogar brauchbar aus
4. Die Chrome Extension Entwicklung
Da die Web-App bereits funktionierte, konzentrierte ich mich voll auf die Chrome Extension. Hier die realistische Timeline:
Die 2 Tage Extension-Timeline:
- Tag 1 (3-4 Stunden): Chrome Extension komplett fertig - Manifest V3, Popup-HTML, API-Integration, funktionsfähig
- Tag 2: Ausführliche Tests, kleine UI-Verbesserungen und finale Optimierungen
Ein typisches Extension-Problem:
// KI Vorschlag (funktionierte nicht):
chrome.tabs.query({active: true}, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, {action: "getPageData"});
});
// Mein Debugging ergab:
// Content Script muss erst injiziert werden
// Korrigierte Version:
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
files: ['content.js']
}).then(() => {
chrome.tabs.sendMessage(tabs[0].id, {action: "getPageData"});
});Lesson learned: KI kennt oft die APIs, aber nicht immer die korrekte Reihenfolge bei Chrome Extensions.
5. Größte Herausforderungen
Chrome Extension APIs
KI kannte zwar die APIs, aber nicht die Manifest V3 Änderungen. Viele Beispiele waren für V2.
Lösung: Offizielle Chrome Docs + Trial & Error
Content Security Policy
Extension wurde von Chrome blockiert. KI verstand CSP-Regeln nicht richtig.
Lösung: CSP-Validator Tools + Community Forums
State Management
Zwischen Popup, Background Script und Content Script - ein Chaos!
Lösung: Konsistentes Message-Passing mit action/data Pattern
Performance
Erste Version war langsam. KI generiert nicht immer effizienten Code.
Lösung: Profiling + manuelle Optimierung
6. Was KI richtig gut kann
KI-Superpowers:
🚀 Boilerplate Code
Manifest.json, Basic HTML-Struktur, Standard Event-Listener - alles sofort da.
🔍 Code-Erklärungen
"Wie funktioniert chrome.storage.sync?" - KI erklärt es verständlicher als die Doku.
🐛 Error-Debugging
Error-Message + Code-Snippet = oft schnelle Lösungsvorschläge.
🎨 UI-Komponenten
CSS + JavaScript für Popups, Buttons, etc. - spart Zeit beim Styling.
📚 Schneller Einstieg
In 2 Tagen von null auf funktionsfähige Extension - ohne wochenlange Tutorials.
7. Was KI (noch) nicht kann
KI-Limitationen:
🏗️ Architektur-Entscheidungen
KI kann Komponenten bauen, aber nicht strategisch entscheiden, WIE das große System strukturiert sein soll.
🔒 Security & Permissions
Manifest V3 Permissions, XSS-Schutz, Input-Validation - KI kennt die APIs, aber denkt nicht proaktiv an Sicherheit.
⚡ Performance & Lifecycle
Service Worker Lifecycle, Memory Management - Code funktioniert, aber ist oft ineffizient.
🔄 Message Passing Komplexität
Popup ↔ Service Worker ↔ Content Script Kommunikation - bei komplexen Flows verliert KI den Überblick.
🎯 User Experience
KI kann UI bauen, aber nicht beurteilen, was wirklich benutzerfreundlich und intuitiv ist.
8. Meine wichtigsten Learnings
Top Learnings aus dem Projekt:
KI ist ein Super-Assistent, kein Ersatz
Du musst immer noch die Architektur planen und Entscheidungen treffen. KI hilft bei der schnellen Umsetzung.
Spezifische Prompts sind entscheidend
"Chrome Extension mit Manifest V3" statt "Extension bauen" - Kontext macht den Unterschied.
Immer testen, nie blind vertrauen
KI-Code sieht oft richtig aus, funktioniert aber nicht. Sofort im Browser testen!
KI + Docs = perfektes Team
KI kennt die APIs gut, aber bei kniffligen Fehlern oder brandneuen Features hilft developer.chrome.com.
KI + schnelle Iteration = Erfolg
Kleine Schritte, sofortiges Feedback. So entstehen in 2 Tagen funktionsfähige Extensions.
9. Würde ich es wieder tun?
Absolut! Aber anders.
Das komplette Favoritenportal ist live und funktioniert perfekt. Die Chrome Extension war nur der fehlende Baustein für den schnellen Zugriff. Zeit-Ersparnis: ca. 80-90% durch KI-Unterstützung.
Was ich beim nächsten Mal anders machen würde:
- Mehr Zeit für Architektur-Planung einplanen
- Security-Aspekte von Anfang an berücksichtigen
- Detailliertere Prompts mit mehr Kontext verwenden
- Verschiedene KI-Tools für unterschiedliche Aufgaben nutzen
- UX-Feedback früher im Prozess einholen
Das Endergebnis:
- Chrome Extension für Ein-Klick-Speichern
- Vollständige Web-App mit Next.js
- Automatische Metadaten-Extraktion
- KI-basierte Tag-Vorschläge
- Volltext-Suche und Datenexport
- DSGVO-konforme Datenhaltung
Mein Rat für andere Entwickler:
Trau dich! KI-unterstützte Entwicklung ist kein Betrug, sondern ein Werkzeug. Wie ein besserer Google Search oder ein sehr geduldiger Senior-Entwickler neben dir. Aber vergiss nicht: Am Ende musst du verstehen, was dein Code macht.
🚀 Interessiert an KI-Development?
Chrome Extensions mit KI zu entwickeln war eine spannende Erfahrung. Falls du auch Erfahrungen mit KI-Coding gemacht hast oder Fragen zu Chrome Extensions hast - schreib mir!
PS: Das Favoritenportal ist live unter favoritenportal.de und ich nutze es täglich. Die Chrome Extension ist noch im Entwicklermodus, aber funktioniert einwandfrei! 🎉