Midscene Chrome 扩展新手指南：用自然语言指令驱动浏览器完成操作、取数与验证

Midscene Chrome 扩展新手指南：用自然语言指令驱动浏览器完成操作、取数与验证

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

在任意打开的网页上，浏览器右侧的侧边栏里写着这样一条指令：输入 "Midscene.js"，然后点击搜索按钮。按下 Run 之后，Midscene Chrome 扩展接管了页面——它自己读懂页面结构，找到搜索框，输入文字、按下回车、等待结果，全程没有写一行 JavaScript。这个开源扩展的定位就是：把自然语言指令直接翻译成对网页的输入、点击、滚动、等待，以及状态验证。

一句话说清 Midscene Chrome 扩展能帮你做什么

• 说人话就能操作网页：不需要 XPath、不需要选择器，直接描述"要做什么"。
• 本地终端驱动远程浏览器：你的脚本跑在终端里，浏览器留在桌面，登录态和 Cookie 原样保留。
• 自带隔离实验场：在全屏 Playground 里反复调试指令，不影响你手边的真实标签页。

从本地构建安装，跑通第一次操作

先克隆仓库（https://gitcode.com/GitHub_Trending/mid/midscene），进入apps/chrome-extension目录执行本地构建，产物会输出到apps/chrome-extension/dist。接着在 Chrome 地址栏输入chrome://extensions，打开右上角的"开发者模式"，选择"加载已解压的扩展程序"，指向上面的dist目录即可。

安装后点击扩展图标，浏览器右侧会出现 Midscene 侧边栏。准备工作只做一件：在设置里填入一个具备 UI 定位能力的多模态模型配置。之后在侧边栏选中指令类型、输入中文或英文的自然语言、点 Run，执行过程和结果会直接显示在面板里。如果执行时报Cannot access a chrome-extension:// URL of different extension，通常是其他扩展向页面注入了冲突的脚本，到chrome://extensions里逐个排查禁用即可。

看懂三种指令：Action 执行、Query 取数、Assert 验证

指令	对应方法	用途	示例
Action	aiAct	交互动作：点击、输入、滚动、等待	点击登录按钮
Query	aiQuery	提取结构化数据	页面中的商品，{name: string, price: number}[]
Assert	aiAssert	断言页面状态	页面顶部显示导航栏

三者共用同一个输入框，切换标签即可。在扩展里验证过的指令，之后都能原样搬进代码：对应的 Agent API 就是agent.aiAct()、agent.aiQuery()、agent.aiAssert()，调试与落地是同一套语言。

选对模式：Bridge 本地控浏览器，Playground 全屏练手

Bridge：本地 SDK 连接你正在用的 Chrome

Bridge 模式让运行在本地终端的@midscene/webSDK 直接连接桌面上的 Chrome——可以附着到当前标签页，也可以打开一个新标签页。脚本执行到一半时，你可以随时手动接管页面，再继续跑脚本；浏览器原有的 Cookie、登录态、插件状态全部复用，省去重复认证；开启远程访问后（脚本和浏览器不在同一台机器），只需在扩展的 Bridge Mode 面板里把服务地址改成对方的ws://地址。远程访问会把服务暴露到网络中，建议在可信网络内并配合防火墙使用。

连接示例：

import { AgentOverChromeBridge } from "@midscene/web/bridge-mode"; const agent = new AgentOverChromeBridge(); // 附着到当前激活的标签页（也可用 connectNewTabWithUrl 新建标签页） await agent.connectCurrentTab(); await agent.aiAction(`输入 "Midscene.js"，点击搜索按钮`);

脚本运行后，扩展会弹出确认窗口，点 "Allow" 授权本次连接，或选 "Always Allow" 之后自动放行。扩展图标上的状态徽标一目了然：黄点表示正在监听，绿点表示已连接。

Playground：把指令丢进全屏隔离环境

侧边栏里随时可以看到 "send to fullscreen playground" 入口，点一下，当前页面上下文会被带进一个全屏实验场。这里执行指令互不干扰，左侧实时展示页面上下文和执行步骤，出错时有明确提示，也可以并行管理多条流程。适合在把指令写进正式脚本之前，先把复杂交互逻辑在这里跑通。

接入自己的模型：OpenAI、GLM 都可以

扩展设置里支持配置多家模型服务，OpenAI、GLM、豆包等任选其一，唯一硬性要求是模型具备 UI 定位能力（多模态）。注意一个细节：Bridge 模式下，模型的环境变量要配在终端的 Node.js 侧，而不是浏览器侧——因为真正发起推理请求的是本地脚本。

两个立刻能用的落地场景

• 电商搜索：打开电商首页，Action 里写点击搜索框，输入 "蓝牙耳机"，点击搜索按钮，Run 之后页面自动完成整个搜索流程。
• 网页数据提取：切到 Query，写页面中的商品，{name: string, price: number}[]，结果以 JSON 结构返回，可以直接喂给后续的数据处理。

下一步：沿仓库内的文档继续深入

仓库apps/site/docs/zh/目录下有完整中文文档，建议按顺序看：quick-start.mdx（扩展安装与首次体验）、bridge-mode.mdx（桥接模式细节与远程访问）、model-common-config.mdx（模型配置示例）、automate-with-scripts-in-yaml.mdx（用 YAML 脚本组织多步流程），API 细节在reference/中。先在 Playground 里挑一个你常访问的网站，把上面两种场景各跑一遍，然后选一个想落地的流程用 YAML 脚本固化下来——这就是从"试试"到"用起来"的完整路径。

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