React Typescript Web Extension Starter

Overview:

React TypeScript Web Extension Starter is a web extension starter kit built with React, TypeScript, Storybook, EsLint, Prettier, Jest, TailwindCSS, and Webpack. It is compatible with Google Chrome, Mozilla Firefox, Brave, and Microsoft Edge. The starter kit includes example extension popup and provides commands for installing dependencies, starting development, running tests, and building production-ready unpacked extensions. It also includes ESLint configured to work with TypeScript and Prettier, tests with Jest, and Storybook configured to work with React and TypeScript.

Features:

• Built with React, TypeScript, Storybook, Jest, ESLint, Prettier, Webpack, and TailwindCSS.
• Compatible with Google Chrome, Mozilla Firefox, Brave, and Microsoft Edge.
• Includes example extension popup.
• Provides commands for installing dependencies, starting development, running tests, and building production-ready unpacked extensions.
• Configured with ESLint and Prettier for TypeScript support.
• Includes tests with Jest.
• Supports development with Storybook for React and TypeScript.
• Includes a custom mock for the webextension-polyfill-ts package for developing components inside Storybook.

Installation:

To install the React TypeScript Web Extension Starter, follow these steps:

1. Clone or download the repository.

2. Run the following commands to install dependencies and start developing:

   • yarn dev - runs webpack in watch mode
   • yarn storybook - runs the Storybook server
   • yarn build - builds the production-ready unpacked extension
   • yarn test -u - runs Jest and updates test snapshots
   • yarn lint - runs ESLint
   • yarn prettify - runs Prettier

3. Depending on the browser you want to use, follow these steps to load the extension:

   • 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.
   • 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.
   • Mozilla Firefox: Open up about:debugging page in a new tab. Click the This Firefox link in the sidebar. On the This Firefox page, click the Load Temporary Add-on… button and select the manifest.json from the dist directory in this repository.
   • 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.

4. Your extension should now be loaded and ready to use.

Summary:

The React TypeScript Web Extension Starter is a comprehensive starter kit for building web extensions with React, TypeScript, and other popular tools. It provides a solid foundation for developing cross-browser compatible extensions and includes features like example extension popup, Storybook for component development, testing with Jest, and ESLint and Prettier for code quality. By following the installation guide, developers can quickly set up the starter kit and start building their own web extensions.