ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Midscene Chrome扩展安装教程:自然语言控制浏览器,4步跑通第一个AI自动化任务

Midscene Chrome扩展安装教程:自然语言控制浏览器,4步跑通第一个AI自动化任务 Midscene Chrome扩展安装教程自然语言控制浏览器4步跑通第一个AI自动化任务【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene Chrome扩展是一款面向新手的AI浏览器自动化工具安装扩展后用中文输入指令浏览器就会替你点击、输入、提取数据并检查页面状态无需编写脚本4个步骤就能完成第一次体验。一句话认识它不用写脚本的浏览器操作员Midscene 是一个开源的 AI GUI 自动化框架Chrome 扩展是它面向网页端的 Playground实验场。官方文档的定位是无需搭建项目直接在网页中体验交互、数据提取和界面检查。它解决什么你想自动点击/输入、从页面里提取数据、验证页面状态但不想手写 JavaScript 定位元素。它不解决什么它不替代完整的测试框架跨页面的批量任务需要配合 YAML 脚本或 Agent API 使用。前提需要准备一个具备 UI 定位能力的多模态模型千问、豆包、Gemini 等均可。从安装到跑通Midscene Chrome扩展最快启用4步准备模型配置按官方示例设置模型地址、API Key、模型名等配置项具体支持的模型见模型配置文档。安装扩展打开 Chrome 应用商店搜索 Midscene点击添加到 Chrome。此时你应该看到扩展图标出现在浏览器右上角。打开侧边栏在 Chrome 的扩展列表中打开Midscene。此时浏览器右侧会出现 Midscene 侧边栏这是后续所有操作的入口。粘贴配置并执行第一条指令点击侧边栏的设置图标将模型配置完整粘贴进去并保存。打开任意网页在侧边栏输入点击登录按钮并执行。此时你应该看到浏览器自动完成这次点击任务报告里能看到截图和过程。在 Midscene Chrome扩展侧边栏输入指令即可在当前网页上执行AI自动化操作三个最实用的用法操作、取数、校验场景一替你完成重复的页面操作。用规划并交互能力对应aiAct输入如在搜索框输入无线耳机点击搜索按钮扩展会自动理解页面、找到元素并完成点击输入。你省掉的是写选择器、等待元素出现、处理动态加载这一整套代码。场景二把页面内容变成表格能用的数据。用提取结构化数据能力对应aiQuery输入页面中的商品{name: string, price: number}[]它会返回结构化的名称和价格数组直接可用于比价或监控不用手动复制粘贴。场景三一眼确认页面状态对不对。用检查界面能力对应aiAssert输入页面顶部显示导航栏执行后当场告诉你通过还是失败。回归检查一个页面时这比人工逐项核对快得多。扩展即 Web 端 Playground可在独立实验场中调试自然语言指令进阶特性深入桥接模式让你复用已登录的浏览器这是 Chrome 扩展最有差异化的能力叫Bridge Mode桥接模式。普通扩展只控制当前页面而桥接模式让你用本地终端的脚本去控制桌面版 Chrome可以连接新标签页也可以附着到你当前正在看的标签页。它的关键价值在于脚本能复用你本地浏览器的 cookies、插件和登录状态。也就是说需要登录态才能操作的网站不用重新走一遍注册登录脚本接手的时刻就是人登录完、机器接着干的时刻这在自动化领域被称为 man-in-the-loop人在环中。使用时先在终端安装midscene/web然后写一个很短的脚本const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); await agent.ai(type AI 101 and hit Enter);运行后Chrome 扩展会弹出确认窗口点击 Allow 允许本次连接或点 Always Allow 以后自动放行。确认后你会看到 Chrome 打开新标签页并开始执行脚本指令。扩展图标上的状态徽标也会提示你黄点表示正在监听绿点表示已连接。如果你习惯用 YAML 写流程也可以直接在脚本的web配置里加上bridgeMode: newTabWithUrl或currentTab就能让 YAML 任务走桥接模式执行细节见桥接模式文档。在 Bridge Mode 面板中配置服务器地址实现跨机器的 Midscene Chrome扩展远程控制实战走查一个网页的取数加校验全流程背景你在监控一个电商商品页需要定期拿到商品名称和价格同时确认页面结构没有改版。步骤打开商品列表页点击浏览器扩展图标打开 Midscene 侧边栏。在指令框输入取数指令页面中的商品{name: string, price: number}[]执行。输入校验指令页面顶部显示导航栏执行并查看断言结果。确认指令效果稳定后把这两条指令按对应 API 固化到脚本里后续批量跑。结果你会得到一份结构化的商品名称与价格数据和一条通过的断言记录整个任务不需要你写过一行定位代码。常见问题速答症状执行时提示Cannot access a chrome-extension:// URL of different extension。→ 解决办法这通常是其他扩展与 Midscene 冲突向页面注入了 iframe 或脚本。打开开发者工具找到以chrome-extension://开头的元素并复制扩展 ID再到chrome://extensions/按 ID 禁用该扩展刷新页面重试。症状用 Ollama 本地模型时出现 403 错误。→ 解决办法设置环境变量OLLAMA_ORIGINS*允许 Chrome 扩展访问本地 Ollama 模型。症状桥接模式脚本需要上传本地文件却失败。→ 解决办法打开chrome://extensions找到 Midscene 进入 Details开启 Allow access to file URLs再切回目标页面重新连接。症状桥接模式下模型配置不生效。→ 解决办法桥接模式的模型参数要配在**终端Node.js 环境**里而不是浏览器侧配错位置脚本读不到 Key。快速上手收尾Midscene Chrome扩展的核心价值一句话用自然语言指挥浏览器操作、取数和校验把写脚本的时间省下来。完整步骤可查阅快速开始文档扩展源码在 apps/chrome-extension/ 目录。建议你现在就打开一个熟悉的页面输入点击登录按钮跑一遍——3 分钟内你就能确认整套流程跑通了。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表