{"id":20799811,"url":"https://github.com/turbostarter/extro","last_synced_at":"2025-04-05T22:03:44.148Z","repository":{"id":260662454,"uuid":"881051345","full_name":"turbostarter/extro","owner":"turbostarter","description":"Open source browser extension starter kit 🧩","archived":false,"fork":false,"pushed_at":"2025-01-23T10:53:59.000Z","size":1230,"stargazers_count":142,"open_issues_count":0,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T21:02:47.374Z","etag":null,"topics":["ai","boilerplate","browser-extension","chrome-extension","edge-extension","extension","firefox-addon","plasmo","react","shadcn","starter-kit","supabase","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://turbostarter.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/turbostarter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-30T20:39:06.000Z","updated_at":"2025-03-26T21:25:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"81d860e2-f402-4760-82a4-62d64acd4194","html_url":"https://github.com/turbostarter/extro","commit_stats":{"total_commits":15,"total_committers":1,"mean_commits":15.0,"dds":0.0,"last_synced_commit":"f41c71e28c1afc24a909654a489b1a18cf11c3e0"},"previous_names":["turbostarter/extro"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turbostarter%2Fextro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turbostarter%2Fextro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turbostarter%2Fextro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/turbostarter%2Fextro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/turbostarter","download_url":"https://codeload.github.com/turbostarter/extro/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406084,"owners_count":20933803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","boilerplate","browser-extension","chrome-extension","edge-extension","extension","firefox-addon","plasmo","react","shadcn","starter-kit","supabase","tailwindcss","typescript"],"created_at":"2024-11-17T18:01:55.494Z","updated_at":"2025-04-05T22:03:44.129Z","avatar_url":"https://github.com/turbostarter.png","language":"TypeScript","funding_links":[],"categories":["Browser Extensions","Ionic Framework","Community Starters","Boilerplates","TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n \n \u003cbr /\u003e\n  \u003cbr /\u003e\n\n\u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" width=\"700\" srcset=\"https://github.com/user-attachments/assets/09cf4bfb-36a5-4eda-a892-4ba737d6a531\" /\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" width=\"700\" srcset=\"https://github.com/user-attachments/assets/7ccbabbf-5ddd-4cf0-9e44-cfbc5ba72e06\" /\u003e\n    \u003cimg alt=\"Logo\" width=\"700\" src=\"https://github.com/user-attachments/assets/09cf4bfb-36a5-4eda-a892-4ba737d6a531\" /\u003e\n\u003c/picture\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n![](https://img.shields.io/badge/Bun-000000?style=flat-square\u0026logo=bun\u0026logoColor=white)\n![](https://img.shields.io/badge/React-61DAFB?style=flat-square\u0026logo=react\u0026logoColor=black)\n![](https://img.shields.io/badge/Typescript-3178C6?style=flat-square\u0026logo=typescript\u0026logoColor=white)\n\n![GitHub action badge](https://github.com/turbostarter/extro/actions/workflows/tests.yml/badge.svg)\n![GitHub action badge](https://github.com/turbostarter/extro/actions/workflows/publish.yml/badge.svg)\n\n![GitHub license](https://img.shields.io/github/license/turbostarter/extro)\n\u003ca href=\"https://discord.gg/KjpK2uk3JP\" target=\"_blank\"\u003e\u003cimg src=\"https://discord.com/api/guilds/1280456871693779006/widget.png\"/\u003e\u003c/a\u003e\n\n\u003e This boilerplate\n\u003e has [Plasmo version](https://github.com/turbostarter/extro/tree/plasmo)\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"#features\"\u003e\u003cstrong\u003eFeatures\u003c/strong\u003e\u003c/a\u003e · \n    \u003ca href=\"#tech-stack\"\u003e\u003cstrong\u003eTech stack\u003c/strong\u003e\u003c/a\u003e · \n    \u003ca href=\"#contributing\"\u003e\u003cstrong\u003eContributing\u003c/strong\u003e\u003c/a\u003e ·\n    \u003ca href=\"#getting-started\"\u003e\u003cstrong\u003eGetting started\u003c/strong\u003e\u003c/a\u003e ·\n    \u003ca href=\"#community\"\u003e\u003cstrong\u003eCommunity\u003c/strong\u003e\u003c/a\u003e ·\n    \u003ca href=\"#star-history\"\u003e\u003cstrong\u003eStar History\u003c/strong\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\n\n  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.\n\n\u003e [!NOTE]\n\u003e 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)\n\n\n\u003e [!TIP]\n\u003e Sharing storage and authentication session between all pages\n\u003e\n\u003e https://github.com/user-attachments/assets/970eddf8-5faf-42cc-89ed-54b7c7548bc8\n\n\n## Features ✨ \u003ca name=\"features\"\u003e\u003c/a\u003e\n\n- 🔒 Full type-safety with Typescript\n- 📄 All pages (background, popup, options etc.)\n- 📜 Content scripts (UI)\n- 🔐 Authentication (OAuth)\n- 💾 Storage\n- 💬 Messaging\n- 🔥 Hot reloading\n- 🚀 One-click publishing\n- 🌍 Internationalization\n- 📊 Analytics\n- ✨ Linting and formatting\n- 🧪 Unit tests\n- 🔄 CI/CD pipelines\n- ⚙️ Environment variables\n- 🎨 shadcn/ui compatible\n- 🔤 Custom fonts\n- 🤖 Native AI integration (experimental)\n- ✨ [ts-reset](https://github.com/mattpocock/ts-reset) for enhanced DX\n- 💳 Billing (coming soon)\n\n## Tech stack 🛠️ \u003ca name=\"tech-stack\"\u003e\u003c/a\u003e\n\n| Tech                                           | Description                                                                   |\n| ---------------------------------------------- | ----------------------------------------------------------------------------- |\n| [TypeScript](https://www.typescriptlang.org/)  | Static type-checking programming language                                     |\n| [React](https://reactjs.org/)                  | Library for building user interfaces                                          |\n| [WXT](https://wxt.dev/)                        | Next-gen Web Extension Framework                                              |\n| [Supabase](https://supabase.com/)              | Open source Firebase alternative                                              |\n| [shadcn/ui](https://ui.shadcn.com/)            | Extendable component library                                                  |\n| [Tailwind](https://tailwindcss.com/)           | Utility-first CSS framework                                                   |\n| [OpenPanel](https://openpanel.dev/)            | Open source analytics                                                         |\n| [React Hook Form](https://react-hook-form.com) | Forms with easy-to-use validation                                             |\n| [Vite](https://vitejs.dev/)                    | Next generation frontend tool                                                 |\n| [Bun](https://bun.sh/)                         | Package manager and build tool                                                |\n| [Husky](https://github.com/typicode/husky)     | Git hooks                                                                     |\n| [Biome](https://biomejs.dev/)                  | Linting and formatting                                                        |\n\n## Contributing 🤝 \u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\nPlease read [CONTRIBUTING.md](./CONTRIBUTING.md).\n\n## Getting started 🚀 \u003ca name=\"getting-started\"\u003e\u003c/a\u003e\n\n### Prerequisites\n\n- [Bun](https://bun.sh/)\n\n### Installation\n\n1. Clone the repository\n\n```bash\ngit clone git@github.com:turbostarter/extro.git\n```\n\n2. Install dependencies\n\n```bash\nbun install\n```\n\n3. Copy `.env.example` to `.env` and update the variables\n\n```bash\ncp .env.example .env\n```\n\n### Development\n\n#### Chrome\n\n1. Run development server\n\n```bash\nbun dev:chrome\n```\n\n2. Open Chrome and go to `chrome://extensions`\n3. Check `Developer mode`\n4. Click `Load unpacked`\n5. Select the `build/chrome-mv3` directory at root\n\n#### Firefox\n\n1. Run development server\n\n```bash\nbun dev:firefox\n```\n\n2. Open Firefox and go to `about:debugging#/runtime/this-firefox`\n3. Click `Load Temporary Add-on...`\n4. Select the `build/firefox-mv2/manifest.json` file at root\n\n\u003e [!NOTE]  \n\u003e In Firefox you're adding a plugin in _temporary_ mode - that means it'll disappear after you close the browser.\n\n### Publishing\n\n#### Manual\n\n1. 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.\n2. Go to the `build` directory and upload the `.zip` files to the Chrome Web Store and Firefox Add-ons.\n\n#### CI/CD\n\n1. Obtain all the [required API keys](https://wxt.dev/guide/essentials/publishing.html#github-action) for your submission (check the [official token guide](https://github.com/PlasmoHQ/bms/blob/main/tokens.md) to learn more about the tokens required to submit)\n2. Set your API keys as [Github secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) under appropriate names\n3. Run `CI / Publish` workflow\n\n### Pages\n\nExtro ships with the following extension pages preconfigured:\n\n- `background` - [background service worker](https://wxt.dev/guide/essentials/entrypoints.html#background)\n- `content` - [content scripts](https://wxt.dev/guide/essentials/content-scripts.html) that run in the context of web pages\n- `devtools` - [devtools](https://wxt.dev/guide/essentials/entrypoints.html#devtools) page with custom panels\n- `newtab` - [new tab](https://wxt.dev/guide/essentials/entrypoints.html#newtab) page\n- `options` - [options](https://wxt.dev/guide/essentials/entrypoints.html#options) page\n- `popup` - [popup](https://wxt.dev/guide/essentials/entrypoints.html#popup) window\n- `sidepanel` - [side panel](https://wxt.dev/guide/essentials/entrypoints.html#side-panel)\n- `tabs` - [unlisted](https://wxt.dev/guide/essentials/entrypoints.html#unlisted-pages) pages (custom pages delivered with the extension)\n\n## Community 💬 \u003ca name=\"community\"\u003e\u003c/a\u003e\n\nTo chat with other community members, you can join the [Discord](https://discord.gg/KjpK2uk3JP) server.\nYou can ask questions on that server, and you can also help others.\n\nAlso, suggest new features or share any challenges you've faced while developing Chrome extensions!\n\n## Star History 🌟 \u003ca name=\"star-history\"\u003e\u003c/a\u003e\n\n\u003ca href=\"https://star-history.com/#turbostarter/extro\u0026Date\"\u003e\n \u003cpicture\u003e\n   \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=turbostarter/extro\u0026type=Date\u0026theme=dark\" /\u003e\n   \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://api.star-history.com/svg?repos=turbostarter/extro\u0026type=Date\" /\u003e\n   \u003cimg alt=\"Star History Chart\" src=\"https://api.star-history.com/svg?repos=turbostarter/extro\u0026type=Date\" /\u003e\n \u003c/picture\u003e\n\u003c/a\u003e\n\n\n---\n\nMade with ❤️ by [Bartosz Zagrodzki](https://zagrodzki.me)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturbostarter%2Fextro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fturbostarter%2Fextro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fturbostarter%2Fextro/lists"}