企业官网建设流程全解析

Midscene Chrome 扩展：三步把浏览器重复操作交给 AI

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

Midscene Chrome 扩展是一个把 GUI Agent 装进浏览器侧边栏的自动化工具，你用一句自然语言描述想做的事，它就看着屏幕替你点击、输入和核对结果。如果你每天要重复做同一类网页操作——搜索商品、复制价格、填表单、核对页面上是否出现某个提示——这个扩展就是为这类活设计的。

🧭 它到底是什么（概念速览）

可以把 Midscene 扩展理解成"住在你浏览器侧边栏里的操作员"：它不读代码，只读屏幕。

⏱️ 十分钟上手路径

整个过程按"准备 → 安装 → 跑通 → 看结果"四步走，十分钟内可以完成第一次浏览器自动化。

准备：准备一个有 UI 定位能力的多模态模型（如 Gemini、Qwen 系列、UI-TARS 等），拿到模型服务地址和 API Key。Midscene 通过截图驱动，不用把整棵 DOM 发给模型。

安装：从 Chrome 应用商店安装 Midscene 扩展；如果访问受限，也可以克隆仓库后本地构建：

git clone https://gitcode.com/GitHub_Trending/mid/midscene

然后在扩展目录执行pnpm install和构建，到chrome://extensions/以"加载已解压的扩展程序"方式安装产物。

跑通第一个任务：打开扩展侧边栏，点设置图标把模型配置粘贴进去保存。打开任意网页，在侧边栏输入一条符合当前页面的指令，例如"点击登录按钮"，点 Run。

看到结果：执行完成后，右侧会展示每一步的截图、定位到的元素和结果。Midscene 还会生成可视化 HTML 报告，记录动作、断言结果和 AI 的决策过程，方便你回看它到底做了什么。

🧩 能力拆解

四类能力覆盖了"操作、取数、核对、接管"四条主线，先判断你的需求属于哪类，再选对应入口。

用自然语言操作页面（aiAct）

它帮你在不写选择器的情况下完成多步操作，包括点图标按钮、操作<canvas>和跨域 iframe 里的元素。什么时候用得上：页面结构经常变、元素没有稳定 selector，或者你要跑的是"搜索 → 筛选 → 确认"这类多步骤流程时。

从网页提取结构化数据（aiQuery）

它帮你按 schema 把页面上的内容取成 JSON，比如商品列表的name和price。什么时候用得上：采集报表数据、批量核对字段、把网页内容变成可入库的结构化数据时。

用眼睛核对结果（aiAssert）

它帮你以视觉方式验证界面状态，判断颜色、高亮、布局、错误提示是否符合预期。什么时候用得上：E2E 测试里做断言，或流程末尾确认"错误信息出现在邮箱输入框下方"这类视觉结果时。

Bridge 模式：让本地脚本接管你的 Chrome

它帮你把本地终端里的脚本接到桌面 Chrome 上，复用浏览器已有的 cookies、插件和登录状态。什么时候用得上：任务需要已登录账号，或你想"脚本干一半、人工补一刀"（man-in-the-loop）时。

📋 三个可直接抄的实战配方

以下配方都可以先用扩展侧边栏验证指令，再落到 YAML 脚本里跑。

配方一：每天监控 5 个商品的价格

• 目标：定时抓取 5 个商品页的价格和名称。
• 触发方式：写一份 YAML 脚本（aiQuery提取{name, price}[]），用系统定时任务在每天固定时间执行midscene ./prices.yaml。
• 预期产出：一份 JSON 结果和 HTML 报告，可追加进你的表格或数据库。

配方二：登录流程回归自检

• 目标：验证"登录后右上角出现用户名"这条关键路径。
• 触发方式：YAML 脚本里ai步骤完成登录，aiAssert: 右上角显示用户头像，代码改动后手动或接入 CI 运行。
• 预期产出：通过/失败结论，外加带截图和 AI 决策过程的可视化报告。

配方三：半自动处理已登录站点

• 目标：在你已登录的账号里执行一段重复操作，脚本和人工可以交替接管。
• 触发方式：本地脚本通过AgentOverChromeBridge附着到当前标签页，在扩展弹窗中点 Allow。
• 预期产出：操作直接发生在你自己的 Chrome 里，报告照常生成；中途需要人工介入时随时可以暂停脚本。

⚠️ 边界与避坑

先说清楚它不适合什么，再省得你踩坑。

• 不适合对时延极敏感的任务：aiAct每一步都要截图、规划、再执行，比即时 API 更慢也更耗 token；简单单步操作请直接用aiTap、aiInput这类即时接口。
• 别把敏感页面发给公开模型：Midscene 会把页面截图（部分场景还包含 DOM）发给 AI 模型，含涉密信息的页面请优先用自托管模型，细节见文档的数据隐私章节。
• Bridge 模式会忽略部分浏览器配置：userAgent、视口尺寸、cookie 注入等选项在桥接模式下不生效，因为它复用的是你真实浏览器的环境。

高频问题：

• Q：运行时报Cannot access a chrome-extension:// URL of different extension？ A：通常是其他扩展向页面注入了 iframe 或脚本与 Midscene 冲突，按文档排查并禁用冲突扩展即可。
• Q：用本地 Ollama 模型时出现 403？ A：设置环境变量OLLAMA_ORIGINS="*"允许扩展访问本地模型。
• Q：同一脚本换到 Azure OpenAI 后点击位置偏移？ A：这是 Azure 端对大图缩放导致的坐标还原偏差，可换官方 GPT-5 接口，或用screenshotShrinkFactor预先缩小截图。

🔭 继续深入

• 快速开始：零代码体验（3 字内用途：上手入口）
• 桥接模式详解：本地脚本接管 Chrome
• YAML 自动化脚本：把指令固化成脚本
• 扩展源码：侧边栏与 Bridge 实现

从最小的任务开始试——先拿一个你本周就要重复做的页面操作开刀，验证一句指令能跑通，再慢慢把流程搬进脚本。

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene