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
- Instant HMR (hot reload)1
- 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 stylelint and commitlint configured
- Includes tests with Jest
- React
- TypeScript
- Redux (toolkit and redux-persist)
- TailwindCSS
- Vite
- Jest
- ESLint
- Prettier
- stylelint
- commitlint
- commitizen
- simple-git-hooks (lightweight husky alternative)
- nano-staged
โ | โ (Beta) | โ | โ | โ |
Warning Please see Important Notes before start using.
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)
- 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.
- Go to the browser address bar and type
-
Load extension in Firefox
- Go to the browser address bar and type
about://debugger
- Click on the
Load Temporary Add-on
button. - Select your
dist_firefox
folder in the project root.
- Go to the browser address bar and type
yarn clean
to remove dist folder.dev
andbuild
commands call this command.yarn ci:test
to run lint & unit test & type checking in ci environment.ci:test:lint
,ci:test:style
,ci:test:unit
commands also available.yarn format
to fix code with eslint, prettier and stylelint.yarn lint
to call ESLint, Prettier and stylelint.yarn test
for testing.
This starter includes experimental packages and is currently in development. You can see changes in this repo often for now.
Please use with caution.
Note It is a fork of webext-redux with Manifest V3 support and is currently in release candidate (RC).
Please see tshaddix/webext-redux#282
Warning Do not update to react-redux version 8.x, it is not supported for now and is break your application.
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
Footnotes
-
While fully supported and stable in most cases, rarely hard reloading is recommended. โฉ