How do I add a custom page to my Extro-based extension?

Extro uses WXT's entrypoint system; you can create new files in the pages directory following the existing structure, such as adding a new HTML or React component file, and WXT will automatically include it in the build. Refer to the 'Pages' section in the README for guidance on preconfigured pages.

Extro or Plasmo: which is better for building React extensions?

Extro is more opinionated with integrated services like Supabase and production tooling, while Plasmo offers more flexibility and a larger community. Choose Extro for a batteries-included approach with less configuration, or Plasmo if you prefer customization and broader ecosystem support.

Does Extro support Safari browser extensions?

No, Extro is built on WXT which primarily targets Chrome and Firefox. For Safari, you might need additional configuration or use a different framework, as Safari uses a different extension manifest system not covered in the development setup.

How to set up OAuth authentication with Extro and Supabase?

Extro pre-configures Supabase authentication; you need to set up a Supabase project, add your credentials to the .env file, and use the provided hooks and components to handle OAuth flows in your extension pages. The README mentions authentication as a key feature with OAuth integration.

Can I use Extro without the Bun package manager?

Extro is optimized for Bun, and the scripts in package.json rely on Bun. While possible to adapt, it's not recommended as you might face compatibility issues with dependencies and build processes designed for Bun, as stated in the prerequisites.

What's the performance impact of using Extro for a simple popup extension?

Extro includes many features by default, such as analytics and internationalization, which can increase bundle size and load time. For very simple extensions, you might consider a lighter starter or manually prune unused features to optimize performance.

Open-Awesome

Extro

MITTypeScript

An opinionated starter kit for building production-ready browser extensions with React, TypeScript, and modern tooling.

Visit Website GitHub

397 stars36 forks0 contributors

What is Extro?

Extro is an open-source browser extension starter kit that provides a fully configured development environment for building production-ready extensions. It solves the problem of setting up complex tooling and integrations from scratch by offering an opinionated stack with authentication, storage, analytics, and publishing workflows pre-integrated.

Target Audience

Developers and teams building browser extensions who want a modern, type-safe foundation with React and best practices, avoiding manual configuration of common extension features.

Value Proposition

Developers choose Extro for its comprehensive feature set, focus on code reuse, and production-ready tooling, which significantly reduces initial setup time and ensures a scalable architecture based on proven patterns from real-world extension development.

Overview

Open source browser extension starter kit 🧩

Use Cases

Best For

Building Chrome or Firefox extensions with React and TypeScript
Teams needing a pre-configured CI/CD pipeline for extension publishing
Extensions requiring OAuth authentication and shared user sessions
Projects that benefit from integrated analytics and internationalization
Developers who prefer an opinionated, batteries-included starter kit
Rapid prototyping of browser extensions with modern tooling

Not Ideal For

Extensions targeting Safari or other browsers not supported by WXT
Projects that prefer frameworks other than React, such as Vue.js or Svelte
Developers who need a minimal, unopinionated starter without integrated third-party services like Supabase
Teams with existing extension codebases who don't want to migrate to an opinionated stack

Pros & Cons

Pros

Comprehensive Feature Set

Includes pre-configured authentication, storage, analytics, internationalization, and multiple extension pages, reducing setup time for common needs as listed in the features section.

Production-Ready Tooling

Comes with CI/CD pipelines, hot reloading, linting, formatting, and one-click publishing workflows, streamlining development and deployment based on the README's emphasis on best practices.

Type-Safe Development

Built with TypeScript and integrated ts-reset for enhanced type safety, ensuring reliable code and better developer experience as highlighted in the tech stack.

Integrated Developer Experience

Uses Bun, Vite, and WXT for fast builds and development, with pre-configured scripts for Chrome and Firefox, simplifying local testing and iteration.

Cons

Vendor Lock-in to Supabase

Authentication and storage are tightly integrated with Supabase, making it difficult to switch to other backend services without significant refactoring, as implied by the reliance on Supabase in the tech stack.

Complex Setup for Newcomers

Requires familiarity with multiple technologies including React, TypeScript, WXT, and Supabase, which can be overwhelming for developers new to this opinionated stack, despite the detailed getting started guide.

Limited Browser Support

Primarily supports Chrome and Firefox via WXT, with no built-in support for Safari or other browsers, potentially limiting cross-browser compatibility as noted in the development instructions.

Frequently Asked Questions

Related Projects

SupaSasS Lite

A production-ready SaaS template built with Next.js 15, Supabase, and Tailwind CSS. Includes authentication, user management, file storage, task management demos, and secure RLS policies. Now with a complete React Native + Expo mobile app template! Easily customizable with pre-built themes, i18n support (EN/PL/ZH), and legal documents.

Stars317

Forks179

Last commit7 months ago

Vuepabase

A Vue3 + Supabase starter template

Stars61

Forks5

Last commit3 years ago

SupaSocial

Official Supabase community starter. Social media template with opinionated modern frameworks (React, TypeScript, Zustand, etc)

Stars26

Forks3

Last commit9 months ago

Supanext

Supabase starter with Next.js, including AI app examples, auth, billing, settings, landing page, blog, and more

Stars0

Forks0

Last commit

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub