Chrome Extension Boilerplate with
React + Vite + TypeScript

This boilerplate has Legacy version

• Intro
• Features
• Structure
  • ChromeExtension
  • Packages
  • Pages
• Install
  • Procedures
    • Chrome
    • Firefox
• Reference
• Star History
• Contributors

This boilerplate is made for creating chrome extensions using React and Typescript.

The focus was on improving the build speed and development experience with Vite(Rollup) & Turborepo.

• React18
• TypeScript
• Tailwindcss
• Vite
• Turborepo
• Prettier
• ESLint
• Chrome Extension Manifest Version 3
• Custom HMR(Hot Module Rebuild) Plugin

1. Clone this repository.
2. Change extensionDescription and extensionName in messages.json file.
3. Install pnpm globally: npm install -g pnpm (check your node version >= 18.12.0)
4. Run pnpm install

1. Run:
   • Dev: pnpm dev (it's run parallel with pnpm dev-server automatically)
     • When you run with Windows, you should run as administrator. (Issue#456)
   • Prod: pnpm build
2. Open in browser - chrome://extensions
3. Check - Developer mode
4. Find and Click - Load unpacked extension
5. Select - dist folder at root

1. Run:
   • Dev: pnpm dev:firefox (it's run parallel with pnpm dev-server automatically)
   • Prod: pnpm build:firefox
2. Open in browser - about:debugging#/runtime/this-firefox
3. Find and Click - Load Temporary Add-on...
4. Select - manifest.json from dist folder at root

Main app with background script, manifest

• manifest.js - manifest for chrome extension
• lib/background - background script for chrome extension (background.service_worker in manifest.json)
• public/content.css - content css for user's page injection

Some shared packages

• dev-utils - utils for chrome extension development (manifest-parser, logger)
• hmr - custom HMR plugin for vite, injection script for reload/refresh, hmr dev-server
• shared - shared code for entire project. (types, constants, custom hooks, components, etc.)
• tsconfig - shared tsconfig for entire project.

• content - content script for chrome extension (content_scripts in manifest.json)
• content-ui - content script for render UI in user's page (content_scripts in manifest.json)
• devtools - devtools for chrome extension (devtools_page in manifest.json)
• devtools-panel - devtools panel for devtools
• newtab - new tab for chrome extension (chrome_url_overrides.newtab in manifest.json)
• options - options for chrome extension (options_page in manifest.json)
• popup - popup for chrome extension (action.default_popup in manifest.json)
• sidepanel - sidepanel(Chrome 114+) for chrome extension (side_panel.default_path in manifest.json)

• Vite Plugin
• ChromeExtension
• Rollup
• Turborepo
• Rollup-plugin-chrome-extension

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

Made by Jonghakseo