HeroHunt.ai Chrome Extension Template – React & MUI

The Create React App of the extension world

Start building your Chrome extension quickly with this modern template, including TypeScript, React, MUI and more!

📦 Included libraries & tools

• TypeScript
• Webpack
• esbuild-loader
• React
• MUI
• SVGR
• ESLint
• Prettier

✨ Features

• ⚛️ Build a beautiful UI with React and MUI – or use any other component library you like
• 🛠️ Use any NPM package and split your code with Webpack
• ⚡️ See your changes quickly with blazing fast builds – rebuild in less than 150 ms thanks to esbuild-loader
• 📄 Customize the manifest.json for production and development
• 👻 Inject UI without CSS conflicts thanks to the Shadow DOM API
• 📂 Include SVG images like React components with SVGR
• 💯 Avoid bugs and ensure great code quality with TypeScript, ESLint and Prettier

🚦 How to use

This guide uses Yarn which is recommended. The template was not tested with other package managers.

Install dependencies

yarn install

Develop

yarn watch

The extension will be built to the dist subdirectory and rebuilt on code changes. Load it in your browser and start developing!

Check for issues

yarn lint

This will run the TypeScript compiler, ESBuild and Prettier.

Build

yarn build

An optimized production version will be built to the dist directory. Now release it!

🗃️ Project structure

📦chrome-extension-react-mui
 ├ 📂manifest
 │ ├ 📜manifest.common.json         Base `manifest.json`
 │ ├ 📜manifest.development.json    `manifest.json` overrides for development
 │ └ 📜manifest.production.json     `manifest.json` overrides for production
 ├ 📂src
 │ ├ 📂action                       Browser action popup content with React
 │ ├ 📂background                   Background script
 │ ├ 📂content-script               Content script with React injection
 │ ├ 📜custom.d.ts                  TypeScript definition for SVG imports
 │ └ 📜theme.ts                     MUI theme definition
 └ 📂static
   ├ 📜icon[size].png               Extension icons
   └ 📜popup.html                   Browser action popup entry file

Recommended configuration

• Extensions Reloader Chrome extension
• Prettier VS Code extension
• ESLint VS Code extension