3步装好 Midscene Chrome 扩展自然语言操控浏览器Bridge模式直连本地终端【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene Chrome 扩展是 Midscene.js 的浏览器端形态一个用自然语言驱动网页点击、数据提取与界面断言的 GUI Agent 插件还能通过 Bridge 模式让你的本地终端直接接管桌面 Chrome复用已有登录态与 Cookie。快速上手从安装到发第一条指令扩展有两种装法按你的身份二选一直接用官网上架版稳定、自动更新要改扩展代码的开发者走加载已解压扩展。从 Chrome 网上应用店安装推荐在 Chrome 网上应用店安装 Midscene 扩展此方式可接收自动更新。点击工具栏图标打开扩展右侧会弹出 Midscene 侧边栏——这就是你的 Playground。点击侧边栏设置图标粘贴你的多模态模型配置API Key、模型名保存。完成后在任意网页的侧边栏里输入一句自然语言指令即可执行比如Click the login button点击登录按钮、Products on the page, {name: string, price: number}[]提取商品结构化数据。加载已解压扩展的3步操作开发调试克隆仓库git clone https://gitcode.com/GitHub_Trending/mid/midscene仓库根目录执行pnpm install安装依赖。执行cd apps/chrome-extension pnpm run build生成dist/目录与extension/下的midscene-extension-v{version}.zip。然后在chrome://extensions/页面右上角打开开发者模式点加载已解压的扩展程序选择apps/chrome-extension/dist目录即可。这一步容易卡住zip 由构建流程中的 pack-extension.js 脚本自动生成只跑rsbuild build不会有 zip。扩展代码集中在apps/chrome-extension/下src/extension/是页面组件static/放manifest.json与静态资源改完pnpm run dev可用 web-ext 热调试。实战场景三种典型用法场景一当你需要快速验证页面操作时需求不改代码先在真实页面上验证一句自然语言指令是否可靠。打开目标网页展开 Midscene 侧边栏。输入指令如提取页面上所有商品返回 {name: string, price: number}[]。执行后查看高亮的元素与返回的结构化数据。效果理解页面截图、规划动作并返回结果验证通过的指令可直接用midscene/web的agent.aiAct/aiQuery/aiAssert写进自动化脚本。场景二当你需要复用桌面浏览器的登录态时需求自动化脚本要操作一个已登录的后台不想再走一遍登录流程。这就是 Bridge 模式的典型场景业内叫 man-in-the-loop脚本在本地终端跑扩展在桌面 Chrome 里搭桥。在终端安装依赖npm install midscene/web tsx --save-dev。写好脚本并运行tsx demo-new-tab.ts扩展会弹确认框点允许或总是允许。桌面 Chrome 会新开一个标签页完全由脚本操控。import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); // 新开标签页 await agent.ai(type AI 101 and hit Enter); // 自然语言指令 await agent.aiAssert(there are some search results); // 断言结果 await agent.destroy();注意两点模型配置如MIDSCENE_MODEL_API_KEY要配在 Node 侧而不是浏览器侧扩展图标上的状态点会指示连接状态——黄点是监听中绿点是已连接。Bridge 面板的 Bridge 模式 UI 源码 就在仓库里逻辑不复杂。场景三当你需要跨机器控制浏览器时需求脚本跑在服务器 A 上浏览器在同事的电脑 B 上。const agent new AgentOverChromeBridge({ allowRemoteAccess: true, // 监听 0.0.0.0:3766 });再在电脑 B 的扩展 Bridge Mode 面板里把 Bridge Server URL 从默认的ws://localhost:3766改成ws://192.168.1.100:3766替换为服务器 IP运行脚本后点允许。⚠️ 远程模式会把 Bridge 服务暴露到网络只在可信内网使用。调试与排坑先自查再深查排查分两步先在浏览器侧自查扩展状态查不出问题再去构建产物和源码侧深查。三个调试入口先备好背景页chrome://extensions/找到 Midscene点查看背景页在控制台看连接日志。弹出面板在侧边栏上右键选检查调试 UI 与交互。内容脚本打开任意网页的开发者工具在 Sources 面板的 Content scripts 下找 Midscene 脚本。常见现象大多落在下面这张表里现象可能原因解决方法报Cannot access a chrome-extension:// URL of different extension其他扩展向页面注入了iframe/script与 Midscene 冲突开发者工具里找到以chrome-extension://开头的资源复制扩展 ID在chrome://extensions/按 ID 禁用该扩展刷新页面重试调用 Ollama 模型返回 403Ollama 默认不允许扩展跨源访问设置环境变量OLLAMA_ORIGINS*后重启 OllamaBridge 模式上传本地文件失败扩展缺少文件 URL 访问权限chrome://extensions/→ Midscene → 详情 → 打开允许访问文件网址切回 http(s) 页面后重连构建时报告模板生成失败midscene/visualizer未先行构建先构建 visualizer 包确认packages/visualizer/dist/report/index.html存在深查方向还有一条Bridge 模式下userAgent、viewportWidth、cookie等浏览器选项会被忽略、跟随桌面 Chrome 自身设置如果你发现这些配置不生效这不是 bug是设计如此。结尾Midscene Chrome 扩展把看懂页面 执行指令 断言结果压缩进一个侧边栏Bridge 模式则让你的脚本与真实浏览器无缝衔接。更多细节见 快速上手文档 与 Bridge 模式文档。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 3步装好 Midscene Chrome 扩展：自然语言操控浏览器，Bridge模式直连本地终端
3步装好 Midscene Chrome 扩展自然语言操控浏览器Bridge模式直连本地终端【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene Chrome 扩展是 Midscene.js 的浏览器端形态一个用自然语言驱动网页点击、数据提取与界面断言的 GUI Agent 插件还能通过 Bridge 模式让你的本地终端直接接管桌面 Chrome复用已有登录态与 Cookie。快速上手从安装到发第一条指令扩展有两种装法按你的身份二选一直接用官网上架版稳定、自动更新要改扩展代码的开发者走加载已解压扩展。从 Chrome 网上应用店安装推荐在 Chrome 网上应用店安装 Midscene 扩展此方式可接收自动更新。点击工具栏图标打开扩展右侧会弹出 Midscene 侧边栏——这就是你的 Playground。点击侧边栏设置图标粘贴你的多模态模型配置API Key、模型名保存。完成后在任意网页的侧边栏里输入一句自然语言指令即可执行比如Click the login button点击登录按钮、Products on the page, {name: string, price: number}[]提取商品结构化数据。加载已解压扩展的3步操作开发调试克隆仓库git clone https://gitcode.com/GitHub_Trending/mid/midscene仓库根目录执行pnpm install安装依赖。执行cd apps/chrome-extension pnpm run build生成dist/目录与extension/下的midscene-extension-v{version}.zip。然后在chrome://extensions/页面右上角打开开发者模式点加载已解压的扩展程序选择apps/chrome-extension/dist目录即可。这一步容易卡住zip 由构建流程中的 pack-extension.js 脚本自动生成只跑rsbuild build不会有 zip。扩展代码集中在apps/chrome-extension/下src/extension/是页面组件static/放manifest.json与静态资源改完pnpm run dev可用 web-ext 热调试。实战场景三种典型用法场景一当你需要快速验证页面操作时需求不改代码先在真实页面上验证一句自然语言指令是否可靠。打开目标网页展开 Midscene 侧边栏。输入指令如提取页面上所有商品返回 {name: string, price: number}[]。执行后查看高亮的元素与返回的结构化数据。效果理解页面截图、规划动作并返回结果验证通过的指令可直接用midscene/web的agent.aiAct/aiQuery/aiAssert写进自动化脚本。场景二当你需要复用桌面浏览器的登录态时需求自动化脚本要操作一个已登录的后台不想再走一遍登录流程。这就是 Bridge 模式的典型场景业内叫 man-in-the-loop脚本在本地终端跑扩展在桌面 Chrome 里搭桥。在终端安装依赖npm install midscene/web tsx --save-dev。写好脚本并运行tsx demo-new-tab.ts扩展会弹确认框点允许或总是允许。桌面 Chrome 会新开一个标签页完全由脚本操控。import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectNewTabWithUrl(https://www.bing.com); // 新开标签页 await agent.ai(type AI 101 and hit Enter); // 自然语言指令 await agent.aiAssert(there are some search results); // 断言结果 await agent.destroy();注意两点模型配置如MIDSCENE_MODEL_API_KEY要配在 Node 侧而不是浏览器侧扩展图标上的状态点会指示连接状态——黄点是监听中绿点是已连接。Bridge 面板的 Bridge 模式 UI 源码 就在仓库里逻辑不复杂。场景三当你需要跨机器控制浏览器时需求脚本跑在服务器 A 上浏览器在同事的电脑 B 上。const agent new AgentOverChromeBridge({ allowRemoteAccess: true, // 监听 0.0.0.0:3766 });再在电脑 B 的扩展 Bridge Mode 面板里把 Bridge Server URL 从默认的ws://localhost:3766改成ws://192.168.1.100:3766替换为服务器 IP运行脚本后点允许。⚠️ 远程模式会把 Bridge 服务暴露到网络只在可信内网使用。调试与排坑先自查再深查排查分两步先在浏览器侧自查扩展状态查不出问题再去构建产物和源码侧深查。三个调试入口先备好背景页chrome://extensions/找到 Midscene点查看背景页在控制台看连接日志。弹出面板在侧边栏上右键选检查调试 UI 与交互。内容脚本打开任意网页的开发者工具在 Sources 面板的 Content scripts 下找 Midscene 脚本。常见现象大多落在下面这张表里现象可能原因解决方法报Cannot access a chrome-extension:// URL of different extension其他扩展向页面注入了iframe/script与 Midscene 冲突开发者工具里找到以chrome-extension://开头的资源复制扩展 ID在chrome://extensions/按 ID 禁用该扩展刷新页面重试调用 Ollama 模型返回 403Ollama 默认不允许扩展跨源访问设置环境变量OLLAMA_ORIGINS*后重启 OllamaBridge 模式上传本地文件失败扩展缺少文件 URL 访问权限chrome://extensions/→ Midscene → 详情 → 打开允许访问文件网址切回 http(s) 页面后重连构建时报告模板生成失败midscene/visualizer未先行构建先构建 visualizer 包确认packages/visualizer/dist/report/index.html存在深查方向还有一条Bridge 模式下userAgent、viewportWidth、cookie等浏览器选项会被忽略、跟随桌面 Chrome 自身设置如果你发现这些配置不生效这不是 bug是设计如此。结尾Midscene Chrome 扩展把看懂页面 执行指令 断言结果压缩进一个侧边栏Bridge 模式则让你的脚本与真实浏览器无缝衔接。更多细节见 快速上手文档 与 Bridge 模式文档。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考