Awesome Open Source
Awesome Open Source

GitHub stars GitHub watchers GitHub forks GitHub contributors MIT License GitHub issues GitHub last commit GitHub pull requests PR's Welcome

HitCount Tweet Twitter Follow

React TypeScript Web Extension Starter

🖥 A Web Extension starter kit built with React, TypeScript, Storybook, EsLint, Prettier, Jest, TailwindCSS, & Webpack. Compatible with Google Chrome, Mozilla Firefox, Brave, and Microsoft Edge.

Example Extension Popup

Getting Started

Run the following commands to install dependencies and start developing

yarn install
yarn dev

Scripts

  • yarn dev - run webpack in watch mode
  • yarn storybook - runs the Storybook server
  • yarn build - builds the production-ready unpacked extension
  • yarn test -u - runs Jest + updates test snapshots
  • yarn lint - runs EsLint
  • yarn prettify - runs Prettier
Loading the extension in Google Chrome

In Google Chrome, open up chrome://extensions in a new tab. Make sure the Developer Mode checkbox in the upper-right corner is turned on. Click Load unpacked and select the dist directory in this repository - your extension should now be loaded.

Installed Extension in Google Chrome

Loading the extension in Brave

In Brave, open up brave://extensions in a new tab. Make sure the Developer Mode checkbox in the upper-right corner is turned on. Click Load unpacked and select the dist directory in this repository - your extension should now be loaded.

Installed Extension in Brave

Loading the extension in Mozilla Firefox

In Mozilla Firefox, open up the about:debugging page in a new tab. Click the This Firefox link in the sidebar. One the This Firefox page, click the Load Temporary Add-on... button and select the manfiest.json from the dist directory in this repository - your extension should now be loaded.

Installed Extension in Mozilla Firefox

Loading the extension in Microsoft Edge

In Microsoft Edge, open up edge://extensions in a new tab. Make sure the Developer Mode checkbox in the lower-left corner is turned on. Click Load unpacked and select the dist directory in this repository - your extension should now be loaded.

Installed Extension in Microsoft Edge

Notes

  • This project is a repository template - click the Use this template button to use this starter codebase for your next project.

  • Includes ESLint configured to work with TypeScript and Prettier.

  • Includes tests with Jest - note that the babel.config.js and associated dependencies are only necessary for Jest to work with TypeScript.

  • Recommended to use Visual Studio Code with the Format on Save setting turned on.

  • Example icons courtesy of Heroicons.

  • Microsoft Edge is not currently supported.

  • Includes Storybook configured to work with React + TypeScript. Note that it maintains its own webpack.config.js and tsconfig.json files. See example story in src/components/hello/__tests__/hello.stories.tsx

  • Includes a custom mock for the webextension-polyfill-ts package in src/__mocks__. This allows you to mock any browser APIs used by your extension so you can develop your components inside Storybook.

Built with

Misc. References

Notable forks

  • capaj - Chakra-ui instead of TailwindCSS, Storybook removed

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,534,674
Typescript (263,054
Reactjs (75,452
Webpack (9,732
Chrome Extension (6,046
Tailwindcss (4,559
Eslint (3,695
Jest (3,683
Prettier (1,531
Storybook (1,217
Google Chrome (347
Mozilla Firefox (89
Brave (66
Microsoft Edge Extension (18
Extension Popup (2
Related Projects