Skip to content

๐Ÿš€ React & TypeScript Starter for developing web extensions with hot reload!

License

Notifications You must be signed in to change notification settings

zhenbin-z/browser-extension-react-typescript-starter

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

55 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation


Browser Extension React & TypeScript Starter

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!


CI ย  PRs welcome ย  MIT License

Features ยท Quick Start ยท Important Notes ยท License

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 stylelint and commitlint configured
  • Includes tests with Jest

Built with

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

Browser Support

Chrome Firefox Edge Opera Brave
โœ” โœ” (Beta) โœ” โœ” โœ”

Quick Start

Warning Please see Important Notes before start using.

Ensure you have

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)

    • 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

    • 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.

Available Commands

  • yarn clean to remove dist folder. dev and build 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.

Important Notes

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.

Bundling

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

Footnotes

  1. While fully supported and stable in most cases, rarely hard reloading is recommended. โ†ฉ

About

๐Ÿš€ React & TypeScript Starter for developing web extensions with hot reload!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 86.0%
  • CSS 6.2%
  • HTML 4.8%
  • JavaScript 3.0%