React TypeScript Chrome Extension

This repository includes examples of how to set up a Chrome Extension with React and TypeScript.

This project uses Vite and crxjs to build the extension.

Setup

Clone repository

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

Install dependencies

yarn

Build extension

yarn build

Load extension

1. Navigate to chrome://extensions/
2. Turn on the "Developer mode" toggle switch in the top right of the window
3. Click the "Load unpacked" button in top left of the window
4. Go to the react-content-script directory and select the dist directory to load the extension
5. Navigate to https://blank.org/ to see the Content Script React app
6. Go to extensions and click "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.

Background

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