React Browser Extension

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.

Installation

To install the Web Extensions React starter, follow these steps:

1. Clone or download the starter repo.
2. Update the information inside the manifest.json file, such as the name, description, and homepage.
3. Update the icons used by the extension.
4. Write and test your React apps within the /content_scripts/app, /options, and /popup folders. These folders are regular React apps bundled via Vite, so refer to their respective package.json and vite.config.js files for configuration.
5. If you don’t need some of the apps or scripts included in the starter repo, simply remove them from the project and remove their build steps in the build pipeline (./build.sh).
6. Build/compile your extension by running yarn build from the root folder. This will execute the ./build.sh script.
7. Load the built version of the extension in your browser and test it locally.
8. To publish the extension on web stores, you can use the generated ./build folder to load the “unpacked” version of the extension in the browser. Refer to the specific instructions for publishing to the Chrome Web Store or Firefox Add-ons.
9. To pack the extension into a single archive, run yarn zip from the root folder.
10. Publish the extension on the web stores following the relevant instructions.

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.