React Typescript Web Extension Starter

screenshot of React Typescript Web Extension Starter
react
tailwind

React Typescript Web Extension Starter

:desktop_computer: Web Extension starter kit built with React, TypeScript, TailwindCSS, Storybook, Jest, EsLint, Prettier, and Webpack. Supports Google Chrome + Mozilla Firefox + Brave Browser + Microsoft Edge + Opera :fire:

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.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

Storybook

Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

webpack
Webpack

Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.