chrome-extension-development

SKILL.md

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

Initialize the project — Create the directory structure with manifest.json, background service worker, content scripts, and popup files.

Configure the manifest — Define permissions, content script matches, service worker registration, and action settings in Manifest V3 format.

Implement the background service worker — Set up event listeners for extension lifecycle, messaging, and alarms using the chrome.* API.

Build content scripts — Write scripts that interact with web page DOM, communicate with the background worker via chrome.runtime.sendMessage, and respect CSP.

Create the popup UI — Design the popup HTML/CSS and wire up interactivity with the background and content scripts.

Add storage and state management — Use chrome.storage.local or chrome.storage.sync to persist user settings and extension state.

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.

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