browser-extension-developer

Build and maintain cross-browser extensions with MV3-compatible manifests.

27.7k|1.5k|Updated Jul 13, 2024
One-click install
npx skills add https://github.com/yamadashy/repomix --skill browser-extension-developer-yamadashy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-extension-developer
Source: https://github.com/yamadashy/repomix/tree/main/browser/.claude/skills/browser-extension-developer
Command: npx skills add https://github.com/yamadashy/repomix --skill browser-extension-developer-yamadashy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building and maintaining cross-browser extensions (Chrome/Firefox/Edge) can be error-prone and time-consuming due to MV3 migrations, content/background scripts, and i18n updates. This skill consolidates best practices and reusable workflows to streamline development.

Core Features & Use Cases

  • Cross-browser compatibility: streamline manifest configurations, API usage, and testing across Chrome, Firefox, and Edge.
  • Script structure: manage entrypoints for background and content scripts, with i18n localization in public/_locales.
  • Internationalization: maintain translations for 12 languages and consistent messaging across browsers.

Quick Start

  • Initialize a new or existing browser-extension project under browser/ including manifest.json MV3 setup.
  • Install dependencies: npm install, then run npm run dev for Chrome-like development environment.
  • Load the unpacked extension in your browser for testing and iteration.

Frequently Asked Questions about browser-extension-developer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a cross-browser extension for Chrome, Firefox, and Edge?

Cross-browser extensions require a shared manifest.json following MV3 standards, with platform-specific API handling. Initialize your project under browser/, configure manifest.json for MV3 compatibility, then test across browsers by loading the unpacked extension in each one. This skill streamlines that setup and validates configurations automatically.

What's the difference between content scripts and background scripts in extensions?

Content scripts inject into web pages to interact with DOM and page context, while background scripts run in the extension's isolated environment and handle persistent logic. Both require separate entrypoints in your manifest.json. This skill manages both script types and their MV3-compliant configurations across browsers.

How do I migrate my browser extension to Manifest V3?

Manifest V3 migration involves updating manifest.json syntax, converting background pages to service workers, and adjusting content script permissions. This skill enforces MV3-compatible configurations and automates the migration workflow, reducing errors common in manual updates across Chrome, Firefox, and Edge.

Can I support multiple languages in my browser extension?

Yes. Extensions use i18n localization files stored in public/_locales with language folders. This skill maintains translations across 12 languages and ensures consistent messaging in content and background scripts, then validates all locales during the build process.

Do I need different code for each browser when building extensions?

Core extension logic can be shared, but Chrome, Firefox, and Edge have API differences requiring conditional handling. This skill consolidates cross-browser API considerations into a repeatable workflow, letting you write once and test across platforms without duplicating entire codebases.