rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enhance form recognition, optimize UI, and unify components (#19)

Browse Source 
- **docs**: 完善组件注释、README 目录结构及 AGENTS.md 文档。
- **refactor**:
  - 提取通用 `PageHeader`、`Button`、`DashboardCard` 及 `ErrorBoundary` 组件。
  - 重构消息通信机制，采用 `@webext-core/messaging` 实现类型安全。
  - 将全局通知系统重构为 `SnackbarProvider` (后合并至 `GlobalSnackbar`)。
  - 迁移样式系统至 MUI 主题，移除冗余 CSS。
  - 优化路由配置，支持独立标签页模式及页面懒加载。
  - 移除未使用文件、URL 工具及表单映射相关功能。
- **feat**:
  - 新增配置导出功能（JSON）及状态提示。
  - 新增侧边栏状态变化通知机制。
  - 新增文本统计及 JWT 解析工具。
  - 优化二维码生成与解析逻辑，换用更轻量的 `qrious` 和 `qr-scanner`。
  - 增强高亮器功能，支持闪烁效果及 Shadow DOM 穿透。
- **style**: 优化仪表盘响应式网格布局及 UI 细节。
- **fix**: 修复 `useStorageState` 依赖缺失及路由初始化性能问题。
- **test**: 更新单元测试以覆盖新增的工具函数及功能特性。
This commit is contained in:
LingandRX
2026-05-03 17:06:32 +08:00
committed by GitHub
parent 8d36f21f1b
commit 57ea4d9858
80 changed files with 1909 additions and 15265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+81 -212
View File
@@ -1,258 +1,127 @@
# Testing Tools Browser Extension
这是一个基于 WXT 框架的浏览器扩展项目，提供实用的测试工具功能。
这是一个基于 WXT 框架的浏览器扩展项目，为开发者和测试人员提供实用的效率工具.
## 项目概述
Testing Tools 是一个轻量级的浏览器扩展，提供多种实用的测试工具功能。项目采用现代化的技术栈，包括 React 19、TypeScript 和 Material UI，并利用 WXT 框架简化浏览器扩展的开发流程。
**Testing Tools** 是一个轻量级、功能丰富的浏览器扩展，采用现代化的技术栈构建. 它旨在简化日常开发和测试任务，如时间戳转换、存储管理、JWT 解析等. 项目利用 [WXT (Web Extension Toolkit)](https://wxt.dev/) 框架，提供了卓越的开发体验和跨浏览器支持.
## 功能特性
### Dashboard 首页
### 🚀 Dashboard 首页
- 卡片式工具展示
- 支持自定义工具排序和可见性
- 实时数据预览（时间戳等）
- **工具导航**: 快速访问所有可用工具.
- **个性化定制**: 支持自定义工具的排序和可见性.
- **实时预览**: 在卡片上直接查看实时数据（如当前时间戳）.
### 时间戳转换工具
### ⏰ 时间戳转换工具
- 实时显示当前时间戳（毫秒/秒可切换）
- 日期与时间戳之间的双向转换
- 支持多个时区（亚洲/上海、美洲/纽约、欧洲/伦敦）
- 一键复制转换结果
- 输入验证和错误提示
- **实时显示**: 毫秒级精度显示当前系统时间.
- **双向转换**: 日期字符串与 Unix 时间戳（秒/毫秒）之间的无缝转换.
- **多时区支持**: 预设常用时区（亚洲/上海、美洲/纽约、欧洲/伦敦），支持快速切换.
- **快捷操作**: 一键复制转换结果，支持多种格式.
### 存储清理工具
### 🧹 存储清理工具
- 自动读取当前域名
- 支持清理多种存储类型：
- localStorage
- sessionStorage
- IndexedDB
- Cookies
- Cache Storage
- Service Workers
- 可选择的清理类型（默认全选）
- 确认对话框防止误操作
- 清理结果统计
- 自动刷新页面选项
- **智能识别**: 自动检测并显示当前活动标签页的域名.
- **全面清理**: 支持一键清理 localStorage、sessionStorage、IndexedDB、Cookies、Cache Storage 和 Service Workers.
- **细粒度控制**: 可根据需要选择特定的清理项.
- **自动刷新**: 提供清理后自动刷新页面的选项，确保状态同步.
### URL 工具
### 📝 文本统计工具
- 保存常用 URL 列表
- 快速打开保存的 URL
- 支持 URL 验证和安全检查
- 内置 URL 查看器（iframe 沙箱模式）
- **实时分析**: 键入即统计，无需额外操作.
- **多维指标**: 统计字符数、单词数、行数以及精确的字节大小.
- **性能优化**: 采用高性能分词算法，支持大文本处理.
### 二维码工具
### 🔑 JWT 解析工具
- URL 转二维码（生成器）
- 二维码转 URL（解析器）
- 支持上传二维码图片解析
- 生成的二维码可下载
- 一键复制转换结果
- 卡片式布局，节省空间
- **快速解码**: 自动解析 JSON Web Token 的 Header 和 Payload.
- **格式化显示**: 以着色和格式化的 JSON 视图展示数据，方便阅读.
- **安全检查**: 自动去除 `Bearer` 前缀，处理异常输入并提供友好提示.
- **签名查看**: 展示 JWT 签名部分，辅助验证令牌完整性.
### 🖼️ 二维码工具
- **生成器**: 将当前 URL 或自定义文本快速转换为二维码，支持下载.
- **解析器**: 支持通过上传图片或粘贴图片来解析二维码内容.
## 技术栈
- **框架**: WXT (Web Extension Toolkit)
- **框架**: [WXT (Web Extension Toolkit)](https://wxt.dev/)
- **前端**: React 19 + TypeScript
- **UI 库**: Material UI
- **日期处理**: dayjs (含 UTC 和时区插件)
- **UI 组件**: Material UI (MUI) @7.x
- **样式**: Emotion (Styled Components)
- **日期处理**: dayjs (集成 UTC 和 Timezone 插件)
- **通信**: @webext-core/messaging
- **存储**: Chrome Storage API (类型安全封装)
- **二维码**: qrcode (生成) + jsqr (解析)
- **解析引擎**: qr-scanner (二维码解析), qrious (二维码生成)
- **测试**: Vitest + Testing Library
## 项目结构
```
├── components/ # 可复用 UI 组件
│ ├── Button.tsx
│ ├── CopyButton.tsx
│ ├── DashboardCard.tsx # 仪表盘卡片组件（React.memo 优化）
│ ├── GlobalSnackbar.tsx
│ ├── PageHeader.tsx # 页面标题栏组件
│ ├── RouterContainer.tsx
│ ├── StorageCleanerConfirm.tsx
│ ├── ToolCard.tsx
│ └── TopBar.tsx
├── config/ # 配置文件
│ ├── dashboardCards.tsx # 仪表盘卡片配置数据
│ └── 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
```text
├── components/ # 可复用 React 组件
├── config/ # 应用配置（路由、功能元数据、主题）
│ ├── features.tsx # 功能定义与路由映射
│ └── pageTheme.ts # 各功能页面的视觉风格配置
├── entrypoints/ # 扩展程序入口点
│ ├── popup/ # 点击图标弹出的主界面
│ ├── options/ # 扩展程序设置页面
│ ├── sidepanel/ # 浏览器侧边栏集成
│ ├── background.ts # 后台 Service Worker
│ └── content.ts # 网页注入脚本
├── pages/ # 各功能模块的页面组件
├── providers/ # 全局状态提供者 (Router, Snackbar 等)
├── types/ # TypeScript 类型声明
├── utils/ # 工具函数与服务抽象
├── public/ # 静态资源 (图标、 manifest 资源等)
├── wxt.config.ts # WXT 框架核心配置
└── package.json # 项目元数据与依赖管理
```
## 路由系统
## 开发与部署
项目实现了灵活的路由系统，支持：
### 开发环境要求
- **页面导航**: 在不同工具页面之间切换
- **路由同步**: 通过 Chrome Storage 同步路由状态
- **可见性控制**: 可配置显示哪些页面
- **页面排序**: 自定义工具卡片的显示顺序
- Node.js >= 18.x
- npm 或 pnpm
### 页面类型 (PageType)
### 常用命令
| 页面 | 说明 | 默认可见 |
| ---------------- | ---------- | -------- |
| `dashboard` | 首页 | ✓ |
| `timestamp` | 时间戳转换 | ✓ |
| `storageCleaner` | 存储清理 | ✓ |
| `openUrl` | URL 工具 | ✓ |
| `qrCode` | 二维码工具 | ✓ |
| `openUrlViewer` | URL 查看器 | ✗ |
| 命令 | 说明 |
| ----------------------- | -------------------------------- |
| `npm run dev` | 启动 Chrome 开发模式（支持 HMR） |
| `npm run dev:firefox` | 启动 Firefox 开发模式 |
| `npm run build` | 构建 Chrome 生产版本 |
| `npm run compile` | 执行 TypeScript 类型检查 |
| `npm run lint` | 执行 ESLint 代码规范检查 |
| `npm run test` | 运行单元测试 |
| `npm run test:coverage` | 生成测试覆盖率报告 |
## 扩展入口点
### 自动化流程
| 入口点 | 说明 |
| -------------- | ------------------------ |
| **popup** | 点击扩展图标弹出的界面 |
| **options** | 扩展选项页面 |
| **sidepanel** | 浏览器侧边栏 |
| **background** | 后台脚本（生命周期管理） |
| **content** | 内容脚本（注入到网页） |
项目通过 GitHub Actions 实现了完善的 CI/CD 流程：
## 开发环境要求
- 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 # 运行测试并生成覆盖率报告
```
## 持续集成与发布
项目使用 GitHub Actions 实现自动化 CI/CD，无需手动操作。
### CI — 持续集成
在以下场景自动触发：
- push 到 `main` / `develop` / `develop-*` 分支
- 所有 PR（合并到 `main` 或 `develop`）
自动执行：ESLint 检查 → TypeScript 类型检查 → 单元测试 → Chrome & Firefox 构建验证。
### 发布版本
只需推送符合 `v*` 格式的 Git tag，即可自动完成全量 CI 检查、打包并发布到 GitHub Release：
```bash
git tag v1.0.0
git push origin v1.0.0
```
> 含 `-` 的 tag（如 `v1.0.0-beta.1`）会自动标记为预发布版本（prerelease）。
工作流文件位于 `.github/workflows/`：
- `ci.yml` — 持续集成
- `release.yml` — 自动发布
- **CI**: 每次推送或 PR 都会自动执行 Lint、类型检查、测试和构建验证.
- **Release**: 推送以 `v*` 开头的 Tag 会自动打包并创建 GitHub Release.
## 权限说明
扩展请求以下权限：
本扩展根据功能需要申请了以下权限：
- `storage` 和 `unlimitedStorage` - 本地数据存储
- `clipboardWrite` - 剪贴板写入（复制功能）
- `activeTab`, `scripting`, `tabs` - 当前标签页控制和脚本注入
- `cookies` - Cookie 访问
- `sidePanel` - 侧边栏支持
- `<all_urls>` - 访问所有网站内容（内容脚本注入）
- `storage`: 存储用户设置和工具配置.
- `activeTab` & `tabs`: 获取当前页面 URL 及其元数据.
- `scripting`: 在网页中执行清理脚本.
- `cookies`: 管理和清理网站 Cookie.
- `sidePanel`: 支持在浏览器侧边栏中运行.
- `clipboardWrite`: 提供一键复制功能.
## 主要依赖
## 浏览器支持
- `react`, `react-dom` - 前端框架
- `@mui/material` - UI 组件库
- `dayjs` - 日期处理
- `@webext-core/messaging` - 扩展消息通信
- `vitest` - 测试框架
- `@testing-library/react` - React 组件测试
## 浏览器兼容性
- Chrome (推荐)
- Chrome (及其它 Chromium 内核浏览器)
- Firefox
## 许可证
此项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。
基于 [MIT License](LICENSE) 开源.