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 branchexperimental-zustand
[^1]: While it is fully supported and stable in most cases, hard reloading is rarely recommended.
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
✔ | ✔ (Beta) | ✔ | ✔ | ✔ |
Ensure you have
Create a repo from this template on GitHub.
or
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)
chrome://extensions
Developer Mode
button to enable it.Load Unpacked Extension
button.dist
folder in the project root.Load extension in Firefox (Manifest V2)
about://debugger
Load Temporary Add-on
button.dist-firefox-v2
folder in the project root.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.You can use redux (redux-toolkit) as state manager between popup, background, content and custom pages. Read the documentation for more.
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.
This repository is following the Conventional Commits standard.
MIT © Sinan Bekar