Develop (#17)
✨新功能 (Features) 智能表单引擎: 新增智能表单填充功能，内置模糊匹配引擎、Mock数据生成器与视觉反馈渲染器。 表单映射与导出: 实现表单映射页面（包含扫描器和高亮器），并支持将配置导出为 JSON 文件，附带 Snackbar 状态提示。 表单识别增强: 增加按域名保存字段类型偏好的功能；添加字段定位闪烁以辅助查找；优化填充逻辑（支持单字段覆盖默认模式）；重构 FieldList 组件以提升操作体验。 ♻️ 代码重构 (Refactor) 通用组件提取: 提取并统一应用通用的 PageHeader 组件，移除独立的侧边栏页面及未使用的组件文件。 状态与逻辑优化: 改进 useStorageState 钩子（增加加载状态管理与防抖处理）；将二维码解析功能重构为独立模块。 类型与依赖简化: 统一使用 SnackbarOptions 类型；简化假数据生成器中 faker 的导入与使用逻辑。 💄 样式与界面 (Style) UI 细节打磨: 统一各页面头部图标颜色，调整表单输入框与按钮交互样式；优化时间戳页面、结果视图布局（增加圆角、调整内边距/对齐方式）；重构存储选项网格及自动刷新开关样式。 代码格式: 优化项目中导入语句的顺序与格式。 👷 持续集成 (CI) 流程提效: 移除 Firefox 测试步骤以减少资源消耗；收紧工作流触发条件，移除 develop 及其变体分支，仅保留 main 分支触发。 📝 文档 (Docs) 代码维护: 补充组件的文档注释与类型导入。
This commit is contained in:
LingandRX
@@ -0,0 +1,83 @@
|
||||
# Testing Tools Browser Extension - Gemini Instructions
|
||||
|
||||
This document provides essential context and instructions for AI agents working on the Testing Tools browser extension project.
|
||||
|
||||
## Project Overview
|
||||
|
||||
**Testing Tools** is a lightweight, feature-rich browser extension built with the [WXT (Web Extension Toolkit)](https://wxt.dev/) framework. It provides a suite of utilities for developers and testers, including timestamp conversion, storage management, URL shortcuts, and QR code tools.
|
||||
|
||||
### Tech Stack
|
||||
|
||||
- **Framework:** WXT (Web Extension Toolkit)
|
||||
- **Frontend:** React 19 + TypeScript
|
||||
- **UI Library:** Material UI (MUI) @7.x
|
||||
- **Date Handling:** dayjs (with UTC and timezone plugins)
|
||||
- **Messaging:** @webext-core/messaging
|
||||
- **Storage:** Type-safe Chrome Storage API wrapper
|
||||
- **Testing:** Vitest + Testing Library (jsdom)
|
||||
|
||||
### Architecture & Directory Structure
|
||||
|
||||
- `entrypoints/`: Extension entry points (popup, options, sidepanel, background, content).
|
||||
- `popup/`: Main UI shown when clicking the extension icon.
|
||||
- `options/`: Extension settings page.
|
||||
- `sidepanel/`: Browser side panel integration.
|
||||
- `background.ts`: Background script for lifecycle management and background tasks.
|
||||
- `content.ts`: Content script injected into web pages.
|
||||
- `components/`: Reusable React components.
|
||||
- `config/`: Application configuration, including routes and themes.
|
||||
- `providers/`: React Context providers (e.g., `RouterProvider`).
|
||||
- `utils/`: Utility functions and service abstractions.
|
||||
- `chromeStorage.ts`: Type-safe storage utility.
|
||||
- `types/`: Global TypeScript type definitions.
|
||||
- `public/`: Static assets (icons, etc.).
|
||||
|
||||
## Building and Running
|
||||
|
||||
### Development
|
||||
|
||||
- `npm run dev`: Start Chrome development mode with HMR.
|
||||
- `npm run dev:firefox`: Start Firefox development mode.
|
||||
- `npm run compile`: Run TypeScript type checking (`tsc --noEmit`).
|
||||
|
||||
### Production
|
||||
|
||||
- `npm run build`: Build production version for Chrome.
|
||||
- `npm run build:firefox`: Build production version for Firefox.
|
||||
- `npm run zip`: Package the extension for Chrome Web Store.
|
||||
- `npm run zip:firefox`: Package the extension for Firefox Add-ons.
|
||||
|
||||
### Testing & Linting
|
||||
|
||||
- `npm run test`: Run all tests once.
|
||||
- `npm run test:watch`: Run tests in watch mode.
|
||||
- `npm run test:coverage`: Run tests and generate coverage report.
|
||||
- `npm run lint`: Run ESLint checks.
|
||||
|
||||
## Development Conventions
|
||||
|
||||
### Coding Style
|
||||
|
||||
- **TypeScript:** Use strict typing. Prefer interfaces for object structures and types for unions/aliases.
|
||||
- **Components:** Functional components with Hooks. Use MUI components for consistent UI.
|
||||
- **Storage:** Always use `storageUtil` from `@/utils/chromeStorage.ts` for accessing `chrome.storage.local`. Ensure keys are defined in `StorageSchema` in `@/types/storage.d.ts`.
|
||||
- **Messaging:** Use `@webext-core/messaging` for communication between entry points. Define message types in `@/utils/messages.ts`.
|
||||
|
||||
### Testing Practices
|
||||
|
||||
- **Framework:** Vitest with `jsdom` environment.
|
||||
- **Location:** Place tests in `__tests__` directories adjacent to the files being tested.
|
||||
- **Naming:** Follow `*.test.ts` or `*.test.tsx` naming convention.
|
||||
- **Patterns:** Use `@testing-library/react` for component testing. Prefer `user-event` (v14+) for simulating interactions.
|
||||
|
||||
### CI/CD
|
||||
|
||||
- **GitHub Actions:** CI runs on push/PR to `main` and `develop` branches (lint, compile, test, build).
|
||||
- **Releases:** Automatic release to GitHub on pushing a `v*` tag.
|
||||
|
||||
## Key Considerations for AI Agents
|
||||
|
||||
- **Manifest Permissions:** When adding features that require new browser APIs, update `wxt.config.ts`.
|
||||
- **Browser Compatibility:** Ensure features work in both Chrome and Firefox.
|
||||
- **React 19:** Be aware of React 19 specific features and deprecations.
|
||||
- **WXT Modules:** The project uses `@wxt-dev/module-react`.
|
||||
Reference in New Issue
Block a user