diff --git a/README.md b/README.md index 603a302..df6d281 100644 --- a/README.md +++ b/README.md @@ -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 git@github.com: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. Screen Shot 2022-06-18 at 10 04 04 AM +## 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.