Build a Chrome Extension

A Chrome / Edge / Brave extension with a popup, a side panel, content scripts, and a backend that stores user data. Useful for productivity tools, scrapers, and AI-augmented browsing.

Repos

Layers

Build time

A weekend

Outcome

See below

You will ship

A published Chrome extension with a polished popup, settings page, and cloud sync.

How to feed this to your AI agent Browse the full directory

Build tooling

3 repos

byvitejs

vite

Fastest bundler for the extension content + popup. Use the @crxjs/vite-plugin alongside.

The build tool that won. ~71k stars. Dev server is instant, build is fast, plugin ecosystem is rich. Default for most non-Next.js React/Vue/…

byoven-sh

bun

Alternative for the dev script runner. Faster cold starts than Node.

JavaScript runtime + package manager + bundler in Zig. ~76k stars. Faster than Node for many workloads. Production use is rising, but most t…

bybiomejs

biome

Single tool that lints + formats faster than ESLint + Prettier.

Fast Rust-based formatter + linter. ~15k stars. Replaces Prettier + ESLint with one tool. Adoption is rising; ESLint plugin ecosystem is sti…

UI in popup + side panel

2 repos

byshadcn-ui

Small primitives that fit popup constraints (380px width).

The default for Next.js builders in 2026. Not a dependency — you copy components into your codebase and own them forever. Built on Radix pri…

byradix-ui

primitives

Headless dialogs, popovers — kept compact for the constrained surface.

The accessibility primitives shadcn/ui is built on. If shadcn is too opinionated drop down one level and use these directly. WAI-ARIA compli…

State + Storage

2 repos

bypmndrs

zustand

Persist to chrome.storage in two lines. Survives popup re-open.

#2 in the React survey. Tiny, no boilerplate, hook-based. Replaced Redux for most teams. Stays out of your way until you genuinely need it.…

bycolinhacks

zod

Validate everything coming across the content-script boundary.

TypeScript-first schema validation. ~35k stars. The de facto choice for input validation in TS apps. Works with every form library, every AP…

5 more layers · 7 more repos · members only

Backend / sync1 repo
Extension frameworks2 repos
Storage + sync1 repo
AI augmentation2 repos
Animation + polish1 repo

7 more curated repos · unlock full access · members only

Unlock with lifetime membership.

Pay once. Full directory unlocked forever. No renewals, no surprise charges.

See pricing

How to build build a chrome extension with AI

The 4-step AI workflow

The AI agents are good at code. They're bad at deciding what stack to use. This bundle does the second part. You bring the agent.

1
Ideate with ChatGPT or Claude.ai (web)
Paste your idea: “I'm building build a chrome extension. Help me sharpen the product spec — features, edge cases, MVP scope.” Iterate for 10-15 minutes until you have a clear one-page brief.
2
Pick your coding agent
For this kind of bundle, we recommend Claude Code — Sonnet 4.6/4.7 handles full-stack multi-file reasoning best. See the install guide → Cursor and Codex are also great; pick the one you already pay for.

Feed this bundle to the agent

Open Claude Code / Cursor / Codex in an empty folder, then paste:

I'm building build a chrome extension. Use this bundle as the source of truth for the stack:
https://stackpicks.dev/build/chrome-extension

Brief from my product spec:
[paste your brief from step 1]

Follow the bundle order strictly:
  1. Build tooling
  2. UI in popup + side panel
  3. State + Storage
  4. Backend / sync
  ...

Stop and confirm with me after each layer.

4
Wire one layer at a time, commit between each
Don't let the agent install everything before the first git commit. One layer = one commit. Catches drift early, easy rollback.

Beyond the bundle

1Ship the boring version first. The bundle above is the maximalist list. For an MVP, start with 60% of these and add the rest when real users ask.
2Deploy early. Push to Railway / Vercel after layer 02 (auth) — not after layer 09. Production breaks differently than localhost.
3Read CLAUDE.md / .cursor/rules in this repo for the project conventions your AI agent should follow.
4Iterate on the take. If a repo here doesn't fit your specific use case, tell us — contact — and we'll add a better one within 60 minutes.