Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/turbostarter/extro
Open source browser extension starter kit 🧩
https://github.com/turbostarter/extro
ai boilerplate browser-extension chrome-extension edge-extension extension firefox-addon plasmo react shadcn starter-kit supabase tailwindcss typescript
Last synced: about 1 month ago
JSON representation
Open source browser extension starter kit 🧩
- Host: GitHub
- URL: https://github.com/turbostarter/extro
- Owner: turbostarter
- License: mit
- Created: 2024-10-30T20:39:06.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-13T08:37:06.000Z (about 1 month ago)
- Last Synced: 2024-11-13T09:29:48.469Z (about 1 month ago)
- Topics: ai, boilerplate, browser-extension, chrome-extension, edge-extension, extension, firefox-addon, plasmo, react, shadcn, starter-kit, supabase, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://turbostarter.dev
- Size: 879 KB
- Stars: 34
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-opensource-boilerplates - Extro - Open source browser extension starter kit. (Browser Extensions)
- my-awesome-list - extro
- awesome-bun - Extro - open source browser extension starter kit
README
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](https://github.com/EinGuterWaran/awesome-opensource-boilerplates) and [Awesome SaaS Boilerplates](https://github.com/smirnov-am/awesome-saas-boilerplates)
> [!TIP]
> Sharing storage and authentication session between all pages
>
> https://github.com/user-attachments/assets/970eddf8-5faf-42cc-89ed-54b7c7548bc8
- 🔒 Full type-safety with Typescript
- 📄 All pages (background, popup, options etc.)
- 📜 Content scripts
- 🔐 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](https://github.com/mattpocock/ts-reset) for enhanced DX
- 💳 Billing (coming soon)
| Tech | Description |
| ---------------------------------------------- | ----------------------------------------------------------------------------- |
| [TypeScript](https://www.typescriptlang.org/) | Static type-checking programming language |
| [React](https://reactjs.org/) | Library for building user interfaces |
| [Plasmo](https://www.plasmo.com/) | Next.js for browser extensions |
| [Supabase](https://supabase.com/) | Open source Firebase alternative |
| [shadcn/ui](https://ui.shadcn.com/) | Extendable component library |
| [Tailwind](https://tailwindcss.com/) | Utility-first CSS framework |
| [OpenPanel](https://openpanel.dev/) | Open source analytics |
| [React Hook Form](https://react-hook-form.com) | Forms with easy-to-use validation |
| [Bun](https://bun.sh/) | Package manager and build tool |
| [Husky](https://github.com/typicode/husky) | Git hooks |
| [Biome](https://biomejs.dev/) | Linting and formatting |
Please read [CONTRIBUTING.md](./CONTRIBUTING.md).
### Prerequisites
- [Bun](https://bun.sh/)
### Installation
1. Clone the repository
```bash
git clone [email protected]:turbostarter/extro.git
```
2. Install dependencies
```bash
bun install
```
3. Copy `.env.example` to `.env` and update the variables
```bash
cp .env.example .env
```
### Development
#### Chrome
1. Run development server
```bash
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-dev` directory at root
#### Firefox
1. Run development server
```bash
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-dev/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. Copy `keys.template.json` to `keys.json` and update the keys (check the [official token guide](https://github.com/PlasmoHQ/bms/blob/main/tokens.md) to learn more about the tokens required to submit)
2. Set content of `keys.json` as [Github secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets) under `SUBMIT_KEYS` name
3. Run `CI / Publish` workflow
### Pages
Extro ships with the following extension pages preconfigured:
- `background` - [background service worker](https://docs.plasmo.com/framework/background-service-worker)
- `contents` - [content scripts](https://docs.plasmo.com/framework/content-scripts) that run in the context of web pages
- `devtools` - [devtools](https://docs.plasmo.com/framework/devtools) page with custom panels
- `newtab` - [new tab](https://docs.plasmo.com/framework/newtab) page
- `options` - [options](https://docs.plasmo.com/framework/options) page
- `popup` - [popup](https://docs.plasmo.com/framework/popup) window
- `sidepanel` - [side panel](https://docs.plasmo.com/framework/sidepanel)
- `tabs` - [tabs](https://docs.plasmo.com/framework/tabs) pages (custom pages delivered with the extension)
To chat with other community members, you can join the [Discord](https://discord.gg/KjpK2uk3JP) 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!
---
Made with ❤️ by [Bartosz Zagrodzki](https://zagrodzki.me)