-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
28 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,8 @@ | ||
# React TypeScript Chrome Extension | ||
|
||
This repository includes examples of how to set up a Chrome Extension with React and TypeScript. | ||
## Overview | ||
|
||
This project uses [Vite](https://vitejs.dev/) and [crxjs](https://crxjs.dev/vite-plugin) to build the extension. | ||
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 | ||
|
||
|
@@ -12,25 +12,34 @@ git clone [email protected]:yosevu/react-content-script.git | |
``` | ||
|
||
### Install dependencies | ||
|
||
```sh | ||
yarn | ||
``` | ||
|
||
### Build extension | ||
### 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 extension | ||
### Load the 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 | ||
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) | ||
|
||
|
@@ -42,6 +51,15 @@ The content script source code is in the `content-script` directory. | |
|
||
<img width="895" alt="Screen Shot 2022-06-18 at 10 04 04 AM" src="https://user-images.githubusercontent.com/16216104/174416528-6e5ad272-5faa-41d4-a717-c210ed4924b0.png"> | ||
|
||
## 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. |