Chrome Extension Development

This skill provides expert-level guidance for Chrome extension development, covering JavaScript/TypeScript, browser extension APIs, and modern web development practices.

Workflow: Building a Chrome Extension from Scratch

1. Initialize the project — Create the directory structure with manifest.json, background service worker, content scripts, and popup files.
2. Configure the manifest — Define permissions, content script matches, service worker registration, and action settings in Manifest V3 format.
3. Implement the background service worker — Set up event listeners for extension lifecycle, messaging, and alarms using the chrome.* API.
4. Build content scripts — Write scripts that interact with web page DOM, communicate with the background worker via chrome.runtime.sendMessage, and respect CSP.
5. Create the popup UI — Design the popup HTML/CSS and wire up interactivity with the background and content scripts.
6. Add storage and state management — Use chrome.storage.local or chrome.storage.sync to persist user settings and extension state.
7. Test and debug — Load the extension unpacked via chrome://extensions, use Chrome DevTools to inspect the service worker and content scripts, and run unit tests.
8. Package and publish — Prepare store assets (icons, screenshots, description), create a privacy policy, and submit to the Chrome Web Store.

Example: Minimal Manifest V3 Configuration