chrome-extension-development

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

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "A sample Chrome extension using Manifest V3",
  "permissions": ["storage", "activeTab"],
  "action": {
    "default_popup": "popup/popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background/service-worker.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "js": ["content/content-script.js"],
      "css": ["content/styles.css"]
    }
  ]
}