Architecture Overview
LightningAddon is a boilerplate to ship a browser extension SaaS to every major browser — Chrome, Firefox, Brave, Edge, Opera — from a single codebase, in a single build command.
Monorepo Layout
lightning-addon/
├── apps/
│ ├── background/ # Service worker — auth init, message handling, billing
│ ├── extension/ # Extension assembler — manifests + assembly config
│ ├── firebase/ # Firebase Cloud Functions — Stripe, webhook
│ ├── in-page/ # Content script — Shadow DOM UI injected into pages
│ ├── main/ # Full-page dashboard (Profile, Billing, Settings)
│ ├── popup/ # Extension popup — login or user info
│ └── supabase/ # Supabase Edge Functions — Stripe + Resend email
├── packages/
│ ├── auth/ # Auth abstraction — ClientAuth interface, adapters
│ ├── browser-utils/ # Chrome/Firefox API wrappers
│ ├── core/ # Domain layer — RuntimeMessageMap, domain models
│ ├── firebase/ # Firebase client factory
│ ├── integrations/ # Env parsing (Zod), Stripe, backend resolution
│ ├── supabase/ # Supabase client factory
│ ├── ui/ # React components — BillingCard, ProfileCard, SettingsForm
│ └── vite-config/ # createViteConfig() factory
└── envs/ # All .env files
Tech Stack
| Category | Technology |
|---|---|
| Monorepo | Turborepo 2.x + pnpm workspaces |
| Language | TypeScript 5.8 |
| Frontend | React 19 (or Vue, Svelte, Angular via framework option) |
| Build | Vite 7 |
| Styling | Tailwind CSS 4, DaisyUI 5 |
| Auth | Firebase, Supabase, or Custom backend (runtime-switchable) |
| Payments | Stripe |
| Validation | Zod |
Two-Stage Build Pipeline
- Stage 1: Each app (background, popup, main, in-page) is built by Vite into its own
dist/. - Stage 2:
repo-assemblecopies outputs, injects the browser manifest, and produces the final extension inapps/extension/dist/.
pnpm build:chrome # Chrome/Chromium extension
pnpm build:firefox # Firefox extension
pnpm build:edge # Microsoft Edge (Chromium-based)
pnpm build:safari # Safari (macOS only; uses Apple packager)