Files

T

LingandRX be5e2f02ee Develop (#9 )

* 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 文档说明新功能

2026-04-19 15:31:14 +08:00

5.9 KiB

Raw Blame History

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 文件。

5.9 KiB Raw Blame History