React Chrome Extension Template

This template provides a solid foundation for building Chrome extensions using React. It combines the power of React for creating dynamic user interfaces with the capabilities of Chrome's extension API, allowing you to create feature-rich browser extensions with ease.

Features

• React 18 for building user interfaces
• TypeScript for type-safe code
• Webpack 5 for bundling
• Hot reloading for faster development
• Example popup, options page, and content script
• Chrome extension manifest v3 support

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v14 or later)
• npm (v6 or later)
• Google Chrome browser

Installation

1. Clone this repository or use it as a template:

   git clone https://github.com/yourusername/react-chrome-extension-template.git

2. Navigate to the project directory:

   cd react-chrome-extension-template

3. Install the dependencies:

   npm install

Usage

To start developing your extension:

1. Run the development server:

   npm run dev

2. Open Google Chrome and navigate to chrome://extensions

3. Enable "Developer mode" in the top right corner

4. Click "Load unpacked" and select the dist folder in your project directory

5. Your extension should now be loaded and visible in Chrome

Project Structure

react-chrome-extension-template/
├── src/
│   ├── components/
│   ├── pages/
│   │   ├── Popup/
│   │   └── Options/
│   ├── content-scripts/
│   ├── background/
│   ├── manifest.json
│   └── index.tsx
├── dist/
├── webpack/
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md

Building and Loading the Extension

To build the extension for production:

1. Run the build command:

   npm run build

2. The built extension will be in the dist folder

3. Load the extension in Chrome by navigating to chrome://extensions, enabling "Developer mode", and clicking "Load unpacked" to select the dist folder

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.