browser-extension-react-typescript-starter: A TypeScript repository from sinanbekar

Browser Extension
React & TypeScript Starter

A cross-platform (Chrome, Firefox, Edge, Opera, Brave) web browser extension (Manifest V3 and Manifest V2) starter kit with hot reload support, built with React, Typescript, Redux, Vite, ESLint, Prettier, TailwindCSS, Jest and more!

Features · Quick Start · Important Notes · License

🚀 NEW (experimental) Zustand for state management instead Redux, with webext-zustand package. You can try it now on the branch experimental-zustand

Features

Instant HMR (hot reload)¹
Write once run on any browser
Global Redux support with persist option. Effortless communication between content, background, popup, options, and more pages.
Provides a basic content example and popup, options, and welcome pages with all React
Latest Manifest V3 support
Manifest V2 support (beta)
Dynamic manifest.json
Includes ESLint configured to work with TypeScript and Prettier
Includes tests with Jest

Built with

React
TypeScript
Redux (toolkit and redux-persist)
TailwindCSS
Vite
Jest
ESLint
Prettier
simple-git-hooks (lightweight husky alternative)
nano-staged

Browser Support


✔	✔ (Beta)	✔	✔	✔

Quick Start

Ensure you have

Node.js 16 or later installed
Yarn installed

Use the Template

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

Note If you don't have yarn installed, run: npm install -g yarn

npx degit sinanbekar/browser-extension-react-typescript-starter my-web-extension
cd my-web-extension
git init

Then run the following:

yarn install to install dependencies.
yarn dev to start the development server.
yarn build to build an unpacked extension.
Load extension in Chrome (Chromium, Manifest V3)
- Go to the browser address bar and type chrome://extensions
- Check the Developer Mode button to enable it.
- Click on the Load Unpacked Extension button.
- Select your dist folder in the project root.
Load extension in Firefox (Manifest V2)
- Go to the browser address bar and type about://debugger
- Click on the Load Temporary Add-on button.
- Select your dist-firefox-v2 folder in the project root.

Available Commands

yarn clean to remove dist folder. dev and build commands call this command.
yarn format to fix code with eslint and prettier.
yarn lint to call ESLint and Prettier.
yarn test for testing.

Redux

You can use redux (redux-toolkit) as state manager between popup, background, content and custom pages. Read the documentation for more.

@eduardoac-skimlinks/webext-redux

Bundling

@crxjs/vite-plugin

Note This plugin powers the development side of this starter.

docs: https://crxjs.dev/vite-plugin

Special thanks to @jacksteamdev and contributors for this amazing plugin.

Contributing

This repository is following the Conventional Commits standard.

License

While it is fully supported and stable in most cases, hard reloading is rarely recommended. ↩

sinanbekar/browser-extension-react-typescript-starter

Browser Extension React & TypeScript Starter