LingandRX
be5e2f02ee
* feat: optimize popup standalone window layout and enhance storage cleaner synchronization * docs: 更新README文档并删除过时文件 - 更新README文档，添加项目结构、功能特性和路由系统等详细信息 - 删除不再使用的文档文件，包括CLAUDE.md、GEMINI.md和多个设计规范文档 - 清理项目中的过时配置文件和计划文档 * feat: 添加 Vitest 测试框架和组件测试 - 添加 Vitest 配置 (vitest.config.ts, vitest.setup.ts) - 创建组件测试: Button, ToolCard, GlobalSnackbar, TopBar, RouterContainer, StorageCleanerConfirm - 创建工具测试: routes, storageCleaner - 修复 background.ts 监听器参数问题 - 修复 options/App.tsx 硬编码默认值 - 更新 lint-staged.config.mjs (添加 .mjs 支持, 添加 --no-warn-ignored) - 更新 tsconfig.json (添加测试类型支持, 移除测试文件排除) - 更新 package.json (添加测试脚本和依赖) * fix: 修复 StorageCleanerPage Chrome API 监听器内存泄漏 使用 useRef 模式存储 loadInfo 函数引用，避免依赖数组变化导致的监听器重复注册问题 * refactor(popup): 优化 OpenUrl 页面样式和导航逻辑 重构 OpenUrl 页面输入框样式，改进聚焦状态效果 移除 RouterProvider 依赖，直接通过存储设置侧边栏路由 在 OpenUrlViewer 页面添加加载状态指示器和错误处理 监听存储变化实现 URL 自动更新 * feat(ui): 优化存储清理页面UI和交互效果 重构存储清理页面组件，增强视觉层次和交互体验： - 使用新的错误提示样式和布局 - 改进选项卡片样式，增加悬停动画和选中状态 - 调整整体间距和排版，提升视觉一致性 - 添加微交互效果如悬停缩放和阴影 - 优化颜色方案和过渡动画 - 统一组件尺寸和字体层级 * feat: 添加二维码工具页面，支持URL转二维码和二维码解析功能 * chore: update package-lock.json (npm audit fix) * refactor(主题): 将页面样式抽离到统一配置文件 将各页面的颜色和样式配置抽离到config/pageTheme.ts中统一管理 优化测试用例中使用each替代forEach 更新路由测试以包含新的qrCode页面 * feat(二维码页面): 添加复制二维码功能并优化样式 添加复制二维码到剪贴板的功能，并调整按钮布局和样式。同时将 ContentCopyIcon 导入位置调整到其他图标导入之后，并修复缩进问题。在 tsconfig.json 中添加 vitest/globals 类型支持。 * feat(theme): 为所有页面添加统一的背景色和卡片背景色 为应用中的所有页面添加了统一的浅灰色背景(#f5f5f5)和白色卡片背景(#ffffff)，以保持视觉一致性。修改了ToolCard组件以支持自定义卡片背景色，并更新了所有相关页面使用新的主题配置。 * feat: 添加复制按钮组件并优化现有复制功能 refactor(utils): 创建剪贴板工具函数 feat(components): 新增可复用的CopyButton组件 refactor(pages): 在QrCodePage和TimestampPage中使用CopyButton style: 格式化代码并调整部分样式 * refactor(存储): 统一qrCode相关存储键名 将'qrCode/expanded'重命名为'qrCode/qrExpanded'以保持命名一致性 * feat: 添加二维码工具功能并更新项目配置 - 新增二维码工具页面及相关组件和工具函数 - 添加 MIT 许可证文件 - 更新 package.json 配置为公开项目 - 更新 README 文档说明新功能
227 lines
5.9 KiB
Markdown
227 lines
5.9 KiB
Markdown
# Testing Tools Browser Extension
|
|
|
|
这是一个基于 WXT 框架的浏览器扩展项目，提供实用的测试工具功能。
|
|
|
|
## 项目概述
|
|
|
|
Testing Tools 是一个轻量级的浏览器扩展，提供多种实用的测试工具功能。项目采用现代化的技术栈，包括 React 19、TypeScript 和 Material UI，并利用 WXT 框架简化浏览器扩展的开发流程。
|
|
|
|
## 功能特性
|
|
|
|
### Dashboard 首页
|
|
|
|
- 卡片式工具展示
|
|
- 支持自定义工具排序和可见性
|
|
- 实时数据预览（时间戳等）
|
|
|
|
### 时间戳转换工具
|
|
|
|
- 实时显示当前时间戳（毫秒/秒可切换）
|
|
- 日期与时间戳之间的双向转换
|
|
- 支持多个时区（亚洲/上海、美洲/纽约、欧洲/伦敦）
|
|
- 一键复制转换结果
|
|
- 输入验证和错误提示
|
|
|
|
### 存储清理工具
|
|
|
|
- 自动读取当前域名
|
|
- 支持清理多种存储类型：
|
|
- localStorage
|
|
- sessionStorage
|
|
- IndexedDB
|
|
- Cookies
|
|
- Cache Storage
|
|
- Service Workers
|
|
- 可选择的清理类型（默认全选）
|
|
- 确认对话框防止误操作
|
|
- 清理结果统计
|
|
- 自动刷新页面选项
|
|
|
|
### URL 工具
|
|
|
|
- 保存常用 URL 列表
|
|
- 快速打开保存的 URL
|
|
- 支持 URL 验证和安全检查
|
|
- 内置 URL 查看器（iframe 沙箱模式）
|
|
|
|
### 二维码工具
|
|
|
|
- URL 转二维码（生成器）
|
|
- 二维码转 URL（解析器）
|
|
- 支持上传二维码图片解析
|
|
- 生成的二维码可下载
|
|
- 一键复制转换结果
|
|
- 卡片式布局，节省空间
|
|
|
|
## 技术栈
|
|
|
|
- **框架**: WXT (Web Extension Toolkit)
|
|
- **前端**: React 19 + TypeScript
|
|
- **UI 库**: Material UI
|
|
- **日期处理**: dayjs (含 UTC 和时区插件)
|
|
- **通信**: @webext-core/messaging
|
|
- **存储**: Chrome Storage API (类型安全封装)
|
|
- **二维码**: qrcode (生成) + jsqr (解析)
|
|
- **测试**: Vitest + Testing Library
|
|
|
|
## 项目结构
|
|
|
|
```
|
|
├── components/ # 可复用 UI 组件
|
|
│ ├── Button.tsx
|
|
│ ├── CopyButton.tsx
|
|
│ ├── GlobalSnackbar.tsx
|
|
│ ├── RouterContainer.tsx
|
|
│ ├── StorageCleanerConfirm.tsx
|
|
│ ├── ToolCard.tsx
|
|
│ └── TopBar.tsx
|
|
├── config/ # 路由配置
|
|
│ └── routes.ts # 页面路由定义
|
|
├── entrypoints/ # 浏览器扩展入口点
|
|
│ ├── popup/ # 扩展弹窗界面
|
|
│ │ ├── App.tsx
|
|
│ │ ├── main.tsx
|
|
│ │ └── pages/ # 页面组件
|
|
│ │ ├── DashboardPage.tsx
|
|
│ │ ├── OpenUrlPage.tsx
|
|
│ │ ├── OpenUrlViewerPage.tsx
|
|
│ │ ├── QrCodePage.tsx
|
|
│ │ ├── StorageCleanerPage.tsx
|
|
│ │ └── TimestampPage.tsx
|
|
│ ├── options/ # 选项页面
|
|
│ ├── sidepanel/ # 侧边栏
|
|
│ ├── background.ts # 后台脚本
|
|
│ └── content.ts # 内容脚本
|
|
├── providers/ # React Context providers
|
|
│ └── RouterProvider.tsx # 路由状态管理
|
|
├── types/ # TypeScript 类型定义
|
|
│ └── storage.d.ts
|
|
├── utils/ # 工具函数
|
|
│ ├── chromeStorage.ts
|
|
│ ├── clipboard.ts
|
|
│ ├── dayjs.ts
|
|
│ ├── messages.tsx
|
|
│ └── storageCleaner.ts
|
|
├── public/ # 静态资源
|
|
├── wxt.config.ts # WXT 配置文件
|
|
├── package.json
|
|
└── README.md
|
|
```
|
|
|
|
## 路由系统
|
|
|
|
项目实现了灵活的路由系统，支持：
|
|
|
|
- **页面导航**: 在不同工具页面之间切换
|
|
- **路由同步**: 通过 Chrome Storage 同步路由状态
|
|
- **可见性控制**: 可配置显示哪些页面
|
|
- **页面排序**: 自定义工具卡片的显示顺序
|
|
|
|
### 页面类型 (PageType)
|
|
|
|
| 页面 | 说明 | 默认可见 |
|
|
| ---------------- | ---------- | -------- |
|
|
| `dashboard` | 首页 | ✓ |
|
|
| `timestamp` | 时间戳转换 | ✓ |
|
|
| `storageCleaner` | 存储清理 | ✓ |
|
|
| `openUrl` | URL 工具 | ✓ |
|
|
| `qrCode` | 二维码工具 | ✓ |
|
|
| `openUrlViewer` | URL 查看器 | ✗ |
|
|
|
|
## 扩展入口点
|
|
|
|
| 入口点 | 说明 |
|
|
| -------------- | ------------------------ |
|
|
| **popup** | 点击扩展图标弹出的界面 |
|
|
| **options** | 扩展选项页面 |
|
|
| **sidepanel** | 浏览器侧边栏 |
|
|
| **background** | 后台脚本（生命周期管理） |
|
|
| **content** | 内容脚本（注入到网页） |
|
|
|
|
## 开发环境要求
|
|
|
|
- Node.js >= 18
|
|
- npm 或 yarn
|
|
|
|
## 安装与运行
|
|
|
|
### 1. 安装依赖
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 2. 开发模式
|
|
|
|
```bash
|
|
# Chrome 浏览器
|
|
npm run dev
|
|
|
|
# Firefox 浏览器
|
|
npm run dev:firefox
|
|
```
|
|
|
|
### 3. 构建生产版本
|
|
|
|
```bash
|
|
# Chrome 浏览器
|
|
npm run build
|
|
|
|
# Firefox 浏览器
|
|
npm run build:firefox
|
|
```
|
|
|
|
### 4. 打包分发
|
|
|
|
```bash
|
|
# Chrome 浏览器
|
|
npm run zip
|
|
|
|
# Firefox 浏览器
|
|
npm run zip:firefox
|
|
```
|
|
|
|
### 5. 代码质量
|
|
|
|
```bash
|
|
npm run compile # TypeScript 类型检查
|
|
npm run lint # ESLint 代码检查
|
|
```
|
|
|
|
### 6. 测试
|
|
|
|
```bash
|
|
npm run test # 运行所有测试
|
|
npm run test:watch # 运行测试并监听文件变化
|
|
npm run test:coverage # 运行测试并生成覆盖率报告
|
|
```
|
|
|
|
## 权限说明
|
|
|
|
扩展请求以下权限：
|
|
|
|
- `storage` 和 `unlimitedStorage` - 本地数据存储
|
|
- `clipboardWrite` - 剪贴板写入（复制功能）
|
|
- `activeTab`, `scripting`, `tabs` - 当前标签页控制和脚本注入
|
|
- `cookies` - Cookie 访问
|
|
- `sidePanel` - 侧边栏支持
|
|
- `<all_urls>` - 访问所有网站内容（内容脚本注入）
|
|
|
|
## 主要依赖
|
|
|
|
- `react`, `react-dom` - 前端框架
|
|
- `@mui/material` - UI 组件库
|
|
- `dayjs` - 日期处理
|
|
- `@webext-core/messaging` - 扩展消息通信
|
|
- `vitest` - 测试框架
|
|
- `@testing-library/react` - React 组件测试
|
|
|
|
## 浏览器兼容性
|
|
|
|
- Chrome (推荐)
|
|
- Firefox
|
|
|
|
## 许可证
|
|
|
|
此项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。
|