Skip to content

Latest commit

 

History

History
113 lines (74 loc) · 6.78 KB

README.md

File metadata and controls

113 lines (74 loc) · 6.78 KB
Raw

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

  • 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
  • DesignString - Vite Js instead of Webpack