Merge branch 'main' of https://github.com/LingandRX/testing-tool

CLAUDE.md

@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## 项目概述
 
-这是一个基于 WXT 框架的浏览器扩展项目，提供测试工具功能，包括时间戳转换等。
+这是一个基于 WXT 框架的浏览器扩展项目，提供时间戳转换工具。项目已精简为核心功能，移除了录制回放等复杂功能。
 
 ## 核心命令
 
@@ -19,25 +19,6 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 - `npm run compile` - TypeScript 类型检查（不生成文件）
 - `npm run lint` - 运行 ESLint 检查
 
-### 测试相关
-
-- `npm run test` - 运行所有测试（单次执行）
-- `npm run test:watch` - 运行测试并监听文件变化
-- `npm run test:coverage` - 运行测试并生成覆盖率报告
-
-**运行单个测试文件：**
-
-```bash
-npx vitest run components/__tests__/CopyButton.test.tsx
-```
-
-**测试技术栈：**
-
-- Vitest - 测试框架
-- @testing-library/react - React 组件测试
-- @testing-library/user-event v13 - 用户交互模拟（注意：v13 不支持 setup()，使用 fireEvent）
-- jsdom - 浏览器环境模拟
-
 ### 依赖与准备
 
 - `npm install` - 安装依赖
@@ -51,86 +32,107 @@ npx vitest run components/__tests__/CopyButton.test.tsx
 - **框架**: WXT (Web Extension Toolkit) - 浏览器扩展开发框架
 - **前端**: React 19 + TypeScript
 - **UI 库**: Material UI (MUI)
-- **状态管理**: React Hooks
+- **日期处理**: dayjs (含 UTC 和时区插件)
-- **路由**: React Router DOM
+- **通信**: @webext-core/messaging
 
 ### 目录结构
 
 ```
-├── components/           # 可复用 UI 组件
-│   ├── CopyButton.tsx           # 复制按钮组件
-│   ├── DatetimeToTimestamp.tsx   # 日期转时间戳组件
-│   ├── Navbar.tsx                # 导航栏组件
-│   ├── RoutePersistence.tsx      # 路由持久化组件
-│   ├── TimestampExecution.tsx    # 时间戳执行组件
-│   └── TimestampToDatetime.tsx   # 时间戳转日期组件
 ├── entrypoints/          # 浏览器扩展入口点
-│   ├── background.ts     # 后台脚本（主进程）
+│   ├── background.ts     # 后台脚本（处理扩展安装/更新，注入内容脚本）
-│   ├── content.ts        # 内容脚本（注入到页面）
+│   ├── content.ts        # 内容内容脚本（注入到页面，当前为空占位）
-│   └── popup/            # 扩展弹窗界面
+│   ├── popup/            # 扩展弹窗界面
-│       ├── App.tsx       # 弹窗主应用
+│   │   ├── App.tsx       # 弹窗主应用
-│       ├── main.tsx      # 弹窗入口
+│   │   ├── main.tsx      # 弹窗入口
-│       └── pages/        # 弹窗页面
+│   │   ├── index.html    # 弹窗 HTML
-│           ├── TestPage.tsx      # 测试页面
+│   │   └── pages/       # 弹窗页面
-│           └── TimestampPage.tsx # 时间戳工具页面
+│   │       └── TimestampPage.tsx  # 时间戳转换页面（核心功能）
+│   └── options/         # 选项页面（当前为静态 HTML）
+│       └── index.html    # 选项页 HTML
 ├── utils/                # 工具函数
-│   ├── chromeStorage.ts  # Chrome 存储工具
+│   ├── chromeStorage.ts  # Chrome Storage 工具（类型安全封装）
-│   ├── dayjs.ts          # 日期处理工具
+│   ├── dayjs.ts          # dayjs 配置（UTC + 时区插件）
-│   └── messages.tsx      # 消息通信工具
+│   └── messages.tsx     # 扩展消息通信工具（@webext-core/messaging）
 ├── types/                # 类型定义
-│   └── storage.d.ts      # 存储相关类型
+│   └── storage.d.ts      # StorageSchema 类型定义
+├── constants/            # 常量定义（当前为空）
+└── public/               # 静态资源
 ```
 
-### 核心功能实现
+### 核心功能
 
-#### 1. 时间戳转换工具
+#### 时间戳转换工具 (entrypoints/popup/pages/TimestampPage.tsx)
 
-- 位置: `components/` 目录下的时间戳相关组件
+- 实时显示当前时间戳（毫秒/秒可切换）
-- 依赖: dayjs 库进行日期处理
+- 时间戳 → 日期时间转换
-- 功能: 支持日期与时间戳的双向转换，支持多种格式
+- 日期时间 → 时间戳转换
+- 支持多个时区（亚洲/上海、美洲/纽约、欧洲/伦敦）
+- 一键复制功能
+- 输入验证和错误提示
 
-#### 2. 通信系统
+### 扩展入口点
 
-- 位置: `utils/messages.tsx`
+- **后台脚本** (`entrypoints/background.ts`):
-- 机制: 使用 `@webext-core/messaging` 库实现
+  - 监听扩展安装/更新事件
-- 通信通道: 后台脚本 ↔ 内容脚本 ↔ 弹窗
+  - 自动向所有有效标签页注入内容脚本
+  - 过滤受限协议（chrome://, about:// 等）
 
-#### 3. 数据存储
+- **内容脚本** (`entrypoints/content.ts`):
+  - 匹配所有 URL (`<all_urls>`)
+  - 在文档开始时运行
+  - 当前为占位符，无实际逻辑
 
-- Chrome Storage API: `utils/chromeStorage.ts` (用于配置等小数据)
+- **弹窗** (`entrypoints/popup/`):
+  - 主入口显示 TimestampPage
+  - 提供时间戳转换的完整功能
+
+- **选项页** (`entrypoints/options/`):
+  - 当前为静态 HTML 页面
+  - 可扩展为设置界面
+
+### 数据存储
+
+使用 Chrome Storage API 进行持久化存储：
+
+- 类型安全的封装 (`utils/chromeStorage.ts`)
+- 基于接口定义的 Schema (`types/storage.d.ts`)
+- 当前支持的存储键：
+  - `app/lastRoute`: 上次访问的路由
+  - `app/theme`: 主题设置
+
+### 消息通信
+
+使用 `@webext-core/messaging` 库实现类型安全的扩展内通信：
+
+- 定义在 `utils/messages.tsx`
+- 当前 ProtocolMap 为空（预留接口）
 
 ### 关键配置文件
 
 #### wxt.config.ts
 
-- 配置 WXT 框架参数
+- 启用 React 模块 (`@wxt-dev/module-react`)
-- 启用 React 模块
+- 配置 manifest 权限和 host_permissions
-- 配置浏览器扩展权限
+- 使用 Terser 压缩（强制 ASCII 编码）
-- Vite 构建配置（使用 Terser 压缩，强制 ASCII 编码）
+- 配置图标和选项页
 
 #### manifest 权限
 
 ```typescript
 permissions: [
-  'storage',           // 存储权限
+  'storage',           // Chrome Storage
   'unlimitedStorage',  // 无限制存储
-  'clipboardWrite',    // 剪贴板写入
+  'clipboardWrite',    // 剪贴板写入（复制功能）
-  'activeTab',         // 当前标签页
+  'activeTab',         // 当前标签页访问
   'scripting',         // 脚本注入
   'tabs',              // 标签页管理
-  'debugger',          // 调试器
+  'debugger',          // 调试器权限
 ],
 host_permissions: ['<all_urls>']  // 访问所有网站
 ```
 
 ## 开发注意事项
 
-### 扩展入口点
-
-- **后台脚本**: `entrypoints/background.ts` - 处理扩展生命周期和后台任务
-- **内容脚本**: `entrypoints/content.ts` - 注入到网页中，处理 DOM 交互
-- **弹窗**: `entrypoints/popup/main.tsx` - 用户点击扩展图标时显示
-
 ### 浏览器兼容性
 
 - 支持 Chrome 和 Firefox 浏览器
@@ -138,6 +140,23 @@ host_permissions: ['<all_urls>']  // 访问所有网站
 
 ### 代码质量
 
-- 使用 ESLint 进行代码检查
+- 使用 ESLint 进行代码检查（零警告）
 - Husky 用于 Git 钩子管理
 - Lint-staged 确保暂存文件符合规范
+- Prettier 用于代码格式化
+
+### TypeScript 配置
+
+- 严格模式开启（`strict: true`）
+- 不允许隐式 any（可配置，当前关闭）
+- 未使用变量/参数会报错
+- 模块解析模式：Bundler
+
+### 项目历史
+
+近期重构（根据 git 历史）：
+
+- 移除了录制回放功能
+- 移除了测试页面
+- 精简为单页面时间戳工具
+- 将 storage 工具类重命名为 storageUtil

README.md

@@ -1,54 +1,44 @@
 # Testing Tools Browser Extension
 
-这是一个基于 WXT 框架的浏览器扩展项目，提供了多种实用的测试工具，包括时间戳转换、用户操作录制与回放等功能。
+这是一个基于 WXT 框架的浏览器扩展项目，提供时间戳转换工具。
 
 ## 项目概述
 
-Testing Tools 是一个功能丰富的浏览器扩展，旨在帮助开发者和测试人员更高效地进行网页测试工作。项目采用现代化的技术栈，包括 React 19、TypeScript 和 Material UI，并利用 WXT 框架简化浏览器扩展的开发流程。
+Testing Tools 是一个轻量级的浏览器扩展，提供实用的时间戳转换功能。项目采用现代化的技术栈，包括 React 19、TypeScript 和 Material UI，并利用 WXT 框架简化浏览器扩展的开发流程。
 
 ## 功能特性
 
-### 1. 时间戳转换工具
+### 时间戳转换工具
 
+- 实时显示当前时间戳（毫秒/秒可切换）
 - 日期与时间戳之间的双向转换
-- 支持多种日期格式
+- 支持多个时区（亚洲/上海、美洲/纽约、欧洲/伦敦）
-- 快速复制转换结果
+- 一键复制转换结果
-
+- 输入验证和错误提示
-### 2. 录制与回放功能
-
-- 基于 rrweb 库的用户操作录制
-- 完整的会话回放功能
-- 支持复杂交互场景的重现
-
-### 3. 测试工具页面
-
-- 提供多种实用的测试功能
-- 集成测试库支持
 
 ## 技术栈
 
 - **框架**: WXT (Web Extension Toolkit)
 - **前端**: React 19 + TypeScript
 - **UI 库**: Material UI
-- **状态管理**: React Hooks
+- **日期处理**: dayjs (含 UTC 和时区插件)
-- **数据库**: Dexie.js (IndexedDB 包装器)
+- **通信**: @webext-core/messaging
-- **录制回放**: rrweb
+- **存储**: Chrome Storage API (类型安全封装)
-- **路由**: React Router DOM
 
 ## 项目结构
 
 ```
-├── components/           # 可复用的 UI 组件
 ├── entrypoints/         # 浏览器扩展入口点
-│   ├── popup/           # 扩展弹窗界面
+│   ├── popup/           # 扩展弹窗界面（时间戳转换页面）
 │   ├── options/         # 选项页面
-│   ├── offscreen/       # 离屏文档
 │   ├── background.ts    # 后台脚本
 │   └── content.ts       # 内容脚本
-├── assets/              # 静态资源
+├── utils/              # 工具函数（存储、日期处理、消息通信）
-├── wxt.config.ts        # WXT 配置文件
+├── types/              # TypeScript 类型定义
-├── package.json         # 项目依赖和脚本
+├── public/             # 静态资源
-└── README.md            # 项目说明文档
+├── wxt.config.ts       # WXT 配置文件
+├── package.json        # 项目依赖和脚本
+└── README.md           # 项目说明文档
 ```
 
 ## 开发环境要求
@@ -90,29 +80,33 @@ npm run build:firefox
 # Chrome 浏览器
 npm run zip
 
-# Firefox 浏览器
+# Firefox
 npm run zip:firefox
 ```
 
+### 5. 其他命令
+
+```bash
+npm run compile    # TypeScript 类型检查
+npm run lint       # ESLint 代码检查
+```
+
 ## 权限说明
 
 扩展请求以下权限：
 
 - `storage` 和 `unlimitedStorage` - 本地数据存储
-- `clipboardWrite` - 剪贴板写入
+- `clipboardWrite` - 剪贴板写入（复制功能）
-- `activeTab`, `scripting`, `tabs` - 当前标签页控制
+- `activeTab`, `scripting`, `tabs` - 当前标签页控制和脚本注入
-- `offscreen` - 离屏文档处理
+- `debugger` - 调试器权限
-- `downloads` - 下载管理
+- `<all_urls>` - 访问所有网站内容（内容脚本注入）
-- `<all_urls>` - 访问所有网站内容
 
 ## 主要依赖
 
 - `react`, `react-dom` - 前端框架
 - `@mui/material` - UI 组件库
-- `rrweb`, `rrweb-player` - 录制回放功能
+- `dayjs` - 日期处理
-- `dexie`, `dexie-react-hooks` - 数据库操作
+- `@webext-core/messaging` - 扩展消息通信
-- `react-router-dom` - 路由管理
-- `@testing-library/*` - 测试工具
 
 ## 贡献指南