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 文档说明新功能
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. 安装依赖
npm install
2. 开发模式
# Chrome 浏览器
npm run dev
# Firefox 浏览器
npm run dev:firefox
3. 构建生产版本
# Chrome 浏览器
npm run build
# Firefox 浏览器
npm run build:firefox
4. 打包分发
# Chrome 浏览器
npm run zip
# Firefox 浏览器
npm run zip:firefox
5. 代码质量
npm run compile # TypeScript 类型检查
npm run lint # ESLint 代码检查
6. 测试
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 文件。