Skip to content

Commit 169998d

Browse files
committed
docs: update README
1 parent 234d72e commit 169998d

File tree

1 file changed

+28
-10
lines changed

1 file changed

+28
-10
lines changed

README.md

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# React TypeScript Chrome Extension
22

3-
This repository includes examples of how to set up a Chrome Extension with React and TypeScript.
3+
## Overview
44

5-
This project uses [Vite](https://vitejs.dev/) and [crxjs](https://crxjs.dev/vite-plugin) to build the extension.
5+
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.
66

77
## Setup
88

@@ -12,25 +12,34 @@ git clone [email protected]:yosevu/react-content-script.git
1212
```
1313

1414
### Install dependencies
15-
1615
```sh
1716
yarn
1817
```
1918

20-
### Build extension
19+
### Development
20+
21+
To start a development server with hot-reloading:
2122

23+
```sh
24+
yarn dev
2225
```
26+
27+
### Build for Production
28+
29+
To create a production-ready build of the extension:
30+
31+
```sh
2332
yarn build
2433
```
2534

26-
### Load extension
35+
### Load the Extension
2736

2837
1. Navigate to [chrome://extensions/](chrome://extensions/)
29-
1. Turn on the "Developer mode" toggle switch in the top right of the window
30-
1. Click the "Load unpacked" button in top left of the window
31-
1. Go to the `react-content-script` directory and select the `dist` directory to load the extension
32-
1. Navigate to https://blank.org/ to see the Content Script React app
33-
1. Go to extensions and click "React TypeScript Chrome Extension" to see the Popup React app
38+
2. **Enable** "Developer mode" using the toggle switch in the top right corner.
39+
3. Click the **"Load unpacked"** button in the top left corner.
40+
4. Select the `dist` directory inside the `react-content-script` directory.
41+
5. Navigate to https://blank.org/ to see the Content Script React app in action.
42+
6. Open the extensions menu and click on **"React TypeScript Chrome Extension"** to see the Popup React app.
3443

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

@@ -42,6 +51,15 @@ The content script source code is in the `content-script` directory.
4251

4352
<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">
4453

54+
## Development Tips
55+
56+
- **Live Reloading**: Use `yarn dev` to see changes immediately during development.
57+
- **Debugging**: Use Chrome DevTools to inspect and debug both the content script and popup.
58+
4559
## Background
4660

4761
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).
62+
63+
## License
64+
65+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

0 commit comments

Comments
 (0)