chrome-extension-boilerplate-react-vite

Chrome Extension Boilerplate with React + Vite + Typescript

2,567

384

2,567

View on GitHub

Top Related Projects

chrome-extension-boilerplate-react

3,547

A Chrome Extensions boilerplate using React 18 and Webpack 5.

web-extension-starter

2,020

🖥🔋Web Extension starter to build "Write Once Run on Any Browser" extension

chrome-extension-cli

2,385

🚀 The CLI for your next Chrome Extension

Quick Overview

This project is a boilerplate for creating Chrome extensions using React and Vite. It provides a modern, efficient development environment with hot module replacement (HMR) and TypeScript support, making it easier to build and maintain complex Chrome extensions.

Pros

Fast development with Vite and HMR support
TypeScript integration for improved code quality and maintainability
Pre-configured with React for building user interfaces
Includes example implementations for various Chrome extension components (popup, options, content script, etc.)

Cons

May have a steeper learning curve for developers new to React or TypeScript
Requires familiarity with modern JavaScript tooling and build processes
Limited documentation compared to some other boilerplates
Might be overkill for simple extensions that don't require a full React setup

Getting Started

Clone the repository:

git clone https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite.git

Install dependencies:

cd chrome-extension-boilerplate-react-vite
npm install

Start the development server:
```
npm run dev
```
Build the extension for production:
```
npm run build
```
Load the extension in Chrome:
- Open Chrome and navigate to chrome://extensions
- Enable "Developer mode"
- Click "Load unpacked" and select the dist folder in your project directory

Competitor Comparisons

chrome-extension-boilerplate-react

3,547

A Chrome Extensions boilerplate using React 18 and Webpack 5.

Pros of chrome-extension-boilerplate-react

Uses Create React App, providing a familiar and well-documented setup for React developers
Includes a comprehensive README with detailed instructions and explanations
Supports both Chrome and Firefox browsers out of the box

Cons of chrome-extension-boilerplate-react

Uses older technology stack (Webpack, older React version)
Less active maintenance and updates compared to the Vite-based alternative
Lacks some modern development features like hot module replacement (HMR)

Code Comparison

chrome-extension-boilerplate-react:

{
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  }
}

chrome-extension-boilerplate-react-vite:

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

The code comparison shows the difference in build tools and scripts. The Vite-based boilerplate uses more modern and faster build processes, while the Create React App-based boilerplate uses traditional Node.js scripts.

chrome-extension-boilerplate-react-vite offers a more up-to-date tech stack with Vite, TypeScript, and newer React features. It provides faster development experience with HMR and improved build times. However, chrome-extension-boilerplate-react may be more suitable for developers familiar with Create React App and those targeting multiple browsers from the start.

web-extension-starter

2,020

🖥🔋Web Extension starter to build "Write Once Run on Any Browser" extension

Pros of web-extension-starter

Supports multiple browsers (Chrome, Firefox, Opera) out of the box
Includes a robust configuration setup with webpack
Provides a well-structured project layout with separate directories for background, content, and popup scripts

Cons of web-extension-starter

Uses older technology stack (webpack, babel) compared to the more modern Vite setup
Less active maintenance and fewer recent updates
Lacks some advanced features like HMR (Hot Module Replacement) for development

Code Comparison

web-extension-starter (webpack.config.js):

module.exports = {
  entry: {
    background: path.join(__dirname, 'source', 'Background', 'index.ts'),
    contentScript: path.join(__dirname, 'source', 'ContentScript', 'index.ts'),
    popup: path.join(__dirname, 'source', 'Popup', 'index.tsx'),
  },
  // ... more configuration
};

chrome-extension-boilerplate-react-vite (vite.config.ts):

export default defineConfig({
  plugins: [react(), svgr(), viteStaticCopy(copyPluginOptions)],
  build: {
    rollupOptions: {
      input: {
        background: resolve(__dirname, 'src/pages/background/index.ts'),
        contentStyle: resolve(__dirname, 'src/pages/content/style.scss'),
        contentScript: resolve(__dirname, 'src/pages/content/index.ts'),
        // ... more entries
      },
    },
  },
});

The code comparison shows the different build tool configurations, highlighting the more modern approach used in chrome-extension-boilerplate-react-vite with Vite.

chrome-extension-cli

2,385

🚀 The CLI for your next Chrome Extension

Pros of chrome-extension-cli

Simpler setup and configuration, making it easier for beginners to get started
Supports multiple JavaScript frameworks (React, Vue, Svelte) and vanilla JavaScript
Includes a command-line interface for easy project scaffolding and management

Cons of chrome-extension-cli

Less opinionated structure, which may require more manual setup for complex projects
Doesn't include built-in support for TypeScript or advanced bundling options
Limited pre-configured development tools compared to chrome-extension-boilerplate-react-vite

Code Comparison

chrome-extension-cli (package.json):

{
  "scripts": {
    "start": "web-ext run",
    "build": "web-ext build"
  }
}

chrome-extension-boilerplate-react-vite (package.json):

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  }
}

The code comparison shows that chrome-extension-cli uses web-ext for development and building, while chrome-extension-boilerplate-react-vite utilizes Vite and TypeScript for a more advanced development setup.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

This boilerplate has Legacy version

[!NOTE] This project is listed in the Awesome Vite

[!TIP] Share storage state between all pages

https://github.com/user-attachments/assets/3b8e189f-6443-490e-a455-4f9570267f8c

Intro
Features
Structure
Getting started
- Chrome
- Firefox
Install dependency
- For root
- For module
Community
Reference
Star History
Contributors

Intro

This boilerplate helps you create Chrome/Firefox extensions using React and Typescript. It improves the build speed and development experience by using Vite and Turborepo.

Features

Getting started

When you're using Windows run this:
- git config --global core.eol lf
- git config --global core.autocrlf input
This will set the EOL (End of line) character to be the same as on Linux/macOS. Without this, our bash script won't work, and you will have conflicts with developers on Linux/macOS.
Clone this repository.
Check your node version is >= than in .nvmrc file, recommend to use nvm
Edit /packages/i18n/locales/{your locale(s)}/messages.json
In the objects extensionDescription and extensionName, change the message fields (leave description alone)
In /.package.json, change the version to the desired version of your extension.
Install pnpm globally: npm install -g pnpm (check your node version >= 22.12.0))
Run pnpm install

Then, depending on the target browser:

For Chrome:

Run:
- Dev: pnpm dev (on Windows, you should run as administrator; see issue#456)
- Prod: pnpm build
Open in browser - chrome://extensions
Check - Developer mode
Click - Load unpacked in the upper left corner
Select the dist directory from the boilerplate project

For Firefox:

Run:
- Dev: pnpm dev:firefox
- Prod: pnpm build:firefox
Open in browser - about:debugging#/runtime/this-firefox
Click - Load Temporary Add-on... in the upper right corner
Select the ./dist/manifest.json file from the boilerplate project

[!NOTE] In Firefox, you load add-ons in temporary mode. That means they'll disappear after each browser close. You have to load the add-on on every browser launch.

Install dependency for turborepo:

For root:

Run pnpm i <package> -w

For module:

Run pnpm i <package> -F <module name>

package - Name of the package you want to install e.g. nodemon
module-name - You can find it inside each package.json under the key name, e.g. @extension/content-script, you can use only content-script without @extension/ prefix

Environment variables

To add an environment variable:

Copy .example.env to .env (in the same directory)
Add a new record inside .env, prefixed with VITE_, e.g. VITE_MY_API_KEY=...
Edit ./vite-env.d.ts and in the ImportMetaEnv interface, add your variable with the appropriate type, e.g.

readonly VITE_MY_API_KEY: string;
Then you can read the variable via import.meta.env.VITE_MY_API_KEY (learn more at Env Variables and Modes)

If you want to set it for each package independently:

Create .env inside that package
Open related vite.config.mts and add envDir: '.' at the end of this config
Rest steps like above

Remember you can't use global and local at the same time for the same package(It will be overwritten)

Boilerplate structure

Chrome extension

The extension lives in the chrome-extension directory and includes the following files:

manifest.js - script that outputs the manifest.json
src/background - background script (background.service_worker in manifest.json)
public - icons referenced in the manifest; content CSS for user's page injection

[!IMPORTANT] To facilitate development, the boilerplate is configured to "Read and change all your data on all websites". In production, it's best practice to limit the premissions to only the strictly necessary websites. See Declaring permissions and edit manifest.js accordingly.

Packages

Some shared packages:

dev-utils - utilities for Chrome extension development (manifest-parser, logger)
i18n - custom internationalization package; provides i18n function with type safety and other validation
hmr - custom HMR plugin for Vite, injection script for reload/refresh, HMR dev-server
shared - shared code for the entire project (types, constants, custom hooks, components etc.)
storage - helpers for easier integration with storage, e.g. local/session storages
tailwind-config - shared Tailwind config for entire project
tsconfig - shared tsconfig for the entire project
ui - function to merge your Tailwind config with the global one; you can save components here
vite-config - shared Vite config for the entire project
zipper - run pnpm zip to pack the dist folder into extension-YYYYMMDD-HHmmss.zip inside the newly created dist-zip
e2e - run pnpm e2e for end-to-end tests of your zipped extension on different browsers

Troubleshooting

Hot module reload seems to have frozen

If saving source files doesn't cause the extension HMR code to trigger a reload of the browser page, try this:

Ctrl+C the development server and restart it (pnpm run dev)
If you get a grpc error, kill the turbo process and run pnpm dev again.

Community

To chat with other community members, you can join the Discord server. You can ask questions on that server, and you can also help others.

Also, suggest new features or share any challenges you've faced while developing Chrome extensions!

Reference

Star History

Contributors

This Boilerplate is made possible thanks to all of its contributors.

Special Thanks To

Made by Jonghakseo

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Getting Started

Competitor Comparisons

Pros of chrome-extension-boilerplate-react

Cons of chrome-extension-boilerplate-react

Code Comparison

Pros of web-extension-starter

Cons of web-extension-starter

Code Comparison

Pros of chrome-extension-cli

Cons of chrome-extension-cli

Code Comparison

Convert designs to code with AI

README

Table of Contents

Intro

Features

Getting started

For Chrome:

For Firefox:

Install dependency for turborepo:

For root:

For module:

Environment variables

If you want to set it for each package independently:

Remember you can't use global and local at the same time for the same package(It will be overwritten)

Boilerplate structure

Chrome extension

Pages

Packages

Troubleshooting

Hot module reload seems to have frozen

Community

Reference

Star History

Contributors

Special Thanks To

Top Related Projects

Convert designs to code with AI