React Browser Extension

screenshot of React Browser Extension
react

starter repo for building web browser extensions (MV3) with React v18 and Typescript

Overview

The Web Extensions React starter is a starter repository that provides a foundation for building browser extensions using React and Typescript. It includes various features and components such as content scripts, popup and options pages, common communication channels, and storage for all apps and scripts. This starter repo is compatible with manifest v3, making it compatible with both Chromium-based browsers and soon Firefox. It provides a guide for developing your own extension, updating information inside the manifest file, and building and testing React apps within the different folders.

Features

  • Content Scripts, Popup, and Options Page as React Apps: The starter repo includes three separate React apps for content scripts, popup, and options page, allowing for easy development and management.
  • Typescript on All Apps and Scripts: The use of Typescript ensures type safety and provides a better development experience.
  • Common Communication Channel and Storage: The repo includes a common communication channel and storage for all apps and scripts, allowing them to communicate and share data.
  • Works with Manifest V3: The starter repo is compatible with manifest v3, making it compatible with all Chromium-based browsers and soon Firefox.

Summary

The Web Extensions React starter is a comprehensive starter repository for building browser extensions using React and Typescript. It provides a set of features, including separate React apps for content scripts, popup, and options pages, Typescript support, common communication channels, and compatibility with manifest v3. By following the provided installation guide and utilizing the resources provided, developers can easily create and publish their own browser 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

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.