browser-extension-developer
Créer des extensions multi-navigateurs avec WXT
Les projets d'extensions de navigateur ont souvent des difficultés avec la compatibilité entre navigateurs et la configuration de l'internationalisation. Cette compétence fournit des conseils clairs pour le développement d'extensions basées sur WXT prenant en charge Chrome, Firefox et Edge avec une structure i18n appropriée.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "browser-extension-developer". How do I structure a WXT browser extension project?
Résultat attendu:
- 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
Utilisation de "browser-extension-developer". Add Spanish locale to my extension
Résultat attendu:
- 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
Utilisation de "browser-extension-developer". What commands do I use for Firefox development?
Résultat attendu:
- 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
Audit de sécurité
SûrThis 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.
Facteurs de risque
⚙️ Commandes externes (11)
🌐 Accès réseau (1)
📁 Accès au système de fichiers (2)
Score de qualité
Ce que vous pouvez construire
Configurer un flux de travail multi-navigateurs
Configurer un projet d'extension basé sur WXT avec des points d'entrée appropriés pour la compatibilité Chrome, Firefox et Edge.
Gérer le support multi-langues
Ajouter de nouvelles locales de langue en suivant la structure i18n documentée et les clés de messages requises.
Standardiser le processus de construction
Établir des commandes de développement et de construction cohérentes au sein de l'équipe pour les projets d'extensions de navigateur.
Essayez ces prompts
Expliquez la structure du répertoire browser/ pour les extensions WXT et où placer les scripts d'arrière-plan, les scripts de contenu et les fichiers de configuration.
Montrez-moi comment ajouter une nouvelle locale de langue à l'extension, y compris la structure de répertoire requise et les clés de messages nécessaires.
Quelles commandes permettent de construire l'extension pour Chrome, Firefox et Edge, et quelles sont les principales différences que je dois connaître ?
Listez les commandes npm essentielles pour développer, tester et lint les extensions de navigateur basées sur WXT.
Bonnes pratiques
- Gardez les responsabilités des scripts d'arrière-plan et de contenu clairement séparées
- Mettez à jour tous les fichiers de locale lors de l'ajout de nouvelles clés de messages
- Testez à la fois dans Chrome et Firefox pendant le développement
Éviter
- Modifier directement les fichiers dans le répertoire .output
- Utiliser des API spécifiques au navigateur sans vérification de compatibilité
- Ajouter des fichiers de locale incomplets avec des clés requises manquantes