chrome-extension

# Chrome 扩展程序模板 ## 技术栈 | 组件 | 技术 | |-----------|------------| | 清单 (Manifest) | V3 | | UI | React 18 | | 语言 | TypeScript | | 样式 | Tailwind CSS | | 打包工具 | Vite | | 存储 | Chrome Storage API | --- ## 目录结构 project-name/ ├── src/ │ ├── popup/ # 扩展弹出窗口 │ ├── options/ # 选项页面 │ ├── background/ # 后台服务工作线程 │ ├── content/ # 内容脚本 │ ├── components/ │ ├── hooks/ │ └── lib/ │ ├── storage.ts # Chrome 存储助手 │ └── messaging.ts # 消息传递 | ├── public/ │ ├── icons/ │ └── manifest.json └── package.json --- ## Manifest V3 概念 | 组件 | 用途 | |-----------|---------| | Service Worker | 后台处理 | | Content Scripts | 页面注入 | | Popup | 用户界面 | | Options Page | 设置 | --- ## 权限 | 权限 | 用途 | |------------|-----| | storage | 保存用户数据 | | activeTab | 当前标签页访问 | | scripting | 注入脚本 | | host_permissions | 站点访问 | --- ## 设置步骤 1. `npm create vite {{name}} -- --template react-ts` 2. 添加 Chrome 类型: `npm install -D @types/chrome` 3. 配置 Vite 以支持多入口 4. 创建 manifest.json 5. `npm run dev` (监视模式) 6. 在 Chrome 中加载: `chrome://extensions` → 加载已解压的扩展程序 --- ## 开发技巧 | 任务 | 方法 | |------|--------| | 调试 Popup | 右键点击图标 → 检查 | | 调试 Background | 扩展页面 → Service worker | | 调试 Content | 页面上的 DevTools 控制台 | | 热重载 | `npm run dev` 配合监视模式 | --- ## 最佳实践 - 使用类型安全的消息传递 - 将 Chrome API 封装在 Promise 中 - 最小化权限 - 优雅地处理离线状态