# react-chrome-extension

**Repository Path**: dongzi1998/react-chrome-extension

## Basic Information

- **Project Name**: react-chrome-extension
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-17
- **Last Updated**: 2025-06-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# My Chrome Extension

这是一个基于 React + Vite + TypeScript 的 Chrome 插件开发模板，支持 Manifest V3，适合快速开发和调试内容脚本类插件。

## 功能简介

- 使用 React 组件渲染插件界面
- 通过 content script 注入页面，实现与网页的交互
- 支持 Vite 热更新和高效打包

## 目录结构

```
react-chrome-extension/
├── public/
│   ├── contentScript.js      # 插件内容脚本，负责创建挂载点
│   ├── manifest.json         # Chrome 插件配置文件
│   └── icon.png              # 插件图标
├── src/
│   ├── App.tsx               # React 主组件
│   ├── main.tsx              # React 挂载入口
│   └── assets/               # 静态资源
├── package.json              # 项目依赖与脚本
├── vite.config.ts            # Vite 配置
├── tsconfig*.json            # TypeScript 配置
└── README.md                 # 项目说明文档
```

## 快速开始

### 1. 安装依赖

```bash
yarn install
# 或
npm install
```

### 2. 开发模式

```bash
yarn dev
# 或
npm run dev
```

开发时会启动 Vite 本地服务，支持热更新。

### 3. 打包构建

```bash
yarn build
# 或
npm run build
```

构建后的文件会输出到 `dist` 目录。

### 4. 加载插件到 Chrome

1. 打包后，将 `public` 目录下的所有文件和 `dist/assets/main.js` 拷贝到同一目录（如 `build`）。
2. 打开 Chrome，进入 `chrome://extensions/`，开启“开发者模式”。
3. 点击“加载已解压的扩展程序”，选择上述目录即可。

## 主要技术栈

- React 19
- TypeScript
- Vite
- Chrome Extension Manifest V3

## 说明

- `public/contentScript.js` 会在页面注入一个挂载点 `#my-extension-root`。
- `src/main.tsx` 会将 React 组件挂载到该节点，实现内容脚本与 React 的结合。
- 你可以在 `App.tsx` 中自定义插件的界面和功能。