Develop fill form (#10)

* feat(formRecognizer): 添加表单识别功能及相关组件

添加表单识别功能，包括以下内容：
1. 在路由配置中添加表单识别页面
2. 实现表单识别页面和侧边栏面板
3. 添加表单数据生成工具类
4. 实现与内容脚本的通信机制
5. 添加faker-js依赖用于生成测试数据
6. 支持不同入口点(popup/sidepanel)的组件渲染

* refactor(消息通信): 重构消息通信机制并集中管理消息协议

将分散的消息协议和通信逻辑集中到 utils/messages.ts 中
移除旧的 messages.tsx 文件并更新相关引用
添加消息动作枚举和类型定义，提高类型安全性
优化内容脚本注入失败时的处理逻辑

components/RouterContainer.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import { ROUTES } from '@/config/routes';
+import { ROUTES, getEntryPointType } from '@/config/routes';
 import { useRouter } from '@/providers/RouterProvider';
 import { useMemo } from 'react';
 
@@ -10,11 +10,16 @@ export default function RouterContainer() {
     return currentPage === 'dashboard' ? 'page-transition-dashboard' : 'page-transition-enter';
   }, [currentPage]);
 
+  const entryPointType = useMemo(() => {
+    return getEntryPointType();
+  }, []);
+
   if (!isLoaded) {
     return <div className="app">Loading...</div>;
   }
 
-  const currentRoute = ROUTES.find(route => route.key === currentPage);
+  const currentRoute = ROUTES.find((route) => route.key === currentPage);
+  const Component = currentRoute ? currentRoute.components[entryPointType] : null;
 
   return (
     <Box
@@ -29,7 +34,7 @@ export default function RouterContainer() {
         flexDirection: 'column',
       }}
     >
-      {currentRoute && <currentRoute.component />}
+      {Component && <Component />}
     </Box>
   );
 }

config/routes.ts

@@ -5,12 +5,18 @@ import StorageCleanerPage from '@/entrypoints/popup/pages/StorageCleanerPage';
 import OpenUrlPage from '@/entrypoints/popup/pages/OpenUrlPage';
 import OpenUrlViewerPage from '@/entrypoints/popup/pages/OpenUrlViewerPage';
 import QrCodePage from '@/entrypoints/popup/pages/QrCodePage';
+import FormRecognizerPage from '@/entrypoints/popup/pages/FormRecognizerPage';
+import FormFillSidePanel from '@/entrypoints/sidepanel/pages/FormFillSidePanel';
 
 export interface RouteConfig {
   key: PageType;
   label: string;
   defaultVisible: boolean;
-  component: React.ComponentType;
+  components: {
+    popup: React.ComponentType;
+    sidepanel: React.ComponentType;
+    detached: React.ComponentType;
+  };
 }
 
 export const ROUTES: RouteConfig[] = [
@@ -18,52 +24,99 @@ export const ROUTES: RouteConfig[] = [
     key: 'dashboard',
     label: 'Dashboard',
     defaultVisible: true,
-    component: DashboardPage,
+    components: {
+      popup: DashboardPage,
+      sidepanel: DashboardPage,
+      detached: DashboardPage,
+    },
   },
   {
     key: 'timestamp',
     label: '时间戳',
     defaultVisible: true,
-    component: TimestampPage,
+    components: {
+      popup: TimestampPage,
+      sidepanel: TimestampPage,
+      detached: TimestampPage,
+    },
   },
   {
     key: 'storageCleaner',
     label: '存储清理',
     defaultVisible: true,
-    component: StorageCleanerPage,
+    components: {
+      popup: StorageCleanerPage,
+      sidepanel: StorageCleanerPage,
+      detached: StorageCleanerPage,
+    },
   },
   {
     key: 'openUrl',
     label: 'Open Url',
     defaultVisible: true,
-    component: OpenUrlPage,
+    components: {
+      popup: OpenUrlPage,
+      sidepanel: OpenUrlPage,
+      detached: OpenUrlPage,
+    },
   },
   {
     key: 'qrCode',
     label: '二维码工具',
     defaultVisible: true,
-    component: QrCodePage,
+    components: {
+      popup: QrCodePage,
+      sidepanel: QrCodePage,
+      detached: QrCodePage,
+    },
+  },
+  {
+    key: 'formRecognizer',
+    label: '表单识别',
+    defaultVisible: true,
+    components: {
+      popup: FormRecognizerPage,
+      sidepanel: FormFillSidePanel,
+      detached: FormRecognizerPage,
+    },
   },
   {
     key: 'openUrlViewer',
     label: '查看',
     defaultVisible: false,
-    component: OpenUrlViewerPage,
+    components: {
+      popup: OpenUrlViewerPage,
+      sidepanel: OpenUrlViewerPage,
+      detached: OpenUrlViewerPage,
+    },
   },
 ];
 
 export function getRouteByKey(key: PageType): RouteConfig | undefined {
-  return ROUTES.find(route => route.key === key);
+  return ROUTES.find((route) => route.key === key);
 }
 
 export function getDefaultVisibleRoutes(): PageType[] {
-  return ROUTES.filter(route => route.defaultVisible).map(route => route.key);
+  return ROUTES.filter((route) => route.defaultVisible).map((route) => route.key);
 }
 
 export function getAllRouteKeys(): PageType[] {
-  return ROUTES.map(route => route.key);
+  return ROUTES.map((route) => route.key);
 }
 
 export function getDefaultPageOrder(): PageType[] {
-  return ROUTES.filter(route => route.key !== 'dashboard' && route.key !== 'openUrlViewer').map(route => route.key);
+  return ROUTES.filter((route) => route.key !== 'dashboard' && route.key !== 'openUrlViewer').map(
+    (route) => route.key,
+  );
+}
+
+export function getEntryPointType(): 'popup' | 'sidepanel' | 'detached' {
+  const pathname = window.location.pathname;
+  if (pathname.includes('sidepanel')) {
+    return 'sidepanel';
+  }
+  if (new URLSearchParams(window.location.search).get('mode') === 'detached') {
+    return 'detached';
+  }
+  return 'popup';
 }

entrypoints/background.ts

@@ -1,5 +1,6 @@
 import '../.wxt/types/imports.d.ts';
 import { browser } from 'wxt/browser';
+import { type MessagePayload, type MessageResponse } from '@/utils/messages';
 
 export default defineBackground(() => {
   // 监听扩展图标点击事件，打开侧边栏
@@ -20,40 +21,6 @@ export default defineBackground(() => {
     } else if (reason === 'update') {
       console.log('Extension updated to a new version');
     }
-
-    // 获取所有标签页
-    const tabs = await browser.tabs.query({});
-
-    // 过滤不合法或受限制的 URL
-    const targetTabs = tabs.filter((tab) => {
-      if (!tab.id || !tab.url) return false;
-      const restrictedProtocols = [
-        'chrome:',
-        'chrome-extension:',
-        'about:',
-        'edge:',
-        'view-source:',
-      ];
-      return !restrictedProtocols.some((protocol) => tab.url!.startsWith(protocol));
-    });
-
-    const results = await Promise.allSettled(
-      targetTabs.map((tab) =>
-        browser.scripting
-          .executeScript({
-            target: { tabId: tab.id! },
-            files: ['/content-scripts/content.js'],
-          })
-          .catch((err) => {
-            console.warn(`Failed to inject script into tab ${tab.id}:`, err.message);
-          }),
-      ),
-    );
-
-    const successCount = results.filter((r) => r.status === 'fulfilled').length;
-    console.log(
-      `Successfully injected content script into ${successCount}/${targetTabs.length} tabs.`,
-    );
   });
 
   chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
@@ -61,4 +28,25 @@ export default defineBackground(() => {
       console.log('加载完成的 Tab ID:', tabId);
     }
   });
+
+  // 监听来自 popup/sidepanel 的消息
+  chrome.runtime.onMessage.addListener(
+    (message: MessagePayload, sender, sendResponse: (response: MessageResponse) => void) => {
+      try {
+        // 处理跨标签页的消息转发
+        if (sender.tab) {
+          // 从内容脚本或弹出页面发送的消息
+          console.log('收到来自标签页的消息:', message.action);
+          sendResponse({ success: true, message: '消息已收到' });
+        } else {
+          // 从扩展其他部分发送的消息
+          console.log('收到来自扩展的消息:', message.action);
+          sendResponse({ success: true, message: '消息已收到' });
+        }
+      } catch (error) {
+        console.error('处理消息失败:', error);
+        sendResponse({ success: false, message: '处理消息失败' });
+      }
+    },
+  );
 });

entrypoints/content.ts

@@ -1,9 +1,117 @@
 import '../.wxt/types/imports.d.ts';
+import {
+  fillAllFields,
+  clearAllFields,
+  fillSelectedFields,
+  scanFormFields,
+  highlightField,
+  unhighlightField,
+  FillMode,
+  type FormFieldInfo,
+} from '@/utils/dummyDataGenerator';
+import { MessageAction, type MessagePayload, type MessageResponse } from '@/utils/messages';
+
+// 存储当前扫描到的字段列表，用于高亮联动
+let currentFields: FormFieldInfo[] = [];
 
 export default defineContentScript({
   matches: ['<all_urls>'],
-  runAt: 'document_start',
+  runAt: 'document_end',
   main() {
-    // Content script placeholder
+    // 监听来自 popup/sidepanel 的消息
+    chrome.runtime.onMessage.addListener(
+      (message: MessagePayload, _sender, sendResponse: (response: MessageResponse) => void) => {
+        try {
+          switch (message.action) {
+            case MessageAction.SCAN_FORM_FIELDS: {
+              const result = scanFormFields();
+              currentFields = result.fields;
+              sendResponse({
+                success: true,
+                fields: result.fields.map((f) => ({
+                  id: f.id,
+                  fieldType: f.fieldType,
+                  label: f.label,
+                  placeholder: f.placeholder,
+                  name: f.name,
+                  value: f.value,
+                  isSelected: f.isSelected,
+                  generatedValue: f.generatedValue,
+                })),
+                totalCount: result.totalCount,
+                validCount: result.validCount,
+                hasModal: !!result.modalContainer,
+              });
+              break;
+            }
+            case MessageAction.FILL_VALID_DATA:
+              fillAllFields(FillMode.VALID, message.includeHidden || false);
+              sendResponse({ success: true, message: '已填充有效数据' });
+              break;
+            case MessageAction.FILL_INVALID_DATA:
+              fillAllFields(FillMode.INVALID, message.includeHidden || false);
+              sendResponse({ success: true, message: '已填充无效数据' });
+              break;
+            case MessageAction.FILL_SELECTED_FIELDS: {
+              // 使用之前扫描时存储的字段，因为它们包含element属性
+              const fieldIds = (message.fields || []).filter((f) => f.isSelected).map((f) => f.id);
+              const fieldsToFill = currentFields.filter((f) => fieldIds.includes(f.id));
+              fieldsToFill.forEach((f) => (f.isSelected = true));
+              const count = fillSelectedFields(fieldsToFill, message.mode || FillMode.VALID);
+              sendResponse({ success: true, message: `已填充 ${count} 个字段` });
+              break;
+            }
+            case MessageAction.CLEAR_ALL_FIELDS:
+              clearAllFields();
+              sendResponse({ success: true, message: '已清空所有字段' });
+              break;
+            case MessageAction.HIGHLIGHT_FIELD: {
+              const fieldId = message.fieldId;
+              const field = currentFields.find((f) => f.id === fieldId);
+              if (field) {
+                highlightField(field.element);
+                sendResponse({ success: true });
+              } else {
+                sendResponse({ success: false, message: '未找到字段' });
+              }
+              break;
+            }
+            case MessageAction.UNHIGHLIGHT_FIELD: {
+              const fieldId = message.fieldId;
+              const field = currentFields.find((f) => f.id === fieldId);
+              if (field) {
+                unhighlightField(field.element);
+                sendResponse({ success: true });
+              } else {
+                sendResponse({ success: false, message: '未找到字段' });
+              }
+              break;
+            }
+            case MessageAction.HIGHLIGHT_ALL_FIELDS: {
+              const fieldIds = message.fieldIds || [];
+              fieldIds.forEach((id) => {
+                const field = currentFields.find((f) => f.id === id);
+                if (field) {
+                  highlightField(field.element);
+                }
+              });
+              sendResponse({ success: true });
+              break;
+            }
+            case MessageAction.UNHIGHLIGHT_ALL_FIELDS:
+              currentFields.forEach((field) => {
+                unhighlightField(field.element);
+              });
+              sendResponse({ success: true });
+              break;
+            default:
+              sendResponse({ success: false, message: '未知操作' });
+          }
+        } catch (error) {
+          console.error('执行操作失败:', error);
+          sendResponse({ success: false, message: '执行操作失败' });
+        }
+      },
+    );
   },
 });

entrypoints/popup/pages/DashboardPage.tsx

@@ -5,6 +5,7 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import StorageIcon from '@mui/icons-material/Storage';
 import LanguageIcon from '@mui/icons-material/Language';
 import QrCodeIcon from '@mui/icons-material/QrCode';
+import DescriptionIcon from '@mui/icons-material/Description';
 import type { PageType } from '@/types/storage';
 import { useEffect, useState } from 'react';
 import dayjs from '@/utils/dayjs';
@@ -88,6 +89,18 @@ export default function DashboardPage() {
             cardBackgroundColor={dashboardPageStyles.cardBackgroundColor}
           />
         );
+      case 'formRecognizer':
+        return (
+          <ToolCard
+            key={key}
+            title="表单识别"
+            description="识别标签页中的表单内容"
+            colorCode="#ff5722"
+            icon={<DescriptionIcon sx={{ fontSize: 20 }} />}
+            onClick={() => navigateTo('formRecognizer')}
+            cardBackgroundColor={dashboardPageStyles.cardBackgroundColor}
+          />
+        );
       default:
         return null;
     }

entrypoints/popup/pages/FormRecognizerPage.tsx

@@ -0,0 +1,193 @@
+import { useState } from 'react';
+import {
+  Box,
+  Typography,
+  Container,
+  Button,
+  Paper,
+  CircularProgress,
+  Stack,
+  Switch,
+  FormControlLabel,
+} from '@mui/material';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
+import GlobalSnackbar, { useSnackbar } from '@/components/GlobalSnackbar';
+import { dashboardPageStyles } from '@/config/pageTheme';
+
+const FormRecognizerPage = () => {
+  const { snackbarProps, showMessage } = useSnackbar({ autoHideDuration: 1500 });
+  const [loading, setLoading] = useState(false);
+  const [includeHidden, setIncludeHidden] = useState(false);
+
+  interface MessagePayload {
+    includeHidden?: boolean;
+  }
+
+  const sendMessageToContent = async (action: string, payload?: MessagePayload) => {
+    setLoading(true);
+    try {
+      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+      if (!tab.id) {
+        showMessage('无法获取当前标签页', { severity: 'error' });
+        return;
+      }
+
+      const response = await chrome.tabs.sendMessage(tab.id, { action, ...payload });
+      if (response.success) {
+        showMessage(response.message, { severity: 'success' });
+      } else {
+        showMessage(response.message, { severity: 'error' });
+      }
+    } catch (error) {
+      console.error('发送消息失败:', error);
+      showMessage('请确保当前页面已加载完成', { severity: 'error' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleFillValidData = () => {
+    sendMessageToContent('fillValidData', { includeHidden });
+  };
+
+  const handleFillInvalidData = () => {
+    sendMessageToContent('fillInvalidData', { includeHidden });
+  };
+
+  const handleClearAllFields = () => {
+    sendMessageToContent('clearAllFields');
+  };
+
+  return (
+    <Box sx={{ bgcolor: dashboardPageStyles.backgroundColor, minHeight: '100%', pb: 4 }}>
+      <Container maxWidth="sm" sx={{ py: 3, px: 2 }}>
+        <Box sx={{ mb: 4 }}>
+          <Typography variant="h6" component="h1" sx={{ fontWeight: 700, mb: 1 }}>
+            Dummy Data Generator
+          </Typography>
+          <Typography variant="body2" color="text.secondary">
+            一键填充表单测试数据，提升开发和测试效率
+          </Typography>
+        </Box>
+
+        {/* 主要操作按钮 */}
+        <Stack spacing={2} sx={{ mb: 4 }}>
+          <Button
+            variant="contained"
+            startIcon={
+              loading ? <CircularProgress size={16} color="inherit" /> : <AutoAwesomeIcon />
+            }
+            onClick={handleFillValidData}
+            disabled={loading}
+            fullWidth
+            sx={{
+              py: 1.2,
+              borderRadius: 3,
+              bgcolor: '#4caf50',
+              fontWeight: 700,
+              '&:hover': {
+                bgcolor: '#388e3c',
+              },
+            }}
+          >
+            {loading ? '填充中...' : '一键填充（有效数据）'}
+          </Button>
+
+          <Button
+            variant="contained"
+            startIcon={
+              loading ? <CircularProgress size={16} color="inherit" /> : <ErrorOutlineIcon />
+            }
+            onClick={handleFillInvalidData}
+            disabled={loading}
+            fullWidth
+            sx={{
+              py: 1.2,
+              borderRadius: 3,
+              bgcolor: '#ff9800',
+              fontWeight: 700,
+              '&:hover': {
+                bgcolor: '#f57c00',
+              },
+            }}
+          >
+            {loading ? '填充中...' : '一键填充（异常数据）'}
+          </Button>
+
+          <Button
+            variant="outlined"
+            startIcon={loading ? <CircularProgress size={16} color="inherit" /> : <ClearAllIcon />}
+            onClick={handleClearAllFields}
+            disabled={loading}
+            fullWidth
+            sx={{
+              py: 1.2,
+              borderRadius: 3,
+              borderColor: '#f44336',
+              color: '#f44336',
+              fontWeight: 700,
+              '&:hover': {
+                borderColor: '#d32f2f',
+                bgcolor: 'rgba(244, 67, 54, 0.05)',
+              },
+            }}
+          >
+            {loading ? '清空ing...' : '一键清空所有表单'}
+          </Button>
+        </Stack>
+
+        {/* 选项设置 */}
+        <Paper elevation={0} sx={{ borderRadius: 4, overflow: 'hidden', mb: 4 }}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider', px: 2, py: 1.5 }}>
+            <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+              填充选项
+            </Typography>
+          </Box>
+          <Box sx={{ p: 2 }}>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={includeHidden}
+                  onChange={(e) => setIncludeHidden(e.target.checked)}
+                  color="primary"
+                />
+              }
+              label="包含隐藏字段"
+              sx={{ width: '100%' }}
+            />
+          </Box>
+        </Paper>
+
+        {/* 功能说明 */}
+        <Paper elevation={0} sx={{ borderRadius: 4, overflow: 'hidden' }}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider', px: 2, py: 1.5 }}>
+            <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+              功能说明
+            </Typography>
+          </Box>
+          <Box sx={{ p: 2 }}>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <strong>有效数据模式：</strong>生成符合格式要求的测试数据，适用于正常功能测试。
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <strong>异常数据模式：</strong>生成边界值或格式错误的数据，适用于异常场景测试。
+            </Typography>
+            <Typography variant="body2" sx={{ mb: 1 }}>
+              <strong>一键清空：</strong>快速清空当前页面所有表单字段的值。
+            </Typography>
+            <Typography variant="body2">
+              <strong>支持的字段类型：</strong>
+              文本、邮箱、手机号、数字、日期、文本域、密码、身份证号等。
+            </Typography>
+          </Box>
+        </Paper>
+
+        <GlobalSnackbar {...snackbarProps} />
+      </Container>
+    </Box>
+  );
+};
+
+export default FormRecognizerPage;

entrypoints/sidepanel/pages/FormFillSidePanel.tsx

@@ -0,0 +1,477 @@
+import { useState } from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  Button,
+  Checkbox,
+  TextField,
+  IconButton,
+  CircularProgress,
+  Switch,
+  FormControlLabel,
+  Tooltip,
+  Alert,
+} from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import HighlightAltIcon from '@mui/icons-material/HighlightAlt';
+import GlobalSnackbar, { useSnackbar } from '@/components/GlobalSnackbar';
+import { FieldType, FillMode } from '@/utils/dummyDataGenerator';
+import { MessageAction, sendMessageToContent, injectContentScript } from '@/utils/messages';
+
+interface FieldData {
+  id: string;
+  fieldType: FieldType;
+  label: string | null;
+  placeholder: string;
+  name: string;
+  value: string;
+  isSelected: boolean;
+  generatedValue: string;
+}
+
+const FormFillSidePanel = () => {
+  const { snackbarProps, showMessage } = useSnackbar({ autoHideDuration: 1500 });
+  const [loading, setLoading] = useState(false);
+  const [scanning, setScanning] = useState(false);
+  const [fields, setFields] = useState<FieldData[]>([]);
+  const [mode, setMode] = useState<'valid' | 'invalid'>('valid');
+  const [fillEmptyOnly, setFillEmptyOnly] = useState(false);
+  const [includeHidden] = useState(false);
+  const [hoveredFieldId, setHoveredFieldId] = useState<string | null>(null);
+
+  const handleScan = async () => {
+    setScanning(true);
+    try {
+      let response = await sendMessageToContent(MessageAction.SCAN_FORM_FIELDS);
+
+      // 如果连接失败，尝试注入内容脚本
+      if (!response.success && response.message && response.message.includes('无法连接')) {
+        showMessage('正在注入内容脚本...', { severity: 'info' });
+        const injected = await injectContentScript();
+        if (injected) {
+          // 注入成功后再次尝试
+          response = await sendMessageToContent(MessageAction.SCAN_FORM_FIELDS);
+        }
+      }
+
+      if (response.success) {
+        setFields(response.fields || []);
+        showMessage(`扫描完成，发现 ${response.totalCount} 个可填充字段`, { severity: 'success' });
+      } else {
+        showMessage(response.message || '扫描失败', { severity: 'error' });
+      }
+    } catch (error) {
+      console.error('扫描失败:', error);
+      showMessage('扫描失败，请确保页面已加载', { severity: 'error' });
+    } finally {
+      setScanning(false);
+    }
+  };
+
+  const handleRefreshAll = async () => {
+    const updatedFields = fields.map((field) => ({
+      ...field,
+      generatedValue: generateRandomValue(field.fieldType, mode),
+    }));
+    setFields(updatedFields);
+    showMessage('已刷新所有数据', { severity: 'success' });
+  };
+
+  const handleRefreshField = (fieldId: string) => {
+    setFields((prevFields) =>
+      prevFields.map((field) =>
+        field.id === fieldId
+          ? { ...field, generatedValue: generateRandomValue(field.fieldType, mode) }
+          : field,
+      ),
+    );
+  };
+
+  const handleToggleSelect = (fieldId: string) => {
+    setFields((prevFields) =>
+      prevFields.map((field) =>
+        field.id === fieldId ? { ...field, isSelected: !field.isSelected } : field,
+      ),
+    );
+  };
+
+  const handleSelectAll = () => {
+    const allSelected = fields.every((f) => f.isSelected);
+    setFields((prevFields) => prevFields.map((field) => ({ ...field, isSelected: !allSelected })));
+  };
+
+  const handleEditValue = (fieldId: string, newValue: string) => {
+    setFields((prevFields) =>
+      prevFields.map((field) =>
+        field.id === fieldId ? { ...field, generatedValue: newValue } : field,
+      ),
+    );
+  };
+
+  const handleFill = async () => {
+    setLoading(true);
+    try {
+      const selectedFields = fields.filter((f) => f.isSelected);
+      const response = await sendMessageToContent(MessageAction.FILL_SELECTED_FIELDS, {
+        fields: selectedFields,
+        mode: mode === 'valid' ? FillMode.VALID : FillMode.INVALID,
+        includeHidden,
+      });
+      if (response.success) {
+        showMessage(response.message || '填充成功', { severity: 'success' });
+      } else {
+        showMessage(response.message || '填充失败', { severity: 'error' });
+      }
+    } catch (error) {
+      console.error('填充失败:', error);
+      showMessage('填充失败', { severity: 'error' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClear = async () => {
+    setLoading(true);
+    try {
+      const response = await sendMessageToContent(MessageAction.CLEAR_ALL_FIELDS);
+      if (response.success) {
+        showMessage(response.message || '已清空', { severity: 'success' });
+      } else {
+        showMessage(response.message || '清空失败', { severity: 'error' });
+      }
+    } catch (error) {
+      console.error('清空失败:', error);
+      showMessage('清空失败', { severity: 'error' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleHoverField = async (fieldId: string | null) => {
+    setHoveredFieldId(fieldId);
+    if (fieldId) {
+      await sendMessageToContent(MessageAction.HIGHLIGHT_FIELD, { fieldId });
+    } else {
+      await sendMessageToContent(MessageAction.UNHIGHLIGHT_ALL_FIELDS);
+    }
+  };
+
+  const generateRandomValue = (fieldType: FieldType, fillMode: 'valid' | 'invalid'): string => {
+    const chineseNames = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十'];
+    const englishNames = ['John Doe', 'Jane Smith', 'Bob Wilson', 'Alice Brown'];
+    const domains = ['example.com', 'test.com', 'demo.com'];
+    const specialChars = '!@#$%^&*()';
+
+    switch (fieldType) {
+      case FieldType.NAME:
+        return Math.random() > 0.5
+          ? chineseNames[Math.floor(Math.random() * chineseNames.length)]
+          : englishNames[Math.floor(Math.random() * englishNames.length)];
+      case FieldType.EMAIL: {
+        const emailPrefix = Math.random().toString(36).substr(2, 8);
+        const emailDomain = domains[Math.floor(Math.random() * domains.length)];
+        return fillMode === 'valid' ? `${emailPrefix}@${emailDomain}` : `${emailPrefix}example.com`;
+      }
+      case FieldType.PHONE: {
+        const phonePrefixes = ['130', '131', '132', '135', '136', '137', '138', '139'];
+        const phonePrefix = phonePrefixes[Math.floor(Math.random() * phonePrefixes.length)];
+        const phoneSuffix = Math.floor(Math.random() * 100000000)
+          .toString()
+          .padStart(8, '0');
+        return fillMode === 'valid'
+          ? phonePrefix + phoneSuffix
+          : phonePrefix + Math.floor(Math.random() * 10000000).toString();
+      }
+      case FieldType.NUMBER:
+        return fillMode === 'valid'
+          ? String(Math.floor(Math.random() * 10000))
+          : String(-Math.floor(Math.random() * 10000));
+      case FieldType.DATE: {
+        const days = Math.floor(Math.random() * 365);
+        const date = new Date();
+        date.setDate(date.getDate() + days);
+        return date.toISOString().split('T')[0];
+      }
+      case FieldType.TEXTarea:
+        return fillMode === 'valid'
+          ? '这是一段测试文本，用于填充表单输入区域。'.repeat(3)
+          : specialChars.repeat(100);
+      case FieldType.PASSWORD:
+        return 'Test@123';
+      case FieldType.ID_CARD: {
+        const areaCode = '110101';
+        const year = 1990 + Math.floor(Math.random() * 30);
+        const month = String(1 + Math.floor(Math.random() * 12)).padStart(2, '0');
+        const day = String(1 + Math.floor(Math.random() * 28)).padStart(2, '0');
+        const random = Math.floor(Math.random() * 10000)
+          .toString()
+          .padStart(4, '0');
+        return areaCode + year + month + day + random;
+      }
+      default:
+        return fillMode === 'valid' ? '测试数据' : specialChars.repeat(50);
+    }
+  };
+
+  const getFieldTypeLabel = (fieldType: FieldType): string => {
+    const labels: Record<FieldType, string> = {
+      [FieldType.TEXT]: '文本',
+      [FieldType.EMAIL]: '邮箱',
+      [FieldType.PHONE]: '手机',
+      [FieldType.NUMBER]: '数字',
+      [FieldType.DATE]: '日期',
+      [FieldType.TEXTarea]: '文本域',
+      [FieldType.RADIO]: '单选',
+      [FieldType.CHECKBOX]: '多选',
+      [FieldType.SELECT]: '下拉',
+      [FieldType.PASSWORD]: '密码',
+      [FieldType.NAME]: '姓名',
+      [FieldType.ID_CARD]: '身份证',
+      [FieldType.UNKNOWN]: '未知',
+    };
+    return labels[fieldType] || '未知';
+  };
+
+  const selectedCount = fields.filter((f) => f.isSelected).length;
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', bgcolor: '#f5f5f5' }}>
+      <Box sx={{ p: 2, bgcolor: 'white', borderBottom: '1px solid #e0e0e0' }}>
+        <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
+          Dummy Data Pro
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          智能表单填充助手
+        </Typography>
+      </Box>
+
+      <Box sx={{ p: 2, bgcolor: 'white', mb: 1 }}>
+        <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
+          <Button
+            variant="contained"
+            size="small"
+            startIcon={scanning ? <CircularProgress size={16} color="inherit" /> : <RefreshIcon />}
+            onClick={handleScan}
+            disabled={scanning}
+            sx={{ flex: 1 }}
+          >
+            {scanning ? '扫描中...' : '扫描表单'}
+          </Button>
+          <Button
+            variant="outlined"
+            size="small"
+            startIcon={<AutoFixHighIcon />}
+            onClick={handleRefreshAll}
+            disabled={fields.length === 0}
+          >
+            刷新
+          </Button>
+        </Box>
+
+        <Box sx={{ display: 'flex', gap: 1, mb: 2 }}>
+          <Button
+            variant="contained"
+            color="success"
+            size="small"
+            onClick={() => setMode('valid')}
+            sx={{
+              flex: 1,
+              bgcolor: mode === 'valid' ? '#4caf50' : '#e0e0e0',
+              color: mode === 'valid' ? 'white' : 'text.primary',
+            }}
+          >
+            有效数据
+          </Button>
+          <Button
+            variant="contained"
+            color="warning"
+            size="small"
+            onClick={() => setMode('invalid')}
+            sx={{
+              flex: 1,
+              bgcolor: mode === 'invalid' ? '#ff9800' : '#e0e0e0',
+              color: mode === 'invalid' ? 'white' : 'text.primary',
+            }}
+          >
+            异常数据
+          </Button>
+        </Box>
+
+        <FormControlLabel
+          control={
+            <Switch
+              checked={fillEmptyOnly}
+              onChange={(e) => setFillEmptyOnly(e.target.checked)}
+              size="small"
+            />
+          }
+          label="仅填充空字段"
+          sx={{ mb: 1 }}
+        />
+
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Button
+            variant="contained"
+            color="primary"
+            size="small"
+            startIcon={loading ? <CircularProgress size={16} color="inherit" /> : null}
+            onClick={handleFill}
+            disabled={loading || selectedCount === 0}
+            sx={{ flex: 1 }}
+          >
+            {loading ? '填充中...' : `确认填充 (${selectedCount})`}
+          </Button>
+          <Button
+            variant="outlined"
+            color="error"
+            size="small"
+            startIcon={<DeleteOutlineIcon />}
+            onClick={handleClear}
+            disabled={loading}
+          >
+            清空
+          </Button>
+        </Box>
+      </Box>
+
+      {fields.length > 0 && (
+        <Box sx={{ flex: 1, overflow: 'auto', px: 2, pb: 2 }}>
+          <Box
+            sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}
+          >
+            <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+              字段列表 ({fields.length})
+            </Typography>
+            <Button size="small" onClick={handleSelectAll}>
+              {fields.every((f) => f.isSelected) ? '取消全选' : '全选'}
+            </Button>
+          </Box>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            {fields.map((field) => (
+              <Paper
+                key={field.id}
+                elevation={0}
+                sx={{
+                  p: 1.5,
+                  borderRadius: 2,
+                  bgcolor: hoveredFieldId === field.id ? '#e3f2fd' : 'white',
+                  border: '1px solid',
+                  borderColor: hoveredFieldId === field.id ? '#2196f3' : '#e0e0e0',
+                  transition: 'all 0.2s ease',
+                  cursor: 'pointer',
+                }}
+                onMouseEnter={() => handleHoverField(field.id)}
+                onMouseLeave={() => handleHoverField(null)}
+              >
+                <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
+                  <Checkbox
+                    size="small"
+                    checked={field.isSelected}
+                    onChange={() => handleToggleSelect(field.id)}
+                    sx={{ p: 0, mt: 0.5 }}
+                  />
+                  <Box sx={{ flex: 1, minWidth: 0 }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          fontWeight: 600,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          maxWidth: '60%',
+                        }}
+                      >
+                        {field.label || field.placeholder || field.name || '未命名字段'}
+                      </Typography>
+                      <Tooltip title="字段类型">
+                        <Box
+                          sx={{
+                            px: 0.5,
+                            py: 0.25,
+                            bgcolor: '#e0e0e0',
+                            borderRadius: 1,
+                            fontSize: '0.7rem',
+                          }}
+                        >
+                          {getFieldTypeLabel(field.fieldType)}
+                        </Box>
+                      </Tooltip>
+                      <Tooltip title="高亮显示">
+                        <IconButton
+                          size="small"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleHoverField(field.id);
+                            setTimeout(() => handleHoverField(null), 2000);
+                          }}
+                          sx={{ p: 0.5 }}
+                        >
+                          <HighlightAltIcon sx={{ fontSize: 16 }} />
+                        </IconButton>
+                      </Tooltip>
+                    </Box>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                      <TextField
+                        size="small"
+                        fullWidth
+                        value={field.generatedValue}
+                        onChange={(e) => handleEditValue(field.id, e.target.value)}
+                        placeholder="生成的数据..."
+                        sx={{
+                          '& .MuiInputBase-input': {
+                            fontSize: '0.8rem',
+                            fontFamily: 'monospace',
+                          },
+                        }}
+                      />
+                      <Tooltip title="刷新此项">
+                        <IconButton
+                          size="small"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleRefreshField(field.id);
+                          }}
+                          sx={{ p: 0.5 }}
+                        >
+                          <RefreshIcon sx={{ fontSize: 18 }} />
+                        </IconButton>
+                      </Tooltip>
+                    </Box>
+                    {field.value && (
+                      <Typography
+                        variant="caption"
+                        color="text.secondary"
+                        sx={{ mt: 0.5, display: 'block' }}
+                      >
+                        当前值: {field.value}
+                      </Typography>
+                    )}
+                  </Box>
+                </Box>
+              </Paper>
+            ))}
+          </Box>
+        </Box>
+      )}
+
+      {fields.length === 0 && !scanning && (
+        <Box
+          sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', p: 3 }}
+        >
+          <Alert severity="info" sx={{ width: '100%' }}>
+            点击「扫描表单」按钮开始扫描当前页面的表单字段
+          </Alert>
+        </Box>
+      )}
+
+      <GlobalSnackbar {...snackbarProps} />
+    </Box>
+  );
+};
+
+export default FormFillSidePanel;

package-lock.json

@@ -8,9 +8,11 @@
       "name": "testing-tools",
       "version": "1.0.0",
       "hasInstallScript": true,
+      "license": "MIT",
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
+        "@faker-js/faker": "^10.4.0",
         "@mui/icons-material": "^7.3.8",
         "@mui/material": "^7.3.8",
         "@webext-core/messaging": "^2.3.0",
@@ -1447,6 +1449,22 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@faker-js/faker": {
+      "version": "10.4.0",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/@faker-js/faker/-/faker-10.4.0.tgz",
+      "integrity": "sha512-sDBWI3yLy8EcDzgobvJTWq1MJYzAkQdpjXuPukga9wXonhpMRvd1Izuo2Qgwey2OiEoRIBr35RMU9HJRoOHzpw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fakerjs"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || ^23.5.0 || >=24.0.0",
+        "npm": ">=10"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmmirror.com/@humanfs/core/-/core-0.19.1.tgz",
@@ -2065,9 +2083,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2082,9 +2097,6 @@
         "arm"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2099,9 +2111,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2116,9 +2125,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2133,9 +2139,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2150,9 +2153,6 @@
         "loong64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2167,9 +2167,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2184,9 +2181,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2201,9 +2195,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2218,9 +2209,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2235,9 +2223,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2252,9 +2237,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2269,9 +2251,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@faker-js/faker": "^10.4.0",
     "@mui/icons-material": "^7.3.8",
     "@mui/material": "^7.3.8",
     "@webext-core/messaging": "^2.3.0",

providers/RouterProvider.tsx

@@ -29,7 +29,7 @@ export function RouterProvider({
   children,
   defaultRoute = 'dashboard',
   syncRoute = true,
-  syncKey = 'app/currentRoute'
+  syncKey = 'app/currentRoute',
 }: RouterProviderProps) {
   const [currentPage, setCurrentPage] = useState<PageType>(defaultRoute);
   const [visiblePages, setVisiblePages] = useState<PageType[]>(getDefaultVisibleRoutes());
@@ -124,7 +124,7 @@ export function RouterProvider({
         syncNavigation,
         goBack,
         setVisiblePages,
-        setPageOrder
+        setPageOrder,
       }}
     >
       {children}

types/storage.d.ts

@@ -4,6 +4,7 @@ export type PageType =
   | 'storageCleaner'
   | 'openUrl'
   | 'qrCode'
+  | 'formRecognizer'
   | 'openUrlViewer';
 
 export interface StorageSchema {

utils/dummyDataGenerator.ts

@@ -0,0 +1,984 @@
+import { faker, fakerZH_CN } from '@faker-js/faker';
+
+/**
+ * 表单字段信息接口
+ */
+export interface FormFieldInfo {
+  id: string;
+  element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+  fieldType: FieldType;
+  label: string | null;
+  placeholder: string;
+  name: string;
+  value: string;
+  isSelected: boolean;
+  generatedValue: string;
+}
+
+/**
+ * 扫描结果接口
+ */
+export interface ScanResult {
+  fields: FormFieldInfo[];
+  totalCount: number;
+  validCount: number;
+  modalContainer: HTMLElement | null;
+}
+
+/**
+ * 数据生成器工具类
+ * 用于生成各种类型的测试数据
+ */
+export class DummyDataGenerator {
+  /**
+   * 生成随机中文姓名
+   */
+  static generateChineseName(): string {
+    return fakerZH_CN.person.fullName();
+  }
+
+  /**
+   * 生成随机英文姓名
+   */
+  static generateEnglishName(): string {
+    return faker.person.fullName();
+  }
+
+  /**
+   * 生成随机手机号
+   */
+  static generatePhoneNumber(): string {
+    return fakerZH_CN.phone.number();
+  }
+
+  /**
+   * 生成有效邮箱
+   */
+  static generateValidEmail(): string {
+    return faker.internet.email();
+  }
+
+  /**
+   * 生成无效邮箱
+   */
+  static generateInvalidEmail(): string {
+    const invalidEmails = [
+      'testexample.com', // 缺失 @
+      'test@@example.com', // 多个 @
+      'test@', // 缺失域名
+      'test@.com', // 域名为空
+      'test@example', // 缺失顶级域名
+    ];
+
+    return invalidEmails[Math.floor(Math.random() * invalidEmails.length)];
+  }
+
+  /**
+   * 生成短文本
+   */
+  static generateShortText(): string {
+    return faker.lorem.sentence({ min: 3, max: 6 });
+  }
+
+  /**
+   * 生成长文本
+   */
+  static generateLongText(): string {
+    return faker.lorem.paragraphs(5);
+  }
+
+  /**
+   * 生成边界测试文本
+   */
+  static generateBoundaryText(): string {
+    const specialChars = '!@#$%^&*()_+[]{}|;:,.<>?';
+    const emoji = '😀😃😄😁😆😅😂🤣';
+    let text = '';
+
+    for (let i = 0; i < 100; i++) {
+      text += specialChars + emoji + '测试文本';
+    }
+
+    return text;
+  }
+
+  /**
+   * 生成随机数字
+   */
+  static generateNumber(): number {
+    return faker.number.int(10000);
+  }
+
+  /**
+   * 生成随机浮点数
+   */
+  static generateFloat(): number {
+    return faker.number.float({ max: 10000 });
+  }
+
+  /**
+   * 生成随机负数
+   */
+  static generateNegativeNumber(): number {
+    return -faker.number.int(10000);
+  }
+
+  /**
+   * 生成随机日期
+   */
+  static generateDate(): string {
+    return faker.date.recent({ days: 365 }).toISOString().split('T')[0];
+  }
+
+  /**
+   * 生成过去的日期
+   */
+  static generatePastDate(): string {
+    return faker.date.past({ years: 1 }).toISOString().split('T')[0];
+  }
+
+  /**
+   * 生成未来的日期
+   */
+  static generateFutureDate(): string {
+    return faker.date.future({ years: 1 }).toISOString().split('T')[0];
+  }
+
+  /**
+   * 生成随机身份证号
+   */
+  static generateIdCard(): string {
+    const areaCodes = [
+      '110101',
+      '110102',
+      '110103',
+      '110104',
+      '110105',
+      '310101',
+      '310102',
+      '310103',
+      '310104',
+      '310105',
+      '440101',
+      '440102',
+      '440103',
+      '440104',
+      '440105',
+    ];
+    const areaCode = areaCodes[Math.floor(Math.random() * areaCodes.length)];
+    const year = (1950 + Math.floor(Math.random() * 50)).toString();
+    const month = String(1 + Math.floor(Math.random() * 12)).padStart(2, '0');
+    const day = String(1 + Math.floor(Math.random() * 28)).padStart(2, '0');
+    const random = Math.floor(Math.random() * 10000)
+      .toString()
+      .padStart(4, '0');
+
+    return areaCode + year + month + day + random;
+  }
+}
+
+/**
+ * 表单字段类型
+ */
+export enum FieldType {
+  TEXT = 'text',
+  EMAIL = 'email',
+  PHONE = 'phone',
+  NUMBER = 'number',
+  DATE = 'date',
+  TEXTarea = 'textarea',
+  RADIO = 'radio',
+  CHECKBOX = 'checkbox',
+  SELECT = 'select',
+  PASSWORD = 'password',
+  NAME = 'name',
+  ID_CARD = 'id_card',
+  UNKNOWN = 'unknown',
+}
+
+/**
+ * 填充模式
+ */
+export enum FillMode {
+  VALID = 'valid',
+  INVALID = 'invalid',
+}
+
+/**
+ * 识别表单字段类型
+ */
+export function recognizeFieldType(
+  element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
+): FieldType {
+  // 基于 type 属性识别
+  if (element instanceof HTMLInputElement) {
+    switch (element.type) {
+      case 'email':
+        return FieldType.EMAIL;
+      case 'tel':
+        return FieldType.PHONE;
+      case 'number':
+        return FieldType.NUMBER;
+      case 'date':
+        return FieldType.DATE;
+      case 'password':
+        return FieldType.PASSWORD;
+      case 'radio':
+        return FieldType.RADIO;
+      case 'checkbox':
+        return FieldType.CHECKBOX;
+      case 'text':
+        break;
+    }
+  }
+
+  // 基于 name 或 id 识别
+  const name = (element.name || element.id || '').toLowerCase();
+  if (name.includes('email') || name.includes('mail')) {
+    return FieldType.EMAIL;
+  }
+  if (name.includes('phone') || name.includes('tel') || name.includes('mobile')) {
+    return FieldType.PHONE;
+  }
+  if (name.includes('name') || name.includes('user') || name.includes('username')) {
+    return FieldType.NAME;
+  }
+  if (name.includes('id') || name.includes('card') || name.includes('identity')) {
+    return FieldType.ID_CARD;
+  }
+  if (name.includes('password') || name.includes('pass')) {
+    return FieldType.PASSWORD;
+  }
+  if (name.includes('number') || name.includes('num')) {
+    return FieldType.NUMBER;
+  }
+  if (name.includes('date') || name.includes('time')) {
+    return FieldType.DATE;
+  }
+
+  // 基于 placeholder 识别
+  if ('placeholder' in element) {
+    const placeholder = (element.placeholder || '').toLowerCase();
+    if (placeholder.includes('email') || placeholder.includes('mail')) {
+      return FieldType.EMAIL;
+    }
+    if (
+      placeholder.includes('phone') ||
+      placeholder.includes('tel') ||
+      placeholder.includes('mobile')
+    ) {
+      return FieldType.PHONE;
+    }
+    if (
+      placeholder.includes('name') ||
+      placeholder.includes('user') ||
+      placeholder.includes('username')
+    ) {
+      return FieldType.NAME;
+    }
+    if (
+      placeholder.includes('id') ||
+      placeholder.includes('card') ||
+      placeholder.includes('identity')
+    ) {
+      return FieldType.ID_CARD;
+    }
+    if (placeholder.includes('password') || placeholder.includes('pass')) {
+      return FieldType.PASSWORD;
+    }
+    if (placeholder.includes('number') || placeholder.includes('num')) {
+      return FieldType.NUMBER;
+    }
+    if (placeholder.includes('date') || placeholder.includes('time')) {
+      return FieldType.DATE;
+    }
+  }
+
+  // 基于标签识别
+  const label = getFieldLabel(element);
+  if (label) {
+    const labelText = label.toLowerCase();
+    if (labelText.includes('邮箱') || labelText.includes('email') || labelText.includes('mail')) {
+      return FieldType.EMAIL;
+    }
+    if (
+      labelText.includes('手机') ||
+      labelText.includes('电话') ||
+      labelText.includes('tel') ||
+      labelText.includes('mobile')
+    ) {
+      return FieldType.PHONE;
+    }
+    if (
+      labelText.includes('姓名') ||
+      labelText.includes('名字') ||
+      labelText.includes('name') ||
+      labelText.includes('user') ||
+      labelText.includes('username')
+    ) {
+      return FieldType.NAME;
+    }
+    if (
+      labelText.includes('身份证') ||
+      labelText.includes('id') ||
+      labelText.includes('card') ||
+      labelText.includes('identity')
+    ) {
+      return FieldType.ID_CARD;
+    }
+    if (labelText.includes('密码') || labelText.includes('pass')) {
+      return FieldType.PASSWORD;
+    }
+    if (labelText.includes('数字') || labelText.includes('number') || labelText.includes('num')) {
+      return FieldType.NUMBER;
+    }
+    if (
+      labelText.includes('日期') ||
+      labelText.includes('时间') ||
+      labelText.includes('date') ||
+      labelText.includes('time')
+    ) {
+      return FieldType.DATE;
+    }
+  }
+
+  // 基于元素类型识别
+  if (element instanceof HTMLTextAreaElement) {
+    return FieldType.TEXTarea;
+  }
+  if (element instanceof HTMLSelectElement) {
+    return FieldType.SELECT;
+  }
+
+  return FieldType.TEXT;
+}
+
+/**
+ * 获取字段的标签
+ */
+function getFieldLabel(element: HTMLElement): string | null {
+  // 查找相邻的 label 元素
+  const labels = document.querySelectorAll('label');
+  for (const label of labels) {
+    const forAttr = label.getAttribute('for');
+    if (forAttr === element.id) {
+      return label.textContent || null;
+    }
+  }
+
+  // 查找父元素中的 label
+  let parent = element.parentElement;
+  while (parent) {
+    if (parent.tagName === 'LABEL') {
+      return parent.textContent || null;
+    }
+    parent = parent.parentElement;
+  }
+
+  return null;
+}
+
+/**
+ * 填充表单字段
+ */
+export function fillField(
+  element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
+  mode: FillMode,
+): void {
+  const fieldType = recognizeFieldType(element);
+  let value: string | number | boolean = '';
+
+  switch (fieldType) {
+    case FieldType.NAME:
+      value =
+        Math.random() > 0.5
+          ? DummyDataGenerator.generateChineseName()
+          : DummyDataGenerator.generateEnglishName();
+      break;
+    case FieldType.EMAIL:
+      value =
+        mode === FillMode.VALID
+          ? DummyDataGenerator.generateValidEmail()
+          : DummyDataGenerator.generateInvalidEmail();
+      break;
+    case FieldType.PHONE:
+      value = DummyDataGenerator.generatePhoneNumber();
+      break;
+    case FieldType.NUMBER:
+      value =
+        mode === FillMode.VALID
+          ? DummyDataGenerator.generateNumber()
+          : DummyDataGenerator.generateNegativeNumber();
+      break;
+    case FieldType.DATE:
+      value = DummyDataGenerator.generateDate();
+      break;
+    case FieldType.TEXTarea:
+      value =
+        mode === FillMode.VALID
+          ? DummyDataGenerator.generateLongText()
+          : DummyDataGenerator.generateBoundaryText();
+      break;
+    case FieldType.PASSWORD:
+      value = 'password123';
+      break;
+    case FieldType.ID_CARD:
+      value = DummyDataGenerator.generateIdCard();
+      break;
+    case FieldType.TEXT:
+    default:
+      value =
+        mode === FillMode.VALID
+          ? DummyDataGenerator.generateShortText()
+          : DummyDataGenerator.generateBoundaryText();
+      break;
+  }
+
+  // 填充值
+  if (element instanceof HTMLInputElement) {
+    if (element.type === 'checkbox' || element.type === 'radio') {
+      element.checked = Math.random() > 0.5;
+    } else {
+      element.value = String(value);
+    }
+  } else if (element instanceof HTMLTextAreaElement) {
+    element.value = String(value);
+  } else if (element instanceof HTMLSelectElement) {
+    // 随机选择一个非禁用的选项
+    const options = Array.from(element.options).filter((option) => !option.disabled);
+    if (options.length > 0) {
+      const randomIndex = Math.floor(Math.random() * options.length);
+      element.selectedIndex = randomIndex;
+    }
+  }
+
+  // 触发事件，确保前端框架能够监听到变化
+  triggerEvents(element);
+}
+
+/**
+ * 触发事件
+ */
+function triggerEvents(element: HTMLElement): void {
+  // 触发 input 事件
+  const inputEvent = new Event('input', {
+    bubbles: true,
+    cancelable: true,
+  });
+  element.dispatchEvent(inputEvent);
+
+  // 触发 change 事件
+  const changeEvent = new Event('change', {
+    bubbles: true,
+    cancelable: true,
+  });
+  element.dispatchEvent(changeEvent);
+
+  // 触发 blur 事件
+  const blurEvent = new Event('blur', {
+    bubbles: true,
+    cancelable: true,
+  });
+  element.dispatchEvent(blurEvent);
+}
+
+/**
+ * 判断元素是否真正可见且允许输入
+ */
+function isElementVisible(element: HTMLElement): boolean {
+  // 1. 排除隐藏域、禁用和只读状态
+  if (element instanceof HTMLInputElement) {
+    if (element.type === 'hidden' || element.disabled || element.readOnly) {
+      return false;
+    }
+  } else if (element instanceof HTMLTextAreaElement) {
+    if (element.disabled || element.readOnly) {
+      return false;
+    }
+  } else if (element instanceof HTMLSelectElement) {
+    if (element.disabled) {
+      return false;
+    }
+  }
+
+  // 2. 检查空间尺寸 (能有效过滤大部分 display: none 或未渲染完毕的组件)
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    return false;
+  }
+
+  // 3. 检查计算样式 (兜底检查 css 隐藏手段)
+  const style = window.getComputedStyle(element);
+  if (
+    style.display === 'none' ||
+    style.visibility === 'hidden' ||
+    style.opacity === '0' ||
+    style.visibility === 'collapse'
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Z轴穿透验证 (Raycasting)
+ * 通过 document.elementFromPoint(x, y) 向元素中心点发射坐标射线
+ * 如果获取到的顶层元素不是输入框本身或其子元素，则判定为"视觉遮挡"
+ */
+function isElementNotObscured(element: HTMLElement): boolean {
+  const rect = element.getBoundingClientRect();
+
+  // 计算元素中心点坐标
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+
+  // 向元素中心点发射坐标射线，获取最顶层的元素
+  const topElement = document.elementFromPoint(centerX, centerY);
+
+  if (!topElement) {
+    return false;
+  }
+
+  // 检查获取到的顶层元素是否是输入框本身或其子元素
+  return element.contains(topElement);
+}
+
+/**
+ * 判断元素是否在视口范围内
+ */
+function isElementInViewport(element: HTMLElement): boolean {
+  const rect = element.getBoundingClientRect();
+
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
+/**
+ * 判断元素是否真正可见且允许输入（漏斗式检测）
+ */
+function isElementValidForFill(element: HTMLElement): boolean {
+  // 1. 基础过滤：排除隐藏域、禁用和只读状态
+  if (element instanceof HTMLInputElement) {
+    if (element.type === 'hidden' || element.disabled || element.readOnly) {
+      return false;
+    }
+  } else if (element instanceof HTMLTextAreaElement) {
+    if (element.disabled || element.readOnly) {
+      return false;
+    }
+  } else if (element instanceof HTMLSelectElement) {
+    if (element.disabled) {
+      return false;
+    }
+  } else {
+    return false;
+  }
+
+  // 2. 空间尺寸检测：排除宽高为0的元素
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    return false;
+  }
+
+  // 3. CSS样式检测：排除通过CSS隐藏的元素
+  const style = window.getComputedStyle(element);
+  if (
+    style.display === 'none' ||
+    style.visibility === 'hidden' ||
+    style.opacity === '0' ||
+    style.visibility === 'collapse'
+  ) {
+    return false;
+  }
+
+  // 4. 视口检测：只处理当前屏幕滚动范围内的元素
+  if (!isElementInViewport(element)) {
+    return false;
+  }
+
+  // 5. Z轴穿透验证（最后一步，最耗时，放最后）
+  if (!isElementNotObscured(element)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * 查找最上层的弹窗容器
+ */
+function findActiveModalContainer(): HTMLElement | null {
+  const modalSelectors = [
+    '.ant-modal-content',
+    '.el-dialog',
+    '[role="dialog"]',
+    '.MuiDialog-content',
+    '.modal-content',
+    '.dialog-content',
+    '.popup-content',
+  ];
+
+  let topModal: HTMLElement | null = null;
+  let highestZIndex = 0;
+
+  modalSelectors.forEach((selector) => {
+    const modals = document.querySelectorAll(selector);
+    modals.forEach((modal) => {
+      if (modal instanceof HTMLElement) {
+        const style = window.getComputedStyle(modal);
+        const zIndex = parseInt(style.zIndex, 10) || 0;
+        if (zIndex > highestZIndex && isElementVisible(modal)) {
+          highestZIndex = zIndex;
+          topModal = modal;
+        }
+      }
+    });
+  });
+
+  return topModal;
+}
+
+/**
+ * 扫描页面中所有可见的表单字段
+ */
+export function scanFormFields(): ScanResult {
+  const inputs = document.querySelectorAll('input, textarea, select');
+  const fields: FormFieldInfo[] = [];
+  const modalContainer = findActiveModalContainer();
+
+  inputs.forEach((input) => {
+    if (
+      input instanceof HTMLInputElement ||
+      input instanceof HTMLTextAreaElement ||
+      input instanceof HTMLSelectElement
+    ) {
+      if (isElementValidForFill(input)) {
+        const fieldType = recognizeFieldType(input);
+        const label = getFieldLabel(input);
+        const placeholder = 'placeholder' in input ? input.placeholder : '';
+        const name = input.name || input.id || '';
+
+        fields.push({
+          id: `field-${Math.random().toString(36).substr(2, 9)}`,
+          element: input,
+          fieldType,
+          label,
+          placeholder,
+          name,
+          value: input.value,
+          isSelected: true,
+          generatedValue: generateValueByFieldType(fieldType, FillMode.VALID),
+        });
+      }
+    }
+  });
+
+  return {
+    fields,
+    totalCount: fields.length,
+    validCount: fields.filter((f) => f.isSelected).length,
+    modalContainer,
+  };
+}
+
+/**
+ * 根据字段类型生成对应的值
+ */
+export function generateValueByFieldType(fieldType: FieldType, mode: FillMode): string {
+  switch (fieldType) {
+    case FieldType.NAME:
+      return Math.random() > 0.5
+        ? DummyDataGenerator.generateChineseName()
+        : DummyDataGenerator.generateEnglishName();
+    case FieldType.EMAIL:
+      return mode === FillMode.VALID
+        ? DummyDataGenerator.generateValidEmail()
+        : DummyDataGenerator.generateInvalidEmail();
+    case FieldType.PHONE:
+      return DummyDataGenerator.generatePhoneNumber();
+    case FieldType.NUMBER:
+      return String(
+        mode === FillMode.VALID
+          ? DummyDataGenerator.generateNumber()
+          : DummyDataGenerator.generateNegativeNumber(),
+      );
+    case FieldType.DATE:
+      return DummyDataGenerator.generateDate();
+    case FieldType.TEXTarea:
+      return mode === FillMode.VALID
+        ? DummyDataGenerator.generateLongText()
+        : DummyDataGenerator.generateBoundaryText();
+    case FieldType.PASSWORD:
+      return 'password123';
+    case FieldType.ID_CARD:
+      return DummyDataGenerator.generateIdCard();
+    case FieldType.TEXT:
+    default:
+      return mode === FillMode.VALID
+        ? DummyDataGenerator.generateShortText()
+        : DummyDataGenerator.generateBoundaryText();
+  }
+}
+
+/**
+ * 框架级数据注入器
+ * 破解 React/Vue 的 input setter 劫持
+ */
+function setInputValue(
+  element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
+  value: string,
+): void {
+  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+    element instanceof HTMLInputElement
+      ? window.HTMLInputElement.prototype
+      : element instanceof HTMLTextAreaElement
+        ? window.HTMLTextAreaElement.prototype
+        : window.HTMLSelectElement.prototype,
+    'value',
+  )?.set;
+
+  if (nativeInputValueSetter) {
+    nativeInputValueSetter.call(element, value);
+  } else {
+    element.value = value;
+  }
+}
+
+/**
+ * 填充指定字段（使用框架级注入）
+ */
+export function fillFieldWithInjector(
+  element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
+  value: string,
+): void {
+  if (element instanceof HTMLInputElement) {
+    if (element.type === 'checkbox' || element.type === 'radio') {
+      element.checked = value === 'true' || value === '1';
+    } else {
+      setInputValue(element, value);
+    }
+  } else if (element instanceof HTMLTextAreaElement) {
+    setInputValue(element, value);
+  } else if (element instanceof HTMLSelectElement) {
+    // 查找匹配的选项
+    const options = Array.from(element.options);
+    const matchingOption = options.find((opt) => opt.value === value || opt.text === value);
+    if (matchingOption) {
+      element.value = matchingOption.value;
+    } else if (options.length > 0) {
+      element.selectedIndex = 0;
+    }
+  }
+
+  triggerEvents(element);
+}
+
+/**
+ * 批量填充选中的字段
+ */
+export function fillSelectedFields(fields: FormFieldInfo[], mode: FillMode): number {
+  let filledCount = 0;
+
+  fields.forEach((field) => {
+    if (field.isSelected) {
+      const value = field.generatedValue || generateValueByFieldType(field.fieldType, mode);
+      fillFieldWithInjector(field.element, value);
+      filledCount++;
+    }
+  });
+
+  return filledCount;
+}
+
+/**
+ * 高亮指定字段
+ */
+export function highlightField(element: HTMLElement): void {
+  const originalStyle =
+    element.getAttribute('data-original-style') || element.getAttribute('style') || '';
+  element.setAttribute('data-original-style', originalStyle);
+
+  element.style.outline = '3px solid #2196f3';
+  element.style.outlineOffset = '2px';
+  element.style.transition = 'outline 0.2s ease-in-out';
+}
+
+/**
+ * 取消高亮指定字段
+ */
+export function unhighlightField(element: HTMLElement): void {
+  const originalStyle = element.getAttribute('data-original-style') || '';
+  if (originalStyle) {
+    element.setAttribute('style', originalStyle);
+    element.removeAttribute('data-original-style');
+  } else {
+    element.style.outline = '';
+    element.style.outlineOffset = '';
+  }
+}
+
+/**
+ * 高亮所有指定字段
+ */
+export function highlightAllFields(fieldIds: string[], fields: FormFieldInfo[]): void {
+  fieldIds.forEach((id) => {
+    const field = fields.find((f) => f.id === id);
+    if (field) {
+      highlightField(field.element);
+    }
+  });
+}
+
+/**
+ * 取消高亮所有字段
+ */
+export function unhighlightAllFields(fields: FormFieldInfo[]): void {
+  fields.forEach((field) => {
+    unhighlightField(field.element);
+  });
+}
+
+/**
+ * 填充所有表单字段
+ */
+export function fillAllFields(mode: FillMode, includeHidden: boolean = false): void {
+  const inputs = document.querySelectorAll('input, textarea, select');
+
+  inputs.forEach((element) => {
+    if (
+      element instanceof HTMLInputElement ||
+      element instanceof HTMLTextAreaElement ||
+      element instanceof HTMLSelectElement
+    ) {
+      if (!isElementValidForFill(element)) {
+        return;
+      }
+
+      if (!includeHidden) {
+        if (element instanceof HTMLInputElement && element.type === 'hidden') {
+          return;
+        }
+      }
+
+      const fieldType = recognizeFieldType(element);
+      const value = generateValueByFieldType(fieldType, mode);
+      fillFieldWithInjector(element, value);
+    }
+  });
+}
+
+/**
+ * 填充指定容器内的表单字段
+ */
+export function fillFieldsInContainer(
+  mode: FillMode,
+  container: HTMLElement,
+  includeHidden: boolean = false,
+): void {
+  const inputs = container.querySelectorAll('input, textarea, select');
+
+  inputs.forEach((element) => {
+    if (
+      element instanceof HTMLInputElement ||
+      element instanceof HTMLTextAreaElement ||
+      element instanceof HTMLSelectElement
+    ) {
+      if (!isElementValidForFill(element)) {
+        return;
+      }
+
+      if (!includeHidden) {
+        if (element instanceof HTMLInputElement && element.type === 'hidden') {
+          return;
+        }
+      }
+
+      const fieldType = recognizeFieldType(element);
+      const value = generateValueByFieldType(fieldType, mode);
+      fillFieldWithInjector(element, value);
+    }
+  });
+}
+
+/**
+ * 填充弹窗内的表单字段
+ */
+export function fillFieldsInActiveModal(mode: FillMode, includeHidden: boolean = false): boolean {
+  const modal = findActiveModalContainer();
+  if (modal) {
+    fillFieldsInContainer(mode, modal, includeHidden);
+    return true;
+  }
+  return false;
+}
+
+/**
+ * 清空所有表单字段
+ */
+export function clearAllFields(): void {
+  const inputs = document.querySelectorAll('input, textarea, select');
+
+  inputs.forEach((element) => {
+    if (
+      element instanceof HTMLInputElement ||
+      element instanceof HTMLTextAreaElement ||
+      element instanceof HTMLSelectElement
+    ) {
+      if (!isElementValidForFill(element)) {
+        return;
+      }
+
+      if (element instanceof HTMLInputElement) {
+        if (element.type === 'checkbox' || element.type === 'radio') {
+          element.checked = false;
+        } else {
+          setInputValue(element, '');
+        }
+      } else if (element instanceof HTMLTextAreaElement) {
+        setInputValue(element, '');
+      } else if (element instanceof HTMLSelectElement) {
+        element.selectedIndex = 0;
+      }
+
+      triggerEvents(element);
+    }
+  });
+}
+
+/**
+ * 清空指定容器内的表单字段
+ */
+export function clearFieldsInContainer(container: HTMLElement): void {
+  const inputs = container.querySelectorAll('input, textarea, select');
+
+  inputs.forEach((element) => {
+    if (
+      element instanceof HTMLInputElement ||
+      element instanceof HTMLTextAreaElement ||
+      element instanceof HTMLSelectElement
+    ) {
+      if (!isElementValidForFill(element)) {
+        return;
+      }
+
+      if (element instanceof HTMLInputElement) {
+        if (element.type === 'checkbox' || element.type === 'radio') {
+          element.checked = false;
+        } else {
+          setInputValue(element, '');
+        }
+      } else if (element instanceof HTMLTextAreaElement) {
+        setInputValue(element, '');
+      } else if (element instanceof HTMLSelectElement) {
+        element.selectedIndex = 0;
+      }
+
+      triggerEvents(element);
+    }
+  });
+}

utils/messages.ts

@@ -0,0 +1,94 @@
+import { FormFieldInfo, FillMode } from './dummyDataGenerator';
+
+/**
+ * 消息动作类型
+ */
+export enum MessageAction {
+  // 表单相关操作
+  SCAN_FORM_FIELDS = 'scanFormFields',
+  FILL_VALID_DATA = 'fillValidData',
+  FILL_INVALID_DATA = 'fillInvalidData',
+  FILL_SELECTED_FIELDS = 'fillSelectedFields',
+  CLEAR_ALL_FIELDS = 'clearAllFields',
+
+  // 字段高亮操作
+  HIGHLIGHT_FIELD = 'highlightField',
+  UNHIGHLIGHT_FIELD = 'unhighlightField',
+  HIGHLIGHT_ALL_FIELDS = 'highlightAllFields',
+  UNHIGHLIGHT_ALL_FIELDS = 'unhighlightAllFields',
+}
+
+/**
+ * 消息载荷接口
+ */
+export interface MessagePayload {
+  action: MessageAction;
+  fields?: Omit<FormFieldInfo, 'element'>[];
+  mode?: FillMode;
+  includeHidden?: boolean;
+  fieldId?: string;
+  fieldIds?: string[];
+}
+
+/**
+ * 消息响应接口
+ */
+export interface MessageResponse {
+  success: boolean;
+  message?: string;
+  fields?: Omit<FormFieldInfo, 'element'>[];
+  totalCount?: number;
+  validCount?: number;
+  hasModal?: boolean;
+}
+
+/**
+ * 发送消息到内容脚本
+ */
+export async function sendMessageToContent(
+  action: MessageAction,
+  payload?: Omit<MessagePayload, 'action'>,
+): Promise<MessageResponse> {
+  try {
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    if (!tab?.id) {
+      return { success: false, message: '无法获取当前标签页' };
+    }
+
+    return new Promise((resolve) => {
+      chrome.tabs.sendMessage(tab.id!, { action, ...payload }, (response) => {
+        if (chrome.runtime.lastError) {
+          console.error('消息发送失败:', chrome.runtime.lastError);
+          resolve({ success: false, message: '无法连接到页面，请确保页面已加载' });
+        } else {
+          resolve((response as MessageResponse) || { success: false, message: '未收到响应' });
+        }
+      });
+    });
+  } catch (error) {
+    console.error('获取标签页失败:', error);
+    return { success: false, message: '无法获取当前标签页' };
+  }
+}
+
+/**
+ * 注入内容脚本
+ */
+export async function injectContentScript(): Promise<boolean> {
+  try {
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
+    if (!tab?.id) {
+      return false;
+    }
+
+    // 尝试注入内容脚本
+    await chrome.scripting.executeScript({
+      target: { tabId: tab.id },
+      files: ['/content-scripts/content.js'],
+    });
+    return true;
+  } catch (error) {
+    console.error('注入内容脚本失败:', error);
+    return false;
+  }
+}

utils/messages.tsx

@@ -1,8 +0,0 @@
-import { defineExtensionMessaging } from '@webext-core/messaging';
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-interface ProtocolMap {
-  // Placeholder - 扩展消息协议
-}
-
-export const { sendMessage, onMessage } = defineExtensionMessaging<ProtocolMap>();