# chrome-extension-boilerplate-react-vite: Modern Stack for Chrome/Firefox Extensions

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/jonghakseo-chrome-extension-boilerplate-react-vite
Generated for open source discovery and AI-assisted research.

This repository provides a robust boilerplate for developing Chrome and Firefox extensions. It leverages modern web technologies like React, Vite, and TypeScript to offer a fast and efficient development experience. Developers can quickly set up new projects with features such as HMR, Tailwind CSS, and a modular structure.

GitHub: https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite
OSRepos URL: https://osrepos.com/repo/jonghakseo-chrome-extension-boilerplate-react-vite

## Summary

This repository provides a robust boilerplate for developing Chrome and Firefox extensions. It leverages modern web technologies like React, Vite, and TypeScript to offer a fast and efficient development experience. Developers can quickly set up new projects with features such as HMR, Tailwind CSS, and a modular structure.

## Topics

- React
- Vite
- TypeScript
- Chrome Extension
- Firefox Extension
- Boilerplate
- Web Development
- Browser Development

## Repository Information

Last analyzed by OSRepos: Thu Mar 26 2026 00:28:51 GMT+0000 (Western European Standard Time)
Detail views: 7
GitHub clicks: 13

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introduction

The `chrome-extension-boilerplate-react-vite` is a robust and modern boilerplate for creating browser extensions for both Chrome and Firefox. Developed by Jonghakseo, this project integrates cutting-edge technologies such as React, Vite, and TypeScript, providing a fast and efficient development experience. It supports Chrome's Manifest Version 3, ensuring compatibility with the latest standards for extensions. With the inclusion of Turborepo, monorepo management is simplified, optimizing the workflow for complex projects.

## Installation

To start developing with this boilerplate, follow these steps:

1.  Clone the repository: `git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite`
2.  Ensure your Node.js version is compatible (check the `.nvmrc` file). It is recommended to use [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#intro){:target="_blank"}.
3.  Install pnpm globally: `npm install -g pnpm`
4.  Run `pnpm install` to install project dependencies.
5.  Configure your IDE (VS Code or WebStorm) with ESLint and Prettier extensions, and select the correct TypeScript version.
6.  For Windows users, it is important to have [WSL enabled and a Linux distribution installed](https://learn.microsoft.com/en-us/windows/wsl/install){:target="_blank"}.
7.  Run `pnpm update-version <version>` to set your extension's desired version.

To develop and load the extension in your browser:

*   **For Chrome:**
    1.  Run `pnpm dev` (or `pnpm build` for production).
    2.  Open `chrome://extensions` in your browser.
    3.  Enable "Developer mode".
    4.  Click "Load unpacked" and select the `dist` directory from your project.
*   **For Firefox:**
    1.  Run `pnpm dev:firefox` (or `pnpm build:firefox` for production).
    2.  Open `about:debugging#/runtime/this-firefox` in your browser.
    3.  Click "Load Temporary Add-on..." and select the `./dist/manifest.json` file.

## Examples

This boilerplate offers a modular structure that enables the creation of diverse extension functionalities:

*   **Extension Pages:** It includes support for `background` scripts, `content` scripts (injected into web pages), `content-ui` React components (injected into pages), `devtools`, `devtools-panel`, custom `new-tab` pages, `options` pages, `popup`, and `side-panel` (Chrome 114+).
*   **Shared Packages:** The project utilizes a monorepo with Turborepo, featuring shared packages like `i18n` for internationalization, `storage` for easy integration with the storage API, `hmr` for custom Hot Module Reloading, and `env` for environment variable management.
*   **End-to-End Testing:** Support for E2E testing with [WebdriverIO](https://webdriver.io/){:target="_blank"}, ensuring the quality and functionality of your extension.

## Why Use It

Choosing `chrome-extension-boilerplate-react-vite` offers several advantages:

*   **Modern Development:** It harnesses the power of React, TypeScript, and Vite for agile and high-performance development.
*   **Enhanced Developer Experience:** With Hot Module Reloading (HMR) and Turborepo, build times are reduced, and feedback during development is nearly instant.
*   **Comprehensive Structure:** It supports a wide range of extension page types and includes utility packages for i18n, state management, and environment variables, making it easier to build complex extensions.
*   **Compatibility:** Fully compatible with Chrome's Manifest Version 3 and supports both Chrome and Firefox.
*   **Active Community:** Features a community on [Discord](https://discord.gg/4ERQ6jgV9a){:target="_blank"} for support and idea exchange.

## Links

*   **GitHub Repository:** [https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite){:target="_blank"}
*   **Discord Community:** [https://discord.gg/4ERQ6jgV9a](https://discord.gg/4ERQ6jgV9a){:target="_blank"}
*   **React Documentation:** [https://reactjs.org/](https://reactjs.org/){:target="_blank"}
*   **TypeScript Documentation:** [https://www.typescriptlang.org/](https://www.typescriptlang.org/){:target="_blank"}
*   **Vite Documentation:** [https://vitejs.dev/](https://vitejs.dev/){:target="_blank"}
*   **Turborepo Documentation:** [https://turbo.build/repo](https://turbo.build/repo){:target="_blank"}
*   **Tailwind CSS Documentation:** [https://tailwindcss.com/](https://tailwindcss.com/){:target="_blank"}
*   **Chrome Extensions Documentation:** [https://developer.chrome.com/docs/extensions](https://developer.chrome.com/docs/extensions){:target="_blank"}