Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/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.
https://github.com/yosevu/react-content-script
chrome-extension content-script crxjs developer-tools hmr popup react typescript vite web-development
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/yosevu/react-content-script
- Owner: yosevu
- Created: 2017-08-08T14:10:29.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-08-12T03:16:12.000Z (5 months ago)
- Last Synced: 2024-08-13T03:55:49.991Z (5 months ago)
- Topics: chrome-extension, content-script, crxjs, developer-tools, hmr, popup, react, typescript, vite, web-development
- Language: TypeScript
- Homepage:
- Size: 360 KB
- Stars: 200
- Watchers: 4
- Forks: 56
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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
```sh
git clone [email protected]:yosevu/react-content-script.git
```
### Install dependencies
```sh
yarn
```
### Development
To start a development server with hot-reloading:
```sh
yarn dev
```
### Build for Production
To create a production-ready build of the extension:
```sh
yarn build
```
### Load the Extension
1. Navigate to [chrome://extensions/](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](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.
## 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](https://medium.com/@yosevu/how-to-inject-a-react-app-into-a-chrome-extension-as-a-content-script-3a038f611067).
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.