一个功能强大的浏览器插件,支持网页文本的快速划词翻译。选中任意文本即可获得即时翻译结果。
基于 React 18 + TypeScript + Vite + Antd 构建,同时支持 Chrome (Manifest V3) 和 Firefox (Manifest V2)。
- 🖱️ 划词翻译: 选中文本即可快速翻译
- 🤖 AI翻译: 集成GLM大语言模型,提供高质量翻译
- 🌍 多语言支持: 支持中英日韩法德俄等15种语言
- ⚡ 即时显示: 翻译结果实时显示在选择位置附近
- 🔄 流式翻译: GLM AI支持流式输出,翻译过程可见
- 🎯 智能检测: 自动检测源语言类型
- ⌨️ 快捷键支持: Ctrl+Shift+T 快速翻译选中文本
- 🖱️ 右键菜单: 右键菜单快速翻译
- 🌟 支持 Chrome MV3 和 Firefox MV2 架构
- 🦊 跨浏览器兼容,一套代码支持多个浏览器
- ⚡ 使用 Vite 构建,极速开发
- 💡 使用 React + TypeScript 编写各页面
- 📜 支持国际化(_locales)
- 📁 项目结构清晰,模块职责明确
- 🛠️ 支持 SidePanel、DevTools 面板开发(Chrome)
- 🔒 使用
.env管理多环境配置 - ✅ 内置 ESLint + TypeScript 校验
- 🔧 自动浏览器检测和API兼容
详见项目文档:文件结构说明
# 安装依赖 pnpm install # Chrome开发 pnpm dev # Firefox开发 pnpm dev:firefox # 构建Chrome版本 pnpm build # 构建Firefox版本 pnpm build:firefox # 构建所有版本 pnpm build:all
- 打开
chrome://extensions/ - 开启右上角「开发者模式」
- 点击「加载已解压的扩展程序」,选择
dist/文件夹
- 打开
about:debugging - 点击「此Firefox」
- 点击「临时载入附加组件」
- 选择
dist-firefox/目录中的manifest.json文件
| 功能 | Chrome | Firefox | 说明 |
|---|---|---|---|
| Popup | ✅ | ✅ | 弹出窗口 |
| Options | ✅ | ✅ | 选项页面 |
| Background | ✅ | ✅ | 背景脚本 |
| Content Script | ✅ | ✅ | 内容脚本 |
| Side Panel | ✅ | ❌ | Chrome专有功能 |
| DevTools | ✅ | ✅ | 开发者工具 |
| Storage API | ✅ | ✅ | 存储API |
| Tabs API | ✅ | ✅ | 标签页API |
详细构建说明请查看 BUILD_GUIDE.md
CHROME-MV3-EXTENSION-REACT/
├── _locales/
├── dist/
├── node_modules/
├── src/
│ ├── assets/
│ ├── background/
│ ├── component/
│ ├── content/
│ ├── devtools/
│ ├── helpers/
│ ├── hooks/
│ ├── img/
│ ├── options/
│ ├── page/
│ ├── popup/
│ ├── sidePanel/
│ ├── stroe/
│ ├── types/
│ ├── constants.ts
│ └── vite-env.d.ts
├── .env.development
├── .env.production
├── .eslintrc.cjs
├── .gitignore
├── manifest.json
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
| 目录名称 | 说明 |
|---|---|
_locales/ |
国际化语言包目录,Chrome 插件支持多语言展示(如 en/messages.json)。 |
dist/ |
Vite 构建后的输出目录,打包生成的插件文件将存放于此。 |
node_modules/ |
项目的依赖模块,由 npm 或 pnpm 安装生成。 |
| 子目录 / 文件 | 说明 |
|---|---|
assets/ |
存放静态资源(图标、样式等)。 |
background/ |
MV3 的 Background Service Worker 脚本(事件监听、消息处理、初始化逻辑等)。 |
component/ |
通用的 React UI 组件封装。 |
content/ |
Content Scripts,注入网页执行的脚本。 |
devtools/ |
插件自定义 DevTools 面板的逻辑。 |
helpers/ |
工具函数、通用逻辑模块。 |
hooks/ |
自定义 React Hooks。 |
img/ |
插件使用的图像资源(非构建依赖图)。 |
options/ |
插件"选项页"逻辑,MV3 manifest 中定义的 options 页面。 |
page/ |
页面视图文件,例如用于展示在 options 或 popup 中的 React 页面。 |
popup/ |
弹出页(Popup)脚本和视图。 |
sidePanel/ |
Chrome MV3 新特性 Side Panel 页面及其逻辑。 |
store/ |
用于存放状态管理相关逻辑(如 Redux/Pinia/Zustand 等)。 |
types/ |
TypeScript 类型定义文件夹。 |
constants.ts |
全局常量定义。 |
vite-env.d.ts |
Vite 提供的类型环境声明文件。 |
| 文件名 | 说明 |
|---|---|
.env.development |
开发环境环境变量。 |
.env.production |
生产环境环境变量。 |
.eslintrc.cjs |
ESLint 配置,控制代码风格和静态检查规则。 |
.gitignore |
Git 忽略文件配置。 |
manifest.json |
Chrome 插件核心配置文件,定义权限、入口、背景页、content script 等。 |
package.json |
项目依赖管理及构建脚本配置。 |
package-lock.json |
依赖锁定文件(npm)。 |
pnpm-lock.yaml |
依赖锁定文件(pnpm)。 |
README.md |
项目说明文档。 |
tsconfig.json |
TypeScript 基础配置。 |
tsconfig.app.json |
App 的 TS 配置(可用于细分构建目标)。 |
tsconfig.node.json |
Node 环境下的 TS 配置(如 vite.config.ts 所用)。 |
vite.config.ts |
Vite 构建配置文件,包含插件打包逻辑、模块路径别名等设置。 |