A minimal Chrome extension template built with React and Mantine UI. This template provides a clean starting point for building Chrome extensions with a modern UI framework.
- React 18: Built with the latest version of React
- Mantine UI: Beautiful and customizable UI components
- Modern Build System: Uses Vite for fast development and builds
- TypeScript Support: Includes TypeScript configurations
- Notification System: Demonstrates Mantine's notification system
- Tabler Icons: Integrated with Mantine UI
- Clone this repository
- Install dependencies:
npm install
- Build the extension:
npm run build
- Load the extension:
- Open Chrome and go to
chrome://extensions/ - Enable "Developer mode"
- Click "Load unpacked" and select the
distdirectory
- Open Chrome and go to
├── src/
│ ├── App.jsx # Main application component
│ ├── main.jsx # Application entry point
│ └── App.css # Global styles
├── src/components/ # Component directory
└── index.html # HTML template
├── manifest.json # Extension manifest
├── vite.config.js # Vite configuration
└── manifest.json # Extension manifest
└── icon.png # Extension icon
└── PRIVACY.md # Privacy policy
└── README.md # Project README
└── package.json # Project configuration
└── package-lock.json # Project lock file
The template uses Mantine UI's theme system. You can customize the theme in App.jsx:
<MantineProvider
theme={{
colorScheme: preferredColorScheme,
// Add your theme customizations here
}}
>
