企业官网建设流程全解析

如何用 Midscene Chrome 扩展实现零代码浏览器自动化：新手完整指南

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

假设你需要每天确认搜索结果页的某个入口是否还在，或者把页面上的商品名称和价格抓下来核对一遍。手动做当然可以，但重复劳动很快就会变成负担。Midscene 是一个 AI 驱动的 GUI 自动化项目，它的 Chrome 扩展让你用一句自然语言就能驱动浏览器完成点击、输入、校验和数据提取，全程不需要编写自动化代码。

这篇文章跟着一个真实的小任务走：打开搜索页、搜索一个商品、确认结果出现、把价格取回来。完成这件事之后，我们再顺路看两个进阶用法——从终端控制你日常在用的浏览器，以及把流程沉淀成可重复运行的脚本。

第一次使用：扩展面板与三种指令

安装分两种路径：直接在 Chrome 商店搜索 Midscene 安装；或者从源码构建后手动加载。如果你走第二条路：

git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene/apps/chrome-extension && pnpm install && pnpm run build

构建完成后，打开chrome://extensions/，开启右上角的开发者模式，点击"加载已解压的扩展程序"，选择构建产物目录即可。接下来在扩展的设置页粘贴你的模型配置——Midscene 依赖一个具备 UI 定位能力的多模态模型，API 密钥、模型名称等参数都填在这里。

面板里对应三种指令，分别回答三个不同的问题：

• Action（对应 aiAct）：回答"帮我做一件事"。输入"在搜索框输入 Midscene 并回车"，它会自己观察页面、规划步骤、找到输入框并执行。多步操作、带分支逻辑的任务都交给它。
• Query（对应 aiQuery）：回答"页面上有什么数据"。输入类似"页面中的商品，{name: string, price: number}[]"，它会返回结构化的 JSON，而不是让你去翻页面源码。
• Assert（对应 aiAssert）：回答"某个条件成立吗"。输入"页面顶部显示了搜索结果列表"，条件不成立时会直接报错，方便你在流程里做检查点。

这里值得解释一下 Midscene 定位元素的思路：它不像传统自动化那样靠 CSS 选择器去"点名"某个节点，而是对页面截图，让模型像人看屏幕一样回答"搜索框在哪里"。好处是页面前端重构、类名换了都影响不大；代价是纯视觉定位，当页面出现大量外观相似的元素时需要更精确的描述，或者开启深度定位选项。

🔌 从终端控制浏览器：Bridge 模式怎么用

扩展面板适合手工试用，但如果你想让脚本和浏览器配合干活，Bridge 模式更有用。白话来说：扩展相当于在浏览器里装了一个遥控接收器，你终端里的 Node.js 脚本就是遥控器。脚本发起连接时，扩展会弹一个确认框，你点一次 Allow，脚本就能接管一个新标签页，或者附着到你当前激活的标签页上。

它最大的价值是复用了你真实浏览器的登录态和 Cookie。很多自动化场景卡在"需要登录"这一步，而 Bridge 模式直接操作你本人日常使用的那个 Chrome，登录问题天然不存在。

使用步骤可以概括为四步：在终端项目里安装@midscene/web依赖；写好脚本，创建AgentOverChromeBridge实例并调用connectNewTabWithUrl打开目标网址；然后调用与普通 Agent 完全相同的aiAct、aiAssert等方法；任务结束后调用destroy释放。有一个细节要注意：Bridge 模式下模型配置写在终端侧的环境变量里，而不是浏览器扩展的设置页。另外扩展图标上的状态点也值得留意：黄点表示正在监听连接请求，绿点表示已有脚本连接。

更省事的做法是不写代码：YAML 脚本里给 web 配置加上bridgeMode: currentTab或newTabWithUrl，整份流程就能走 Bridge 通道，详见桥接模式文档。

📋 把流程写进 YAML：从一次性操作到可复用脚本

前两部分都在浏览器里手工触发指令。要把"搜索商品、等待、校验结果"这类流程变成每天能跑的东西，Midscene 的方案是一个.yaml文件：page.url指定目标网址，tasks下面按顺序列出步骤，每一步可以是ai（执行自然语言动作）、sleep（等待若干毫秒）或aiAssert（断言检查）。写好之后通过命令行运行器执行midscene 你的脚本.yaml即可，无需维护一整套测试框架。

仓库里有一批现成脚本可以直接抄作业，从单个任务到多任务串行都有：packages/cli/tests/midscene_scripts/。如果你要跑的是更复杂的回归场景，文档里还有并行的 Test Runner 方案，适合后期升级。

📊 跑完之后：执行报告帮你定位问题

自动化的麻烦往往不在"跑通"，而在"跑挂了不知道挂在哪"。Midscene 每次运行都会产出一份 HTML 报告：顶部是时间轴，每个步骤对应一张截图；左侧列出每一步的 Planning（规划）、Insight / Locate（理解和定位）、Action（执行）子步骤及各自耗时；哪一步断言失败会直接标出来。排查时对着时间轴往前找两三步，通常就能看清是页面没加载完、元素没找到，还是断言条件写错了。

下一步：从文档和示例继续

给你三条实在的建议：

• 从最简单的 Assert 指令开始，先确认当前页面"看"得对不对，再叠加 Action 和 Query；
• 指令写得像口头交代任务，带上位置和外观特征（"右上角的购物车图标"比"购物车"更稳）；
• 遇到Cannot access a chrome-extension:// URL of different extension报错，基本是其他扩展向页面注入了脚本，按快速开始文档里的 FAQ 用开发者工具找出冲突的扩展禁用掉。

想继续深入的话，快速开始文档覆盖了模型配置到各平台 Playground 的完整路径，核心源码 packages/core/src/ 则是理解 Agent 规划与定位机制的入口。先把"搜索—校验—取数"这条链路在自己电脑上跑通，后面的 Bridge 模式和 YAML 脚本都是顺着这条线自然长出来的。

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