拓冰网站定制 
Midscene.js 浏览器自动化完整指南3 步让 Chrome 听懂你的话【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene你有没有遇到过这种场景想在页面上自动点按钮、抓数据、验证流程但写 Selenium 脚本要维护一堆选择器改一次页面就崩一次Midscene.js 的思路不一样——它用自然语言驱动浏览器自动化你直接说点击登录按钮它自己看截图、找元素、执行操作。这个仓库里的 Chrome 扩展就是最快的体验入口不用搭项目装好就能用。 它到底能做什么Midscene.js 把浏览器自动化拆成三种指令都写在同一句话里Action操作点击、输入、滚动。比如type Midscene.js and click search。Query查询从页面提取结构化数据。比如页面中的商品{name: string, price: number}[]返回的是 JSON。Assert断言验证页面状态。比如页面顶部显示导航栏。这三类能力在网页之外也都有对应实现Android、iOS、HarmonyOS 和桌面端都有独立模块见 apps/site/docs/zh/platforms/本文以浏览器扩展为主线。⚙️ 安装配置三步跑通第一步装好扩展。优先从 Chrome Web Store 搜索安装 Midscene可以自动更新。如果你要改源码可以克隆仓库后手动构建git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene/apps/chrome-extension pnpm run build构建产物在dist目录。然后在chrome://extensions/打开开发者模式点加载已解压的扩展程序选中dist即可。第二步配置模型。扩展需要一个能理解界面的多模态模型核心是四个配置项MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY。把完整配置粘贴到扩展侧边栏的设置页并保存。支持豆包、千问、GLM、GPT 等多家模型具体写法参考 apps/site/docs/zh/model-common-config.mdx。第三步发出第一条指令。打开任意网页浏览器右侧会弹出 Midscene 侧边栏切到 Action 标签输入type Midscene.js and click search点 Run。 日常场景三个可以直接抄的用法自动填表填写 GitHub 注册表单并通过表单校验但不要提交——Midscene 会自己定位输入框、逐个填写并过校验不会替你点提交。批量抓数据页面中的商品{name: string, price: number}[]Query 标签返回结构化 JSON直接喂给下游脚本。回归检查页面顶部显示导航栏且登录按钮可见Assert 标签用来当轻量断言比写选择器稳定得多。跑完任何指令后Midscene.js 都会在midscene_run/report/目录下生成 HTML 报告每一步的截图、规划和耗时都能回放如果某条指令效果不理想可以点侧边栏里的 send to fullscreen playground 切到全屏 Playground里面有实时截图和更大的输入区方便反复调试措辞 进阶玩法用 Bridge 模式控制你的真实浏览器这是最实用也最容易被忽略的功能。前面扩展控制的是自己的标签页而 Bridge 模式桥接模式让本地终端里的脚本直接接管你正在用的桌面 Chrome——已登录的状态、Cookie、扩展全部复用。想自动操作但我已经登录着的场景就靠它。使用步骤打开扩展的 Bridge Mode 面板点 Listening for connection。扩展图标出现黄点表示监听中绿点表示已连接。模型配置注意Bridge 模式下要写在终端环境变量里不是浏览器侧。Node 项目里安装依赖后用AgentOverChromeBridge连接新标签页或当前标签页运行脚本时浏览器会弹出确认窗点Allow或 Always Allow即可放行。如果脚本要上传本地文件去chrome://extensions找到 Midscene开启 Allow access to file URLs。不想写代码也行YAML 脚本里加一行bridgeMode: currentTab或bridgeMode: newTabWithUrl就能走桥接通道完整写法见 apps/site/docs/zh/bridge-mode.mdx。️ 连接排错四个高频坑报错Cannot access a chrome-extension:// URL of different extension基本是别的扩展往页面里注入了script或iframe造成的冲突。打开开发者工具找到chrome-extension://开头的节点复制扩展 ID到chrome://extensions/里禁用它刷新页面重试。Ollama 本地模型报 403设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型服务。Bridge 连不上确认扩展面板显示 Listening for connection默认地址是ws://localhost:3766跨机器才需要改成远程地址模型 Key 忘了配在终端侧是最常见的原因。报告没生成运行产物默认在midscene_run目录report/放 HTML 报告、log/放日志目录不对时可以用MIDSCENE_RUN_DIR环境变量改。更多问题可以看 apps/site/docs/zh/faq.md。写在最后Midscene.js 的核心是把定位元素这件事交给多模态模型你只管用自然语言描述目标。上手路径装扩展 → 贴模型配置 → 在侧边栏跑一条 Action 指令十分钟就能看到效果。需要复用登录态时再开 Bridge 模式YAML 脚本同样适用。每次执行都会留下 HTML 报告排查为什么点歪了有图有真相。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js 浏览器自动化完整指南：3 步让 Chrome 听懂你的话
Midscene.js 浏览器自动化完整指南3 步让 Chrome 听懂你的话【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene你有没有遇到过这种场景想在页面上自动点按钮、抓数据、验证流程但写 Selenium 脚本要维护一堆选择器改一次页面就崩一次Midscene.js 的思路不一样——它用自然语言驱动浏览器自动化你直接说点击登录按钮它自己看截图、找元素、执行操作。这个仓库里的 Chrome 扩展就是最快的体验入口不用搭项目装好就能用。 它到底能做什么Midscene.js 把浏览器自动化拆成三种指令都写在同一句话里Action操作点击、输入、滚动。比如type Midscene.js and click search。Query查询从页面提取结构化数据。比如页面中的商品{name: string, price: number}[]返回的是 JSON。Assert断言验证页面状态。比如页面顶部显示导航栏。这三类能力在网页之外也都有对应实现Android、iOS、HarmonyOS 和桌面端都有独立模块见 apps/site/docs/zh/platforms/本文以浏览器扩展为主线。⚙️ 安装配置三步跑通第一步装好扩展。优先从 Chrome Web Store 搜索安装 Midscene可以自动更新。如果你要改源码可以克隆仓库后手动构建git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene/apps/chrome-extension pnpm run build构建产物在dist目录。然后在chrome://extensions/打开开发者模式点加载已解压的扩展程序选中dist即可。第二步配置模型。扩展需要一个能理解界面的多模态模型核心是四个配置项MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY。把完整配置粘贴到扩展侧边栏的设置页并保存。支持豆包、千问、GLM、GPT 等多家模型具体写法参考 apps/site/docs/zh/model-common-config.mdx。第三步发出第一条指令。打开任意网页浏览器右侧会弹出 Midscene 侧边栏切到 Action 标签输入type Midscene.js and click search点 Run。 日常场景三个可以直接抄的用法自动填表填写 GitHub 注册表单并通过表单校验但不要提交——Midscene 会自己定位输入框、逐个填写并过校验不会替你点提交。批量抓数据页面中的商品{name: string, price: number}[]Query 标签返回结构化 JSON直接喂给下游脚本。回归检查页面顶部显示导航栏且登录按钮可见Assert 标签用来当轻量断言比写选择器稳定得多。跑完任何指令后Midscene.js 都会在midscene_run/report/目录下生成 HTML 报告每一步的截图、规划和耗时都能回放如果某条指令效果不理想可以点侧边栏里的 send to fullscreen playground 切到全屏 Playground里面有实时截图和更大的输入区方便反复调试措辞 进阶玩法用 Bridge 模式控制你的真实浏览器这是最实用也最容易被忽略的功能。前面扩展控制的是自己的标签页而 Bridge 模式桥接模式让本地终端里的脚本直接接管你正在用的桌面 Chrome——已登录的状态、Cookie、扩展全部复用。想自动操作但我已经登录着的场景就靠它。使用步骤打开扩展的 Bridge Mode 面板点 Listening for connection。扩展图标出现黄点表示监听中绿点表示已连接。模型配置注意Bridge 模式下要写在终端环境变量里不是浏览器侧。Node 项目里安装依赖后用AgentOverChromeBridge连接新标签页或当前标签页运行脚本时浏览器会弹出确认窗点Allow或 Always Allow即可放行。如果脚本要上传本地文件去chrome://extensions找到 Midscene开启 Allow access to file URLs。不想写代码也行YAML 脚本里加一行bridgeMode: currentTab或bridgeMode: newTabWithUrl就能走桥接通道完整写法见 apps/site/docs/zh/bridge-mode.mdx。️ 连接排错四个高频坑报错Cannot access a chrome-extension:// URL of different extension基本是别的扩展往页面里注入了script或iframe造成的冲突。打开开发者工具找到chrome-extension://开头的节点复制扩展 ID到chrome://extensions/里禁用它刷新页面重试。Ollama 本地模型报 403设置环境变量OLLAMA_ORIGINS*允许扩展访问本地模型服务。Bridge 连不上确认扩展面板显示 Listening for connection默认地址是ws://localhost:3766跨机器才需要改成远程地址模型 Key 忘了配在终端侧是最常见的原因。报告没生成运行产物默认在midscene_run目录report/放 HTML 报告、log/放日志目录不对时可以用MIDSCENE_RUN_DIR环境变量改。更多问题可以看 apps/site/docs/zh/faq.md。写在最后Midscene.js 的核心是把定位元素这件事交给多模态模型你只管用自然语言描述目标。上手路径装扩展 → 贴模型配置 → 在侧边栏跑一条 Action 指令十分钟就能看到效果。需要复用登录态时再开 Bridge 模式YAML 脚本同样适用。每次执行都会留下 HTML 报告排查为什么点歪了有图有真相。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考