extension-dev

Build MV3 browser extensions with TypeScript for Chrome and Firefox.

Updated Feb 22, 2026
One-click install
npx skills add https://github.com/KJ-devs/focus-shield --skill extension-dev-kj-devs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: extension-dev
Source: https://github.com/KJ-devs/focus-shield/tree/main/.claude/skills/extension-dev
Command: npx skills add https://github.com/KJ-devs/focus-shield --skill extension-dev-kj-devs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers struggle to deliver consistent, MV3-compliant browser extensions across Chrome and Firefox, with complex wiring between service workers, declarativeNetRequest rules, content scripts, and native messaging.

Core Features & Use Cases

  • MV3-compliant extension scaffold with background service worker and multi-entry build
  • Dynamic declarativeNetRequest rule management and cross-browser compatibility
  • Native messaging and WebSocket fallback for desktop integration
  • Type-safe TypeScript codebase with polyfills and strict typing for Chrome/Firefox APIs

Quick Start

Create a new MV3 extension scaffold for Focus Shield and wire up background, content scripts, popup, and blocked-page UI.

Frequently Asked Questions about extension-dev

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

FAQPage Schema
How do I build a cross-browser MV3 extension that works in both Chrome and Firefox?

To build a cross-browser MV3 extension, you need a multi-entry build pattern that enforces Manifest V3 compliance while applying polyfills and strict TypeScript typing for Chrome and Firefox API differences. This ensures consistent service worker and content script behavior across both browsers.

How do I manage declarativeNetRequest rules dynamically in a Manifest V3 browser extension?

Dynamic declarativeNetRequest rule management in an MV3 extension involves configuring rule sets within the background service worker to modify network requests. This approach replaces blocking web request listeners to maintain cross-browser compatibility and adhere to MV3 performance constraints.

Can I use TypeScript with strict typing for browser extension APIs in MV3?

Yes, you can use TypeScript with strict typing for MV3 browser extension APIs by applying type definitions and polyfills. This approach type-checks Chrome and Firefox API calls, reducing runtime errors when wiring background service workers, content scripts, and popup UI components.

What is the best way to set up native messaging in a browser extension with a fallback?

The best way to set up native messaging with a fallback is to wire the MV3 background service worker to communicate with a desktop app via native messaging, using a WebSocket connection as a fallback. This ensures reliable desktop integration even if native messaging fails.

How do I structure a multi-entry build for an MV3 extension with a popup and blocking page?

Structuring a multi-entry build for an MV3 extension requires configuring your bundler to output separate scripts for the background service worker, content scripts, popup UI, and blocking page. This pattern ensures each extension entry point loads independently and efficiently.