Files

T

LingandRX 60537f6e2e Develop (#17 )

✨新功能 (Features)
智能表单引擎: 新增智能表单填充功能，内置模糊匹配引擎、Mock数据生成器与视觉反馈渲染器。

表单映射与导出: 实现表单映射页面（包含扫描器和高亮器），并支持将配置导出为 JSON 文件，附带 Snackbar 状态提示。

表单识别增强: 增加按域名保存字段类型偏好的功能；添加字段定位闪烁以辅助查找；优化填充逻辑（支持单字段覆盖默认模式）；重构 FieldList 组件以提升操作体验。

♻️ 代码重构 (Refactor)
通用组件提取: 提取并统一应用通用的 PageHeader 组件，移除独立的侧边栏页面及未使用的组件文件。

状态与逻辑优化: 改进 useStorageState 钩子（增加加载状态管理与防抖处理）；将二维码解析功能重构为独立模块。

类型与依赖简化: 统一使用 SnackbarOptions 类型；简化假数据生成器中 faker 的导入与使用逻辑。

💄 样式与界面 (Style)
UI 细节打磨: 统一各页面头部图标颜色，调整表单输入框与按钮交互样式；优化时间戳页面、结果视图布局（增加圆角、调整内边距/对齐方式）；重构存储选项网格及自动刷新开关样式。

代码格式: 优化项目中导入语句的顺序与格式。

👷 持续集成 (CI)
流程提效: 移除 Firefox 测试步骤以减少资源消耗；收紧工作流触发条件，移除 develop 及其变体分支，仅保留 main 分支触发。

📝 文档 (Docs)
代码维护: 补充组件的文档注释与类型导入。

2026-04-30 19:56:32 +08:00

3.7 KiB

Raw Blame History

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) 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.

3.7 KiB Raw Blame History