This boilerplate has Plasmo version

Features · Tech stack · Contributing · Getting started · Community · Star History

Everything you need to build a production ready browser extension, it's an opinionated stack based on learnings from building multiple browser extensions using the latest React framework. It's a starter kit with a focus on code reuse and best practices that will grow with your business.

Note

This project is listed on Awesome Open Source Boilerplates and Awesome SaaS Boilerplates

Tip

Sharing storage and authentication session between all pages

extro-showcase.mp4

Features ✨

• 🔒 Full type-safety with Typescript
• 📄 All pages (background, popup, options etc.)
• 📜 Content scripts (UI)
• 🔐 Authentication (OAuth)
• 💾 Storage
• 💬 Messaging
• 🔥 Hot reloading
• 🚀 One-click publishing
• 🌍 Internationalization
• 📊 Analytics
• ✨ Linting and formatting
• 🧪 Unit tests
• 🔄 CI/CD pipelines
• ⚙️ Environment variables
• 🎨 shadcn/ui compatible
• 🔤 Custom fonts
• 🤖 Native AI integration (experimental)
• ✨ ts-reset for enhanced DX
• 💳 Billing (coming soon)

Tech stack 🛠️

Tech	Description
TypeScript	Static type-checking programming language
React	Library for building user interfaces
WXT	Next-gen Web Extension Framework
Supabase	Open source Firebase alternative
shadcn/ui	Extendable component library
Tailwind	Utility-first CSS framework
OpenPanel	Open source analytics
React Hook Form	Forms with easy-to-use validation
Vite	Next generation frontend tool
Bun	Package manager and build tool
Husky	Git hooks
Biome	Linting and formatting

Contributing 🤝

Please read CONTRIBUTING.md.

Getting started 🚀

Prerequisites

• Bun

Installation

1. Clone the repository

git clone git@github.com:turbostarter/extro.git

2. Install dependencies

bun install

3. Copy .env.example to .env and update the variables

cp .env.example .env

Development

Chrome

1. Run development server

bun dev:chrome

2. Open Chrome and go to chrome://extensions
3. Check Developer mode
4. Click Load unpacked
5. Select the build/chrome-mv3 directory at root

Firefox

1. Run development server

bun dev:firefox

2. Open Firefox and go to about:debugging#/runtime/this-firefox
3. Click Load Temporary Add-on...
4. Select the build/firefox-mv2/manifest.json file at root

Note

In Firefox you're adding a plugin in temporary mode - that means it'll disappear after you close the browser.

Publishing

Manual

1. Run bun run build to build the extension for both Chrome and Firefox or bun build:chrome or bun build:firefox to build only for one of the browsers.
2. Go to the build directory and upload the .zip files to the Chrome Web Store and Firefox Add-ons.

CI/CD

1. Obtain all the required API keys for your submission (check the official token guide to learn more about the tokens required to submit)
2. Set your API keys as Github secrets under appropriate names
3. Run CI / Publish workflow

Pages

Extro ships with the following extension pages preconfigured:

• background - background service worker
• content - content scripts that run in the context of web pages
• devtools - devtools page with custom panels
• newtab - new tab page
• options - options page
• popup - popup window
• sidepanel - side panel
• tabs - unlisted pages (custom pages delivered with the extension)

Community 💬

To chat with other community members, you can join the Discord server. You can ask questions on that server, and you can also help others.

Also, suggest new features or share any challenges you've faced while developing Chrome extensions!

Star History 🌟

---

Made with ❤️ by Bartosz Zagrodzki