Fähigkeiten browser-extension-developer
🧩

browser-extension-developer

Sicher ⚙️ Externe Befehle🌐 Netzwerkzugriff📁 Dateisystemzugriff

Cross-Browser-Erweiterungen mit WXT erstellen

Browser-Erweiterungsprojekte haben oft Schwierigkeiten mit der Cross-Browser-Kompatibilität und einer ordnungsgemäßen Internationalisierungseinrichtung. Diese Fähigkeit bietet klare Anleitungen für die WXT-basierte Erweiterungsentwicklung mit Unterstützung für Chrome, Firefox und Edge mit einer ordnungsgemäßen i18n-Struktur.

Unterstützt: Claude Codex Code(CC)
📊 69 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "browser-extension-developer". How do I structure a WXT browser extension project?

Erwartetes Ergebnis:

  • Create browser/entrypoints/ for background.ts and content.ts files
  • Place i18n files in browser/public/_locales/[language]/messages.json
  • Configure WXT in browser/wxt.config.ts
  • Built extensions output to browser/.output/chrome-mv3 and firefox-mv2

Verwendung von "browser-extension-developer". Add Spanish locale to my extension

Erwartetes Ergebnis:

  • Create folder browser/public/_locales/es/
  • Add messages.json with keys: appDescription and openWithRepomix
  • Run npm run build-all to regenerate locales
  • Test in Chrome and Firefox for compatibility

Verwendung von "browser-extension-developer". What commands do I use for Firefox development?

Erwartetes Ergebnis:

  • Use npm run dev:firefox for live development with hot reload
  • Firefox uses MV2 manifest while Chrome uses MV3
  • Run npm run build:firefox to build for Firefox store submission
  • Polyfills may be needed for Firefox-specific APIs

Sicherheitsaudit

Sicher
v4 • 1/17/2026

This skill contains only documentation files with no executable code, network calls, or filesystem access. The static analysis flagged markdown code fences and JSON content as security issues, but evaluation confirms these are false positives. SKILL.md provides guidance for WXT-based browser extension development.

2
Gescannte Dateien
212
Analysierte Zeilen
3
befunde
4
Gesamtzahl Audits

Risikofaktoren

⚙️ Externe Befehle (11)
skill-report.json:16 skill-report.json:17 SKILL.md:3 SKILL.md:12-18 SKILL.md:18-22 SKILL.md:22-23 SKILL.md:23-24 SKILL.md:24-25 SKILL.md:25 SKILL.md:25-31 SKILL.md:31-35
🌐 Netzwerkzugriff (1)
skill-report.json:6
📁 Dateisystemzugriff (2)
skill-report.json:6 skill-report.json:126
Auditiert von: claude Audit-Verlauf anzeigen →

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
85
Inhalt
22
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Cross-Browser-Workflow einrichten

Konfigurieren Sie ein WXT-basiertes Erweiterungsprojekt mit richtigen Einstiegspunkten für Chrome-, Firefox- und Edge-Kompatibilität.

Mehrsprachige Unterstützung verwalten

Fügen Sie neue Sprachlocales hinzu, indem Sie der dokumentierten i18n-Struktur und den erforderlichen Nachrichtenschlüsseln folgen.

Build-Prozess standardisieren

Etablieren Sie konsistente Entwicklungs- und Build-Befehle im Team für Browser-Erweiterungsprojekte.

Probiere diese Prompts

Projektstrukturübersicht 
Erklären Sie die browser/-Verzeichnisstruktur für WXT-Erweiterungen und wo Hintergrundskripte, Content-Skripte und Konfigurationsdateien platziert werden.
Neue Sprache hinzufügen 
Zeigen Sie mir, wie ich ein neues Sprachlocale zur Erweiterung hinzufüge, einschließlich der erforderlichen Ordnerstruktur und der benötigten Nachrichtenschlüssel.
Für mehrere Browser bauen 
Welche Befehle bauen die Erweiterung für Chrome, Firefox und Edge und was sind die wichtigsten Unterschiede, die ich wissen sollte?
Entwicklungsworkflow 
Listen Sie die wesentlichen npm-Befehle zum Entwickeln, Testen und Linten von WXT-basierten Browser-Erweiterungen auf.

Bewährte Verfahren

  • Halten Sie die Verantwortlichkeiten von Hintergrund- und Content-Skripten klar getrennt
  • Aktualisieren Sie alle Locale-Dateien beim Hinzufügen neuer Nachrichtenschlüssel
  • Testen Sie während der Entwicklung sowohl in Chrome als auch in Firefox

Vermeiden

  • Dateien im .output-Verzeichnis direkt modifizieren
  • Browserspezifische APIs ohne Kompatibilitätsprüfungen verwenden
  • Unvollständige Locale-Dateien mit fehlenden erforderlichen Schlüsseln hinzufügen

Häufig gestellte Fragen

Welche Browser unterstützt diese Fähigkeit?
Es deckt die Entwicklung von Chrome-, Firefox- und Edge-Erweiterungen mit dem WXT-Framework und Manifest V3 ab.
Was sind die Hauptbeschränkungen?
Es konzentriert sich auf Dokumentationsanleitung für WXT-basierte Projekte und generiert keinen Code oder bearbeitet Store-Einreichungen.
Kann ich dies mit bestehenden Erweiterungsprojekten verwenden?
Ja, wenn Ihr Projekt der WXT-Framework-Struktur mit einem browser/-Verzeichnislayout folgt.
Greift diese Fähigkeit auf meinen Code oder Daten zu?
Nein, es bietet nur Dokumentationsanleitung und greift nicht auf Dateien, Netzwerk zu oder führt Code aus.
Wie behebe ich Build-Fehler?
Überprüfen Sie die npm-Skripte-Konfiguration, die WXT-Einrichtung und stellen Sie sicher, dass alle Abhängigkeiten ordnungsgemäß installiert sind.
Wie unterscheidet sich dies von allgemeinen Erweiterungstutorials?
Es konzentriert sich spezifisch auf WXT-Framework-Konventionen und die dokumentierte Projektstruktur.

Entwicklerdetails

Autor

yamadashy

Lizenz

MIT

Repository

https://github.com/yamadashy/repomix/tree/main/.claude/skills/browser-extension-developer

Ref

main

Dateistruktur

📄 SKILL.md