企业官网建设流程全解析

Midscene.js Chrome 扩展完整指南：用自然语言指挥浏览器，告别繁琐的 UI 测试脚本

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

Midscene.js 的 Chrome 扩展把浏览器操作变成了一句话的事：输入中文指令，它就替你点击、输入、提取数据并核对界面状态。它面向测试工程师和开发者，解决「UI 自动化脚本难写、难维护」的老问题。

从一个具体任务说起

你想核对商品列表的价格，传统做法是写选择器、处理加载等待、再解析字段——下次页面一改版，脚本可能全挂。装上 Midscene 扩展后，流程变成这样：

1. 打开任意网页，从浏览器右侧呼出 Midscene 侧边栏；
2. 输入「页面中的商品，{name: string, price: number}[]」；
3. 点 Run，拿到一份结构化 JSON。

不用碰 DOM，不用记选择器，页面长什么样，它看截图就知道。

功能速览：三件事它替你干

最快安装步骤与首次运行

1. 准备一个具备 UI 定位能力的多模态模型（Qwen-VL、GLM-4.6V、UI-TARS 等都可以），记下它的支持配置；
2. 从 Chrome 应用商店安装 Midscene 扩展，在扩展列表点开它，右侧会出现侧边栏；
3. 点侧边栏的设置图标，把模型配置整段粘贴进去并保存；
4. 打开任意网页，输入第一条指令运行。

怎么确认装好了？指令跑完后，侧边栏会给出执行过程和结果；每次任务还会生成完整报告，可以逐步回溯它的操作轨迹。

实操对比：从「逐行点选」到「一句话断言」

传统做法：验证「加购后购物车角标变成 1」，要写选择器、等待请求、再判断 DOM 文本，页面样式一改就得重写。

现在的做法：一句aiAssert('购物车角标显示 1，且小计金额已更新')，模型看着截图直接给结论——它校验的是像素层面的渲染结果，而不是节点存不存在。

更进一步，Bridge 模式让脚本和你的日常浏览器共用一个会话：扩展开启 Bridge Mode 监听，本地跑一个脚本，弹窗点「Allow」，脚本就能接管当前标签页。你已登录的网站、装着的插件，它全部继承，自动化跑到一半还能切回手动接管。

import { AgentOverChromeBridge } from "@midscene/web/bridge-mode"; const agent = new AgentOverChromeBridge(); await agent.connectCurrentTab(); await agent.aiAct(`输入'Midscene.js'，点击搜索按钮`);

它适合谁用？

• QA 与测试工程师：回归核心业务流程不再依赖脆弱的选择器；
• 开发者：先验证界面行为，再决定是否沉淀成测试脚本；
• 非技术同事：查个数据、点个流程，不用提需求排队。

也要坦率说局限：它靠多模态模型看截图工作，每一步都有 token 成本，执行速度也慢于传统脚本。适合验证关键业务路径，不适合毫秒级高频断言。

避坑指南：三个高频问题

1. 运行失败，提示Cannot access a chrome-extension:// URL of different extension——多半是别的扩展往页面里注入了 iframe 或脚本，在开发者工具里找到对应的chrome-extension://地址，按 ID 去chrome://extensions/禁用它，刷新重试；
2. 本地 Ollama 模型返回 403——设置环境变量OLLAMA_ORIGINS="*"，允许扩展跨域访问本地模型；
3. 模型 Key 配错了地方——侧边栏手动执行时配置在扩展设置里；走 Bridge 模式跑脚本时，配置要写在脚本所在的终端环境变量里，两边别混。

从一条指令开始

先用侧边栏跑通第一条指令，再考虑把验证过的指令搬进脚本，是阻力最小的路线。

• 安装与模型配置文档：快速开始
• 扩展源码：apps/chrome-extension/

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