多模态 Web Agent 助手

这是一个基于 Chrome Extension Manifest V3 的网页自动操作 Agent。插件通过网页 DOM 信息、当前页面截图和多模态大模型能力，完成网页理解、任务规划、点击输入、表单填写和知识库更新等操作。

当前项目重点面向“根据个人简历自动填写网页表单”的场景：用户可以在设置页维护 API Key、简历文本和个人信息知识库，随后在插件弹窗中输入任务指令，Agent 会读取当前网页表单、匹配知识库字段并自动填写，最后停在提交前等待用户检查。

功能概览

• Chrome 插件形态运行，支持在任意网页中注入 Content Script。
• 支持读取当前网页的可交互元素、表单字段和页面文本。
• 支持通过视觉模型结合页面截图进行决策。
• 支持自动执行点击、输入、回车、滚动等网页操作。
• 支持简历文本或简历截图导入，并提取为个人信息知识库。
• 支持针对当前表单补充知识库字段。
• 自动填表完成后会弹出检查提示，避免直接提交。
• 支持运行日志展示，便于观察 Agent 执行过程。

目录结构

WebAgent/
├── code/                         # Chrome 插件核心代码
│   ├── manifest.json             # 插件声明、权限与入口配置
│   ├── background.js             # 后台 Service Worker，负责模型调用、任务循环和状态调度
│   ├── content.js                # 注入网页的脚本，负责 DOM 感知与实际页面操作
│   ├── popup.html                # 插件弹窗页面
│   ├── popup.js                  # 弹窗交互逻辑与日志展示
│   ├── options.html              # 全局设置页
│   └── options.js                # API Key、简历和知识库存储逻辑
├── decument/                     # 过程文档、架构设计和方案记录
├── report/                       # 汇报材料
├── test/                         # 测试记录与生成报告
├── future.md                     # 后续工程化拆分规划
├── code.crx                      # 已打包的插件文件
├── code.pem                      # 打包插件使用的私钥文件
└── README.md                     # 项目说明文档

快速开始

1. 加载插件

1. 打开 Chrome 浏览器。
2. 进入扩展程序页面：chrome://extensions/。
3. 打开右上角的“开发者模式”。
4. 点击“加载已解压的扩展程序”。
5. 选择本项目中的 code/ 目录。
6. 确认插件“多模态 Web Agent 助手”已启用。

2. 配置 API 和知识库

1. 在扩展程序详情页点击“扩展程序选项”，或在插件弹窗中点击“配置 API、知识库和简历”。
2. 填写智谱 API Key。
3. 导入或粘贴简历内容：
   • 文本简历：上传 .txt、.md、.json 文件，或直接粘贴正文。
   • 图片简历：上传简历截图或图片，由视觉模型提取信息。
4. 点击“从文本提取到知识库”或“从截图提取到知识库”。
5. 检查并修改提取出的字段。
6. 点击“保存设置”。

3. 执行网页任务

1. 打开需要操作的网页，例如招聘投递页或在线表单页。
2. 点击浏览器右上角的插件图标。
3. 输入任务指令，例如：

根据我的简历帮我填写当前公司的投递表单

4. 点击“开始执行”。
5. 等待 Agent 自动识别表单并填写字段。
6. 填写完成后，页面会提示用户检查；确认无误后再手动提交。

常用指令示例

帮我填写当前求职表单

根据我的简历填写这个申请页面，提交前停下来让我检查

帮我更新当前表单需要的知识库字段

核心流程

用户输入任务
    ↓
background.js 判断任务类型
    ↓
content.js 扫描当前页面 DOM / 表单字段
    ↓
background.js 读取知识库和页面截图
    ↓
调用多模态模型生成字段匹配或下一步动作
    ↓
content.js 执行输入、点击、滚动等操作
    ↓
完成后提示用户检查

关键文件说明

• code/manifest.json：定义插件名称、版本、权限、后台脚本、设置页和 Content Script。
• code/background.js：负责接收弹窗消息、读取存储配置、调用模型、组织自动填表逻辑和通用 Agent 循环。
• code/content.js：负责扫描网页可交互元素、提取表单字段、执行真实点击和输入，并显示检查弹窗。
• code/popup.html / code/popup.js：提供任务输入入口、知识库更新按钮和实时日志面板。
• code/options.html / code/options.js：提供 API Key、简历导入、知识库编辑和保存功能。

注意事项

• 插件需要访问网页内容和截图，因此 manifest.json 中声明了 activeTab、scripting、storage、tabs、downloads、debugger 和 <all_urls> 等权限。
• 自动填表不会直接提交表单，执行完成后会停留在提交前，用户需要自行检查并确认。
• API Key 保存在浏览器本地的 chrome.storage.local 中，请勿在公共电脑或不可信环境中使用。
• 不同网站的表单结构差异较大，复杂页面可能需要手动补充知识库字段或多次调整指令。
• future.md 中记录了后续将 background.js、content.js 等大文件继续模块化拆分的工程化规划。

后续优化方向

• 拆分 background.js 中的模型调用、Prompt 构造和任务状态机逻辑。
• 拆分 content.js 中的 DOM 扫描、动作执行和页面 UI 注入逻辑。
• 引入 TypeScript，增强模型返回 JSON 的类型校验。
• 引入 Vite 或 Rollup，改善插件代码的模块化开发体验。
• 为自动填表、知识库更新和通用网页操作补充测试用例。