React TypeScript Chrome Extension

Overview

This project demonstrates how to build a Chrome Extension using React and TypeScript. It includes examples of a Popup and a Content Script React app, both built and bundled with Vite and crxjs.

Setup

Clone repository

git clone git@github.com:yosevu/react-content-script.git

Install dependencies

yarn

Development

To start a development server with hot-reloading:

yarn dev

Build for Production

To create a production-ready build of the extension:

yarn build

Load the Extension

1. Navigate to chrome://extensions/
2. Enable "Developer mode" using the toggle switch in the top right corner.
3. Click the "Load unpacked" button in the top left corner.
4. Select the dist directory inside the react-content-script directory.
5. Navigate to https://blank.org/ to see the Content Script React app in action.
6. Open the extensions menu and click on "React TypeScript Chrome Extension" to see the Popup React app.

Popup

The popup source code is at the root directory.

Content Script

The content script source code is in the content-script directory.

Development Tips

• Live Reloading: Use yarn dev to see changes immediately during development.
• Debugging: Use Chrome DevTools to inspect and debug both the content script and popup.

Background

This repository was originally part of How to inject a React app into a Chrome Extension as a Content Script.

License

This project is licensed under the MIT License - see the LICENSE file for details.