https://github.com/yosevu/react-content-script

React and TypeScript Chrome extension example project for developers to create their own extensions.
https://github.com/yosevu/react-content-script

chrome-extension content-script crxjs popup react typescript vite

Last synced: about 1 month ago
JSON representation

React and TypeScript Chrome extension example project for developers to create their own extensions.

• Host: GitHub
• URL: https://github.com/yosevu/react-content-script
• Owner: yosevu
• Created: 2017-08-08T14:10:29.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2023-05-04T18:52:01.000Z (over 1 year ago)
• Last Synced: 2024-04-26T01:32:00.158Z (5 months ago)
• Topics: chrome-extension, content-script, crxjs, popup, react, typescript, vite
• Language: TypeScript
• Homepage:
• Size: 485 KB
• Stars: 184
• Watchers: 4
• Forks: 54
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React TypeScript Chrome Extension

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

This project uses [Vite](https://vitejs.dev/) and [crxjs](https://crxjs.dev/vite-plugin) to build the extension.

## Setup

### Clone repository

```sh

git clone [email protected]:yosevu/react-content-script.git

```

### Install dependencies

```sh

yarn

```

### Build extension

```

yarn build

```

### Load extension

1. Navigate to [chrome://extensions/](chrome://extensions/)

1. Turn on the "Developer mode" toggle switch in the top right of the window

1. Click the "Load unpacked" button in top left of the window

1. Go to the `react-content-script` directory and select the `dist` directory to load the extension

1. Navigate to https://blank.org/ to see the Content Script React app

1. Go to extensions and click "React TypeScript Chrome Extension" to see the Popup React app

## [Popup](https://developer.chrome.com/docs/extensions/mv3/user_interface/#popup)

The popup source code is at the root directory.

## [Content Script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/)

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](https://medium.com/@yosevu/how-to-inject-a-react-app-into-a-chrome-extension-as-a-content-script-3a038f611067).