{"name":"chrome-extension-boilerplate-react-vite: Modern Stack for Chrome/Firefox Extensions","description":"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","url":"https://osrepos.com/repo/jonghakseo-chrome-extension-boilerplate-react-vite","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/jonghakseo-chrome-extension-boilerplate-react-vite","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/jonghakseo-chrome-extension-boilerplate-react-vite.md","json":"https://osrepos.com/repo/jonghakseo-chrome-extension-boilerplate-react-vite.json","topics":["React","Vite","TypeScript","Chrome Extension","Firefox Extension","Boilerplate","Web Development","Browser Development"],"keywords":["React","Vite","TypeScript","Chrome Extension","Firefox Extension","Boilerplate","Web Development","Browser Development"],"stars":null,"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.","content":"## Introduction\n\nThe `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.\n\n## Installation\n\nTo start developing with this boilerplate, follow these steps:\n\n1.  Clone the repository: `git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite`\n2.  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\"}.\n3.  Install pnpm globally: `npm install -g pnpm`\n4.  Run `pnpm install` to install project dependencies.\n5.  Configure your IDE (VS Code or WebStorm) with ESLint and Prettier extensions, and select the correct TypeScript version.\n6.  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\"}.\n7.  Run `pnpm update-version <version>` to set your extension's desired version.\n\nTo develop and load the extension in your browser:\n\n*   **For Chrome:**\n    1.  Run `pnpm dev` (or `pnpm build` for production).\n    2.  Open `chrome://extensions` in your browser.\n    3.  Enable \"Developer mode\".\n    4.  Click \"Load unpacked\" and select the `dist` directory from your project.\n*   **For Firefox:**\n    1.  Run `pnpm dev:firefox` (or `pnpm build:firefox` for production).\n    2.  Open `about:debugging#/runtime/this-firefox` in your browser.\n    3.  Click \"Load Temporary Add-on...\" and select the `./dist/manifest.json` file.\n\n## Examples\n\nThis boilerplate offers a modular structure that enables the creation of diverse extension functionalities:\n\n*   **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+).\n*   **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.\n*   **End-to-End Testing:** Support for E2E testing with [WebdriverIO](https://webdriver.io/){:target=\"_blank\"}, ensuring the quality and functionality of your extension.\n\n## Why Use It\n\nChoosing `chrome-extension-boilerplate-react-vite` offers several advantages:\n\n*   **Modern Development:** It harnesses the power of React, TypeScript, and Vite for agile and high-performance development.\n*   **Enhanced Developer Experience:** With Hot Module Reloading (HMR) and Turborepo, build times are reduced, and feedback during development is nearly instant.\n*   **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.\n*   **Compatibility:** Fully compatible with Chrome's Manifest Version 3 and supports both Chrome and Firefox.\n*   **Active Community:** Features a community on [Discord](https://discord.gg/4ERQ6jgV9a){:target=\"_blank\"} for support and idea exchange.\n\n## Links\n\n*   **GitHub Repository:** [https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite](https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite){:target=\"_blank\"}\n*   **Discord Community:** [https://discord.gg/4ERQ6jgV9a](https://discord.gg/4ERQ6jgV9a){:target=\"_blank\"}\n*   **React Documentation:** [https://reactjs.org/](https://reactjs.org/){:target=\"_blank\"}\n*   **TypeScript Documentation:** [https://www.typescriptlang.org/](https://www.typescriptlang.org/){:target=\"_blank\"}\n*   **Vite Documentation:** [https://vitejs.dev/](https://vitejs.dev/){:target=\"_blank\"}\n*   **Turborepo Documentation:** [https://turbo.build/repo](https://turbo.build/repo){:target=\"_blank\"}\n*   **Tailwind CSS Documentation:** [https://tailwindcss.com/](https://tailwindcss.com/){:target=\"_blank\"}\n*   **Chrome Extensions Documentation:** [https://developer.chrome.com/docs/extensions](https://developer.chrome.com/docs/extensions){:target=\"_blank\"}","metrics":{"detailViews":7,"githubClicks":13},"dates":{"published":null,"modified":"2026-03-26T00:28:51.000Z"}}