Tool Hut

Founder stack playbook

Build a Chrome extension with AI

A Manifest V3 extension that augments the current page while keeping model keys and paid features off the client.

Who it's for

A web developer building a focused browser workflow such as summarising, rewriting, extracting, or classifying selected content.

Constraints

Minimal permissions, no remote executable code, explicit user action before page access, and all privileged AI calls proxied through a backend.

Approximate monthly cost

US$0 at low volume; usually US$5-30/mo after paid edge, database, or model usage, plus Chrome Web Store's one-time US$5 developer registration.

How the stack works

  1. Use WXT to build the service worker, content script, popup, and options page with one typed project.
  2. Request the narrowest host permissions and process only content the user explicitly selects or invokes.
  3. Exchange a user session for a short backend request; keep provider keys and entitlement checks in Cloudflare Workers.
  4. Route model calls through OpenRouter with hard per-user limits and redact unnecessary page data.
  5. Package, test against Chrome's review rules, publish through the Web Store, and monitor release-specific errors.

The stack

Extension framework

WXT

It handles Manifest V3 entrypoints, browser APIs, builds, and cross-browser packaging without hiding the extension model.

Skip if: the extension is a tiny content script or an existing Plasmo codebase already solves packaging reliably.

Alternatives: Plasmo, CRXJS, Vanilla Manifest V3

Popup and options UI

React + Vite

Fast builds and ordinary React components keep extension UI familiar while WXT owns entrypoints.

Skip if: the UI is a single control where vanilla TypeScript would produce less code and a smaller bundle.

Alternatives: Preact, Svelte, Vanilla TypeScript

Styling

Tailwind CSS

Scoped utility styles help compact extension surfaces stay consistent without leaking into host pages.

Skip if: content-script style isolation is simpler with CSS modules or Shadow DOM and the UI is very small.

Alternatives: CSS Modules, Vanilla Extract, Plain CSS

Secure API proxy

Cloudflare Workers

A small global endpoint can validate users, enforce quotas, hide keys, and call AI providers without maintaining a server.

Skip if: requests need long execution, large binaries, private-network access, or an existing backend already owns identity.

Alternatives: Vercel Functions, Hono on Railway, AWS Lambda

Model gateway

OpenRouter

The backend can select models by latency, privacy, and cost without updating the installed extension.

Skip if: the product needs a direct provider data agreement or only one model is approved.

Alternatives: Anthropic API, OpenAI API, Groq

User identity

Supabase Auth

Browser-based OAuth and JWT verification provide accounts without storing provider credentials in extension storage.

Skip if: the extension is entirely local and free; requiring an account would add friction without protecting a paid resource.

Alternatives: Clerk, Auth0, Signed licence keys

Error monitoring

Sentry

Tagged release errors reveal failures caused by browser versions, permissions, and content-script contexts.

Skip if: privacy promises prohibit third-party telemetry and local diagnostics plus opt-in reports are sufficient.

Alternatives: Axiom, LogRocket, Opt-in local logs

Distribution

Chrome Web Store

It provides signed distribution, updates, discovery, and the review boundary Chrome users expect.

Skip if: the extension is internal-only, enterprise-managed, or intended primarily for Firefox or Edge stores.

Alternatives: Edge Add-ons, Firefox Add-ons, Enterprise policy deployment

Verification note: Pricing and Chrome developer requirements checked 12 July 2026. Never ship an AI provider secret in extension code; users can inspect bundles and extension storage regardless of obfuscation.

← Browse all founder playbooks