Setup

Five steps take you from a clone to a signed-in extension that takes a test payment, about 10 minutes in all. The wizard in step 4 does the setup work: it configures your clone, creates your Firebase or Supabase project, and sets up payments. The few console clicks no CLI can do, it prints as a checklist with a link into the right screen for each. Every step ends with something you can see on screen.

1. Before you start

You need:

• The GitHub invite accepted. It arrives after purchase, on the GitHub account you gave. The extensionstart/starter page shows a 404 until you accept it from the email or at github.com/notifications.
• Chrome, Node 22.12 or newer, pnpm 11 or newer (npm install -g pnpm; it switches to the version the repo pins), and git.

Two accounts, one for each choice you make in the wizard:

• Backend: a Google account for Firebase, or a Supabase account. The kit defaults to Firebase. Deploying the API needs Firebase’s Blaze plan, which asks for a card; the free tier covers development.
• Payments: a Stripe, Polar, or Paddle account, in test mode. The kit defaults to Stripe. Have its test key ready; the wizard asks for it (which key).

2. Clone and install

git clone https://github.com/extensionstart/starter.git my-extension

my-extension is the folder name; pick any.

cd my-extension

pnpm install

If it stops with ERR_PNPM_UNSUPPORTED_ENGINE, your pnpm is older than 11. Run npm install -g pnpm, then pnpm install again.

3. Prepare the backend CLI

Firebase

The wizard creates your Firebase project through this CLI.

npm i -g firebase-tools

firebase login --reauth

The --reauth flag works on a first login too, and it renews one that has expired.

Supabase

The wizard creates your Supabase project through the Management API with an access token. supabase login stores one it can find:

npm i -g supabase

supabase login

No CLI? Generate a token at supabase.com/dashboard/account/tokens and paste it when the wizard asks.

4. Run the wizard

pnpm create extstart

It asks for a name, a color palette, a backend, whether to add a side panel, when to ask for sign-in, a billing model, a payment provider, and a paywall recipe. Enter accepts the default on every question. Then it applies your answers and offers the two setup steps:

• Create the Firebase project now? Enter creates the project, writes its config into the repo, and prints the console checklist: enable Google sign-in, upgrade to the Blaze plan, point the OAuth client at your extension. Each item comes with a link into the right screen.
• Create the Supabase project now? On Supabase instead: Enter creates the project, writes its URL and key into .env, applies the schema, deploys the API, switches on the auth settings, and prints the one step left, a Google OAuth client.
• Set up payments with stripe now? Enter asks for your provider’s test key and does the rest: products, webhook, and on Firebase the deploy and the doctor. On Supabase the secrets land in your project and the API is checked; there is nothing to deploy.

Every question, the checklist, and what happens when a step stops: Setup wizard.

You should see

Done. <your extension> is configured. and a Next list. When both setup steps ran, it is the one pnpm dev line. Anything you skipped is there as one command, with a link.

No “Create the Firebase project now?” question

The Firebase CLI is not installed or not logged in; the wizard says which under your backend answer. Fix it (step 3), then run the step on its own: pnpm create extstart --firebase.

5. Run it in Chrome

pnpm dev

WXT builds to apps/extension/.output/chrome-mv3-dev and watches for changes. It does not open the browser. Open chrome://extensions, turn on Developer mode (top right), click Load unpacked, and select apps/extension/.output/chrome-mv3-dev. Pin the icon from the puzzle-piece menu.

You should see

• Your website’s welcome page opens in a new tab as soon as the extension loads.
• If you answered yes to the wizard’s On-page UI question, any https:// page shows the status card in the bottom-right corner, with the same two actions as the popup.
• Open the popup’s Account tab and sign in with Google: a Google window opens and closes, and your account shows in the tab.
• Upgrade in the same tab opens the plan picker; its button opens checkout in a browser tab. Pay with the test card 4242 4242 4242 4242, any future expiry, any CVC. Back in the popup the plan row shows your paid plan’s name (pricing.paidPlanName, Pro by default) within a few seconds, no reload.

If not

• “Connect your Firebase project” in the popup: the Firebase step has not run yet. pnpm create extstart --firebase runs it any time.
• The Google window closes without signing you in: a console step is still open, usually the redirect URI on the OAuth client. pnpm create extstart --firebase lists what is left; the fix when the URI no longer matches.
• No checkout, or the plan row stays on Free plan: pnpm create extstart --payments-setup finishes payments, and pnpm run doctor from backend/functions names the broken link.
• No welcome tab: urls.welcome in site.config.ts is empty. The wizard’s Firebase step fills it with your Hosting site; on Supabase, deploy apps/site and set it by hand.
• After any of these: restart pnpm dev (env values are baked in at build time) and reload the extension on chrome://extensions.
• No .output folder in the dialog: folders that start with a dot are hidden in the macOS file dialog. Press Cmd+Shift+. to show them, or Cmd+Shift+G and paste the full path. On Windows, paste the path into the dialog’s address bar.

What’s next

• Build your feature: where your code goes, and the two-file edit that makes a feature paid.
• Choose your paywall: what is free, what is on trial, when to ask.
• Publish: the Chrome Web Store runbook.