Extension app
Popup, side panel, welcome tour, and on-page UI. WXT generates the per-browser manifests; React 19 and Tailwind 4 drive the surfaces.
Overview
You cloned a monorepo. One wizard brands it, keeps the modules you want, and connects Firebase when you are ready:
1. SetupClone to a working extension in Chrome. About 10 minutes, no accounts needed.
What you get
Section titled “What you get”Every part ships wired together and covered by the kit’s 400+ unit tests and 12 end-to-end specs.
Sign-in
Google and email sign-in built for MV3, with optional anonymous-first accounts that keep purchases when a guest signs up.
Billing
Stripe Checkout, customer portal, and webhooks. The server records who
paid; the UI reads useEntitlement("paid").
Paywalls
A gate engine with store-policy-safe presets. Two message calls instrument a feature; the wall UI renders itself.
Backend
One Cloud Function (Hono) for checkout, webhooks, usage counters, and sign-out revocation. The extension holds no secrets.
Publishing
Store-ready zips for Chrome, Firefox, and Edge, a remote-code audit, and runbooks for each store’s review.
How the parts fit
Section titled “How the parts fit”- The extension renders UI and reads state from
chrome.storage. - The backend decides who paid. Stripe webhooks write entitlements server-side; the extension can display state but never grant it.
- The website hosts your landing page plus the privacy and terms pages the Chrome Web Store requires.
The repo at a glance
Section titled “The repo at a glance”Directoryapps/
Directoryextension/ WXT + React app: popup, sidepanel, background, content
- …
Directorysite/ your product website (Astro): landing, privacy, terms
- …
Directorypackages/
Directorycore-ext/ MV3 primitives: storage, messaging, alarms, migrations
- …
Directorycore-auth/ sign-in strategies
- …
Directorycore-billing/ entitlements and billing hooks
- …
Directorygate/ paywall engine and wall UI
- …
Directoryui/ Button, Card, Dialog, and the other primitives
- …
Directorybackend/
Directoryfunctions/ one Hono API on Cloud Functions
- …
Directorytooling/
Directorycreate/ the setup wizard and module pruner
- …
The Repo tour walks each directory; the Tech stack page explains each choice.
Ways to charge
Section titled “Ways to charge”The wizard asks how you want to charge and configures pricing UI, Stripe products, and paywall behavior to match. All four models ship ready to seed:
| Model | You sell |
|---|---|
| Subscription (default) | Monthly and yearly plans, optional free trial |
| Lifetime | One payment, access forever |
| Subscription + credits | Monthly credit allowance plus top-up packs |
| Credit packs | Prepaid credits, no subscription |
Plans live in one config array, so any mix of recurring and one-time prices works later. See Payments and Credits.
The five steps
Section titled “The five steps”Each step ends with something you can verify on screen:
-
Setup: clone, run the wizard, load the extension in Chrome.
-
Connect sign-in: point the kit at your Firebase project and sign in for real.
-
Take payments: Stripe in test mode, ending with a checkout that flips your popup to premium.
-
Build your feature: where your code goes, and the 2-file edit that makes it paid.
-
Ship it: the Chrome Web Store submission runbook.
What the docs assume
Section titled “What the docs assume”You know React and TypeScript. The kit builds on WXT, Firebase, and Stripe rather than teaching them; these docs cover how the kit uses them and link out for the rest. Extension-platform rules (service workers, permissions, store policy) are covered here, because they are where extensions differ from web apps.