Skills browser-extension-developer
🧩

browser-extension-developer

Safe ⚙️ External commands🌐 Network access📁 Filesystem access

Build cross-browser extensions with WXT

Browser extension projects often struggle with cross-browser compatibility and proper internationalization setup. This skill provides clear guidance for WXT-based extension development supporting Chrome, Firefox, and Edge with proper i18n structure.

Supports: Claude Codex Code(CC)
📊 69 Adequate
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

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

Expected outcome:

  • 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

Using "browser-extension-developer". Add Spanish locale to my extension

Expected outcome:

  • 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

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

Expected outcome:

  • 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

Security Audit

Safe
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
Files scanned
212
Lines analyzed
3
findings
4
Total audits

Risk Factors

⚙️ External commands (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
🌐 Network access (1)
skill-report.json:6
📁 Filesystem access (2)
skill-report.json:6 skill-report.json:126
Audited by: claude View Audit History →

Quality Score

38
Architecture
100
Maintainability
85
Content
21
Community
100
Security
91
Spec Compliance

What You Can Build

Set up cross-browser workflow

Configure WXT-based extension project with proper entrypoints for Chrome, Firefox, and Edge compatibility.

Manage multi-language support

Add new language locales following the documented i18n structure and required message keys.

Standardize build process

Establish consistent development and build commands across the team for browser extension projects.

Try These Prompts

Project structure overview 
Explain the browser/ directory structure for WXT extensions and where to place background scripts, content scripts, and configuration files.
Add new language 
Show me how to add a new language locale to the extension, including the required folder structure and message keys needed.
Build for multiple browsers 
What commands build the extension for Chrome, Firefox, and Edge, and what are the key differences I should know?
Development workflow 
List the essential npm commands for developing, testing, and linting WXT-based browser extensions.

Best Practices

  • Keep background and content script responsibilities clearly separated
  • Update all locale files when adding new message keys
  • Test in both Chrome and Firefox during development

Avoid

  • Modifying files in the .output directory directly
  • Using browser-specific APIs without compatibility checks
  • Adding incomplete locale files with missing required keys

Frequently Asked Questions

Which browsers does this skill support?
It covers Chrome, Firefox, and Edge extension development using the WXT framework and Manifest V3.
What are the main limitations?
It focuses on documentation guidance for WXT-based projects and does not generate code or handle store submissions.
Can I use this with existing extension projects?
Yes, if your project follows the WXT framework structure with a browser/ directory layout.
Does this skill access my code or data?
No, it only provides documentation guidance and does not access files, network, or execute code.
How do I troubleshoot build failures?
Check npm scripts configuration, WXT setup, and ensure all dependencies are properly installed.
How is this different from general extension tutorials?
It focuses specifically on WXT framework conventions and the documented project structure.

Developer Details

Author

yamadashy

License

MIT

Repository

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

Ref

main

File structure

📄 SKILL.md