Files
testing-tool/entrypoints/content.ts
T
LingandRX 0379f96e80 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

118 lines
4.5 KiB
TypeScript

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_end',
main() {
// 监听来自 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: '执行操作失败' });
}
},
);
},
});