search

yosevu / react-content-script

An example project to build Chrome extensions using React and TypeScript. Ideal for developers looking to create efficient and modern Chrome extensions with a focus on a clean development workflow using Vite and crxjs.
202 stars 56 forks source link
chrome-extension content-script crxjs developer-tools hmr popup react typescript vite web-development

readme

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.

Screen Shot 2022-06-18 at 10 04 04 AM

Development Tips

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.