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 验证指令对应方法用途示例ActionaiAct交互动作点击、输入、滚动、等待点击登录按钮QueryaiQuery提取结构化数据页面中的商品{name: string, price: number}[]AssertaiAssert断言页面状态页面顶部显示导航栏三者共用同一个输入框切换标签即可。在扩展里验证过的指令之后都能原样搬进代码对应的 Agent API 就是agent.aiAct()、agent.aiQuery()、agent.aiAssert()调试与落地是同一套语言。选对模式Bridge 本地控浏览器Playground 全屏练手Bridge本地 SDK 连接你正在用的 ChromeBridge 模式让运行在本地终端的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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考