Awesome

GitHub license <a href="https://discord.gg/KjpK2uk3JP" target="_blank"><img src="https://discord.com/api/guilds/1280456871693779006/widget.png"/></a>

This boilerplate has Plasmo version

</div> <a href="#features">Features</a> · <a href="#tech-stack">Tech stack</a> · <a href="#contributing">Contributing</a> · <a href="#getting-started">Getting started</a> · <a href="#community">Community</a> · <a href="#star-history">Star History</a>

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

https://github.com/user-attachments/assets/970eddf8-5faf-42cc-89ed-54b7c7548bc8

Features ✨ <a name="features"></a>

🔒 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 🛠️ <a name="tech-stack"></a>

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 🤝 <a name="contributing"></a>

Please read CONTRIBUTING.md.

Getting started 🚀 <a name="getting-started"></a>

Prerequisites

Installation

Clone the repository

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

Install dependencies

bun install

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

cp .env.example .env

Development

Chrome

Run development server

bun dev:chrome

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

Firefox

Run development server

bun dev:firefox

Open Firefox and go to about:debugging#/runtime/this-firefox
Click Load Temporary Add-on...
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

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.
Go to the build directory and upload the .zip files to the Chrome Web Store and Firefox Add-ons.

CI/CD

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

Community 💬 <a name="community"></a>

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 🌟 <a name="star-history"></a>

Made with ❤️ by Bartosz Zagrodzki