Develop fill form (#10)

* feat(formRecognizer): 添加表单识别功能及相关组件添加表单识别功能，包括以下内容： 1. 在路由配置中添加表单识别页面 2. 实现表单识别页面和侧边栏面板 3. 添加表单数据生成工具类 4. 实现与内容脚本的通信机制 5. 添加faker-js依赖用于生成测试数据 6. 支持不同入口点(popup/sidepanel)的组件渲染 * refactor(消息通信): 重构消息通信机制并集中管理消息协议将分散的消息协议和通信逻辑集中到 utils/messages.ts 中移除旧的 messages.tsx 文件并更新相关引用添加消息动作枚举和类型定义，提高类型安全性优化内容脚本注入失败时的处理逻辑
2026-04-20 22:50:01 +08:00
parent be5e2f02ee
commit 0379f96e80
14 changed files with 1987 additions and 99 deletions
@@ -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: '执行操作失败' });
+        }
+      },
+    );
  },
 });