Generate a Browser Extension Boilerplate with Claude

Building a browser extension means juggling manifests, content scripts, background workers, and messaging between contexts. Claude scaffolds the entire structure so you can focus on the actual feature.

Create a Chrome extension (Manifest V3) that adds a floating
button to every page. When clicked, it opens a side panel showing
a summary of the page content. Include a popup with settings,
a background service worker, and proper TypeScript types for the
Chrome API. Use Vite for bundling.

Claude generates a complete project with the right file structure:

my-extension/
├── manifest.json
├── src/
│   ├── background/service-worker.ts
│   ├── content/inject.ts
│   ├── popup/popup.html
│   ├── popup/popup.ts
│   └── sidepanel/panel.ts
├── vite.config.ts
└── package.json

The manifest gets all the right permissions and content script patterns:

{
  "manifest_version": 3,
  "permissions": ["sidePanel", "activeTab", "storage"],
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["src/content/inject.ts"]
  }]
}

Claude handles the message passing between content script and background worker, storage sync for settings, and even generates the Vite config with the CRXJS plugin for hot reloading during development.

For Firefox compatibility, just ask:

Make this extension cross-browser compatible with Firefox using
the webextension-polyfill library.

Skip the boilerplate maze — Claude knows the Manifest V3 quirks so you can ship your extension faster.