Zum Hauptinhalt springen

Eine Chrome-Erweiterung erstellen

Baue Chrome-Erweiterungen mit Manifest V3.

Schnellstart

  1. Gehe zu prompttoapp.dev
  2. Wähle Chrome Extension als Projekttyp
  3. Gib deinen Prompt in das Textfeld ein und klicke auf Generate

Beispiel-Prompt

Erstelle eine Produktivitätserweiterung, die:
- Ablenkende Websites blockiert
- Zeit auf jeder Website verfolgt
- Tägliche Produktivitätsstatistiken anzeigt
- Anpassbare Blockliste hat
- Einen Pomodoro-Timer enthält

Tech-Stack

  • Manifest V3
  • React + TypeScript
  • Tailwind CSS
  • Chrome-APIs (storage, tabs, alarms, etc.)

Deine Erweiterung testen

  1. Klicke auf Publish in der Chat-Oberfläche
  2. Klicke auf Get Project Files, um dein vollständiges Projekt herunterzuladen
  3. Extrahiere die ZIP in einen Ordner
  4. Öffne chrome://extensions
  5. Aktiviere den "Entwicklermodus"
  6. Klicke auf "Entpackte Erweiterung laden" und wähle den extrahierten Ordner

Deine Erweiterung ist jetzt in Chrome aktiv.

Unterstützte Erweiterungstypen

  • Popup-Erweiterungen — Klicke auf das Symbol, um die UI zu öffnen
  • Seitenleisten-Erweiterungen — Persistente Seitenleiste
  • Content-Scripts — In Webseiten injiziert
  • Hintergrund-Worker — Führen Aufgaben im Hintergrund aus

Integrationen hinzufügen

Du kannst die KI bitten, Integrationen wie Supabase für Speicher oder Stripe für Zahlungen hinzuzufügen. Du musst deine eigenen API-Schlüssel in der Erweiterungskonfiguration angeben.

Im Chrome Web Store veröffentlichen

  1. Erstelle ein Chrome Web Store-Entwicklerkonto ($5 einmalig)
  2. Lade deine ZIP in das Entwickler-Dashboard hoch
  3. Fülle den Store-Eintrag aus und reiche zur Überprüfung ein (normalerweise 1–3 Tage)

Nächste Schritte