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

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.

Use at your own risk

OSRepos shares public repositories for knowledge and discovery only. Any installation, execution, configuration, or use of code from these repositories is the user's own responsibility. Always review the repository, source code, dependencies, licenses, and security implications before running or installing anything. OSRepos is not responsible for issues, damages, or losses resulting from third-party repositories.

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:

Clone the repository: git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite
Ensure your Node.js version is compatible (check the .nvmrc file). It is recommended to use nvm.
Install pnpm globally: npm install -g pnpm
Run pnpm install to install project dependencies.
Configure your IDE (VS Code or WebStorm) with ESLint and Prettier extensions, and select the correct TypeScript version.
For Windows users, it is important to have WSL enabled and a Linux distribution installed.
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, 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 for support and idea exchange.