Wxt React Shadcn Tailwindcss Chrome Extension

Develop Modern Chrome Extensions with Wxt, React, and Tailwind CSS

This project provides a comprehensive boilerplate and starter kit designed to accelerate the development of Chrome browser extensions. It integrates modern technologies like Wxt, React, Tailwind CSS, Shadcn UI, and TypeScript. Developers can leverage its pre-configured setup, including support for dark mode and localization, to build feature-rich and visually appealing extensions efficiently. The starter kit also addresses common challenges like Tailwind CSS rem unit behavior in shadow DOM.

Features:

• Wxt Framework Integration: Leverages Wxt for an optimized browser extension development workflow.
• React for UI Development: Utilizes React to build dynamic and interactive user interfaces.
• Tailwind CSS for Styling: Implements Tailwind CSS for rapid, utility-first styling.
• Shadcn UI Component Library: Integrates Shadcn UI for accessible and customizable components.
• TypeScript for Code Quality: Employs TypeScript for enhanced type safety and maintainability.
• Built-in Dark Mode: Features out-of-the-box support for dark mode theming.
• Internationalization (i18n) Support: Includes setup for localization to support multiple languages using i18next.
• CSS rem to px Fix: Provides a solution for Tailwind CSS rem unit rendering in shadow DOM by converting units to pixels.
• Simplified Shadcn UI Addition: Allows easy addition of new Shadcn UI components using a CLI command.
• Action Click Event Handling Notes: Offers guidance on managing browser action click listeners when openPanelOnActionClick is active.

Summary:

This Chrome extension boilerplate offers a modern tech stack including Wxt, React, Tailwind CSS, and Shadcn UI, packaged with TypeScript. It's designed to streamline development with features like dark mode, localization, and solutions for common extension development challenges. Developers can quickly start building sophisticated and well-styled Chrome extensions, benefiting from a pre-configured environment and clear guidelines for common issues, such as CSS scoping and event handling.