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 文档说明新功能
This commit is contained in:
LingandRX
@@ -1,183 +0,0 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Quick Start
|
||||
|
||||
A browser extension built with the WXT framework, providing timestamp conversion and storage cleaning tools.
|
||||
|
||||
### Essential Commands
|
||||
|
||||
| Command | Purpose |
|
||||
| ----------------------- | ------------------------------------------------------ |
|
||||
| `npm install` | Install dependencies (runs `wxt prepare` post-install) |
|
||||
| `npm run dev` | Start development mode for Chrome |
|
||||
| `npm run dev:firefox` | Start development mode for Firefox |
|
||||
| `npm run build` | Build production version for Chrome |
|
||||
| `npm run build:firefox` | Build production version for Firefox |
|
||||
| `npm run zip` | Package Chrome extension |
|
||||
| `npm run zip:firefox` | Package Firefox extension |
|
||||
| `npm run compile` | TypeScript type checking (no file generation) |
|
||||
| `npm run lint` | Run ESLint with zero warnings allowed |
|
||||
|
||||
### Setup
|
||||
|
||||
- Dependencies install automatically runs `wxt prepare` via postinstall hook
|
||||
- Husky Git hooks are initialized via `prepare` script
|
||||
|
||||
## Architecture Overview
|
||||
|
||||
### Tech Stack
|
||||
|
||||
- **Framework**: WXT (Web Extension Toolkit)
|
||||
- **Frontend**: React 19 + TypeScript
|
||||
- **UI Library**: Material UI (MUI)
|
||||
- **Date Handling**: dayjs (with UTC and timezone plugins)
|
||||
- **Communication**: @webext-core/messaging
|
||||
- **Storage**: Chrome Storage API with type-safe wrapper
|
||||
|
||||
### Directory Structure
|
||||
|
||||
```
|
||||
entrypoints/ # Browser extension entry points
|
||||
├── background.ts # Background script (injects content scripts)
|
||||
├── content.ts # Content script (injected into pages)
|
||||
├── popup/ # Extension popup interface
|
||||
│ ├── App.tsx # Popup main application (handles routing)
|
||||
│ ├── main.tsx # Popup entry point
|
||||
│ ├── index.html # Popup HTML
|
||||
│ └── pages/ # Popup pages
|
||||
│ ├── TimestampPage.tsx # Timestamp conversion
|
||||
│ └── StorageCleanerPage.tsx # Storage cleaning
|
||||
└── options/ # Options page (static HTML)
|
||||
utils/ # Utility functions
|
||||
types/ # TypeScript type definitions
|
||||
public/ # Static assets
|
||||
```
|
||||
|
||||
### Extension Entry Points
|
||||
|
||||
- **Background Script**: Listens for install/update events, injects content scripts into valid tabs
|
||||
- **Content Script**: Matches all URLs (`<all_urls>`), runs at document start (currently placeholder)
|
||||
- **Popup**: Main interface with tab-based navigation between timestamp conversion and storage cleaning
|
||||
- **Options Page**: Static HTML page, can be extended as settings interface
|
||||
|
||||
## Core Features
|
||||
|
||||
### Timestamp Conversion Tool (`entrypoints/popup/pages/TimestampPage.tsx`)
|
||||
|
||||
- Real-time current timestamp display (milliseconds/seconds toggle)
|
||||
- Timestamp ↔ date/time conversion
|
||||
- Support for multiple timezones (Asia/Shanghai, America/New_York, Europe/London)
|
||||
- One-click copy functionality
|
||||
- Input validation and error handling
|
||||
|
||||
### Storage Cleaning Tool (`entrypoints/popup/pages/StorageCleanerPage.tsx`)
|
||||
|
||||
- Automatically reads current domain
|
||||
- Cleans multiple storage types: localStorage, sessionStorage, IndexedDB, Cookies, Cache Storage, Service Workers
|
||||
- User-selectable storage types (all selected by default)
|
||||
- Confirmation dialog to prevent accidental cleaning
|
||||
- Cleaning result statistics display
|
||||
- Auto-refresh page after cleaning option
|
||||
- User preferences persistence
|
||||
|
||||
### Data Storage
|
||||
|
||||
Uses Chrome Storage API with type-safe wrapper (`utils/chromeStorage.ts`):
|
||||
|
||||
- **Storage Schema** (`types/storage.d.ts`): Interface-based type definitions
|
||||
- **Current storage keys**:
|
||||
- `app/currentRoute`: Current active page route (default: 'timestamp')
|
||||
- `app/visiblePages`: List of visible pages (default: ['timestamp', 'storageCleaner'])
|
||||
- `app/lastRoute`: Last accessed route (legacy)
|
||||
- `app/theme`: Theme settings
|
||||
- `storageCleaner/preferences`: Storage cleaner preferences (autoRefresh, selectedTypes)
|
||||
|
||||
## Development Workflow
|
||||
|
||||
### Browser Compatibility
|
||||
|
||||
- Supports Chrome and Firefox browsers
|
||||
- Uses WXT framework to abstract browser differences
|
||||
|
||||
### Code Quality
|
||||
|
||||
- **ESLint**: Zero warnings enforced (`npm run lint`)
|
||||
- **Husky**: Git hook management
|
||||
- **lint-staged**: Ensures staged files comply (ESLint + TypeScript + Prettier)
|
||||
- **Prettier**: Code formatting (100 char line width, 2 space indent, single quotes, trailing comma)
|
||||
|
||||
### TypeScript Configuration
|
||||
|
||||
- Strict mode enabled (`strict: true`)
|
||||
- `noImplicitAny` set to `false` (allows implicit any)
|
||||
- Unused variables/parameters cause errors (`noUnusedLocals`, `noUnusedParameters`)
|
||||
- Module resolution mode: Bundler
|
||||
- Path alias: `@/*` maps to project root
|
||||
- Excludes test files from type checking
|
||||
|
||||
### Path Aliases
|
||||
|
||||
- Use `@/` prefix for project-relative imports (e.g., `@/utils/chromeStorage`)
|
||||
- Configured in `tsconfig.json` paths
|
||||
|
||||
## Configuration & Implementation
|
||||
|
||||
### `wxt.config.ts`
|
||||
|
||||
- Enables React module (`@wxt-dev/module-react`)
|
||||
- Configures manifest permissions and host_permissions
|
||||
- Uses Terser compression (forces ASCII encoding)
|
||||
- Configures icons and options page
|
||||
|
||||
### Manifest Permissions
|
||||
|
||||
```typescript
|
||||
permissions: [
|
||||
'storage', // Chrome Storage
|
||||
'unlimitedStorage', // Unlimited storage
|
||||
'clipboardWrite', // Clipboard write (copy functionality)
|
||||
'activeTab', // Current tab access
|
||||
'scripting', // Script injection
|
||||
'tabs', // Tab management
|
||||
'debugger', // Debugger permissions
|
||||
'cookies', // Cookies access (added for storage cleaning)
|
||||
],
|
||||
host_permissions: ['<all_urls>'] // Access all websites
|
||||
```
|
||||
|
||||
### Storage Cleaning Implementation Details
|
||||
|
||||
- **Cookies**: Uses `chrome.cookies` API directly in extension context
|
||||
- **Other storage types**: Uses `chrome.scripting.executeScript` to inject cleaning scripts into page context
|
||||
- **Restricted page filtering**: chrome://, about://, edge://, view-source://, file://, data://
|
||||
- **IndexedDB**: Uses `indexedDB.databases()` to get database list, handles `onblocked` events
|
||||
- **Service Workers**: Unregisters to prevent re-caching
|
||||
- **Cache Storage**: Uses `caches` API to clear all caches
|
||||
|
||||
### Messaging System
|
||||
|
||||
- Uses `@webext-core/messaging` library for type-safe extension communication
|
||||
- Defined in `utils/messages.tsx`
|
||||
- Current ProtocolMap is empty (reserved for future use)
|
||||
|
||||
## CI/CD & Project Context
|
||||
|
||||
### GitHub Actions Workflow (`.github/workflows/node.js.yml`)
|
||||
|
||||
- Triggers on push to main branch or pull requests
|
||||
- Uses Node.js 20.x and 22.x for multi-version testing
|
||||
- Runs ESLint, TypeScript compilation, and build steps
|
||||
- Test commands are currently commented (project has no tests)
|
||||
|
||||
### Project History
|
||||
|
||||
Recent refactoring streamlined the project:
|
||||
|
||||
- Removed recording and playback functionality
|
||||
- Removed test pages
|
||||
- Streamlined to single-page timestamp tool
|
||||
- Renamed storage utility class to storageUtil
|
||||
- Added storage cleaning functionality with persistent preferences
|
||||
- Added route persistence for popup navigation
|
||||
Reference in New Issue
Block a user