WXT-Mantine-Tailwind - Modern Browser Extension Starter

A production-ready template for building cross-browser extensions with:

• WXT - Next-gen browser extension framework
• React - Component-based UI library
• TypeScript - Type-safe JavaScript
• Mantine UI - Feature-rich component library
• Tailwind CSS - Utility-first CSS framework

Project Structure

wxtMantine/
├── public/                  # Static assets
│   ├── icon/                # Extension icons (16px, 32px, 48px, 96px, 128px)
├── src/
│   ├── components/          # UI components
│   ├── entrypoints/         # Extension entry points
│   │   ├── background/      # Background service worker
│   │   ├── content/         # Content script
│   │   └── popup/           # Popup interface
│   ├── hooks/               # Custom React hooks
│   ├── services/            # Business logic
│   ├── styles/              # Global styles
├── config/                  # Configuration files
│   ├── wxt.config.ts        # WXT configuration
│   ├── tailwind.config.js   # Tailwind config
│   └── tsconfig.json        # TypeScript config

Key Features

✔ Cross-browser support (Chrome, Firefox, Edge) ✔ Dark/light theme system ✔ Ready-to-use UI components ✔ Optimized production builds ✔ TypeScript support out of the box ✔ Modern development workflow

Getting Started

1. Clone the repository:

git clone https://github.com/ongkay/WXT-Mantine-Tailwind-Browser-Extension.git

2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Build for production:

npm run build

Browser Support

• Chrome (latest)
• Firefox (latest)
• Edge (latest)

License

MIT License © 2025