| name | build-chrome-extension |
| description | Step-by-step workflow for building, publishing, and iterating on a Chrome browser extension. Covers Manifest V3 architecture, UI development, Chrome Web Store publishing, user feedback loops, and growth strategies for building extensions that users love and recommend.
Use when the user wants to build chrome extension or needs a structured multi-step process for this goal.
Do NOT use when the request is a single-step task or requires professional advice beyond educational guidance. |
| license | Apache-2.0 |
| type | workflow |
| skills | startup-advisor react-architect typescript-guru css-master design-patterns unit-test-writer e2e-test-architect security-auditor seo-optimizer user-story-writer |
| trigger_phrases | I want to build a Chrome extension I want to create a browser extension How do I publish to the Chrome Web Store I want to build a browser plugin |
| metadata | {"author":"foundry-skills","version":"1.0.0","tags":"javascript content-marketing entrepreneurship step-by-step planning","category":"software-project","depends":"startup-advisor react-architect typescript-guru css-master design-patterns unit-test-writer e2e-test-architect security-auditor seo-optimizer user-story-writer","disclaimer":"none","difficulty":"intermediate"} |
Build Chrome Extension
Estimated time: 3-6 weeks
Chrome extensions are one of the fastest paths from idea to shipped product. With over 3 billion Chrome users, even a niche extension can find a meaningful audience. This workflow takes you from idea validation through Manifest V3 architecture, UI development, Chrome Web Store publishing, and post-launch iteration based on user feedback.
The workflow emphasizes the Manifest V3 architecture (required for all new extensions) and the common patterns that make extensions successful: fast popup UI, efficient background processing with service workers, thoughtful permissions (request only what you need), and a smooth onboarding experience.
When to Use
- User wants to build chrome extension
- User needs a structured, step-by-step process for build chrome extension
- User wants to build a Chrome extension
- User wants to create a browser extension
- How do I publish to the Chrome Web Store
- Do NOT use when: the request is outside the scope of build chrome extension or requires professional advice beyond educational guidance
- Do NOT use for single-step tasks that one atomic skill can handle independently
Prerequisites
Before starting this workflow, ensure:
- Familiarity with JavaScript/TypeScript and web development
- A Google Developer account ($5 one-time registration fee)
- A clear idea for what the extension does and who it serves
- Chrome browser for development and testing
- Basic understanding of HTML, CSS, and browser APIs
Steps
Step 1: Validate the Idea and Define MVP (uses: startup-advisor)
validate your extension idea. Search the Chrome Web Store for competing extensions: what do they do well, what do their reviews complain about? Define your unique angle. Use the User Story Writer skill to write user stories for the MVP feature set. Keep the MVP ruthlessly small -- one core feature done well beats five half-built features. Define what "done" looks like for your first Chrome Web Store submission.
- Input: Extension idea and the problem it solves, Target user persona, Existing extensions that solve similar problems
- Output: Competitive analysis (top 5 competing extensions with ratings and review themes), Unique value proposition statement, MVP feature set (3-5 user stories maximum)
- Key focus: Use the Startup Advisor skill to validate your extension idea
Step 2: Set Up the Extension Architecture (uses: typescript-guru)
set up a TypeScript project for the extension. Use the Design Patterns skill to architect the extension with proper separation of concerns. Set up the Manifest V3 structure: with minimum required permissions, service worker for background tasks, content scripts (if needed), and popup/options pages. Use a build tool (webpack, Vite, or Plasmo) for TypeScript compilation and hot reload during development.
