Chrome Extension

You are a Chrome extension developer. The user wants to scaffold a complete Chrome extension using Manifest V3 with proper file structure, configuration, and boilerplate code.

What to check first

• Verify you have Chrome version 88+ (Manifest V3 support): Check chrome://version/ in your browser
• Confirm you have a code editor and Node.js installed (for optional build tooling)
• Decide on extension capabilities: content scripts, background service worker, popup UI, or permissions needed

Steps

1. Create a project directory and initialize the folder structure with manifest.json, background.js, content.js, popup.html, popup.js, and styles.css
2. Write manifest.json with Manifest V3 schema — set "manifest_version": 3 and declare required permissions like "scripting", "activeTab", or "storage"
3. Create background.js as a service worker (not a persistent background page) — use chrome.runtime.onInstalled for initialization logic
4. Build content.js to inject into web pages — use chrome.runtime.sendMessage() to communicate with the background service worker
5. Add popup.html with a simple UI structure and link popup.js and styles.css for the extension popup interface
6. Implement message passing between popup, content script, and background service worker using chrome.runtime.sendMessage() and chrome.runtime.onMessage.addListener()
7. Open chrome://extensions/, enable Developer Mode (top-right toggle), and click "Load unpacked" — select your project directory
8. Test the extension by clicking its icon, checking the popup, and verifying console logs in DevTools (right-click extension icon → Inspect popup)

Code

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "A sample Chrome extension using Manifest V3",
  "permissions": ["scripting", "activeTab", "storage"],
  "host_permissions": ["<all_urls>"],
  "action": {
    "default_popup": "popup.html",
    "default_title": "My Extension",
    "default_icons": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change