browser-extension-react-typescript-starter

🚀 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)[^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 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

[^1]: While it is fully supported and stable in most cases, hard reloading is rarely recommended.

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.

or

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

MIT © Sinan Bekar