什么是 Chrome 桥接自动化？

Chrome 桥接自动化技能使 AI 代理能够像人类一样与网页交互——通过查看截图而不是解析 DOM 元素。该 Openclaw Skills 集成由 Midscene.js 提供支持，通过专用扩展程序直接连接到您现有的 Chrome 浏览器。这种桥接模式确保您当前的会话、Cookie 和登录状态保持不变，非常适合在受密码保护或高度动态的网站上自动化复杂的流程。

通过利用强大的视觉定位能力，该技能允许您用自然语言描述想要实现的目标。它避开了脆弱的 CSS 选择器或 XPath 表达式，为需要在真实的、经过身份验证的浏览器环境中自动化任务的开发人员和研究人员提供了可靠的解决方案。

下载入口:https://github.com/openclaw/skills/tree/main/skills/quanru/midscene-computer-chrome-bridge

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

Chrome 桥接自动化 应用场景

• 在您的个人 Chrome 配置中导航并与网页进行交互。
• 从需要活跃登录会话或多因素身份验证的网站中自动提取数据。
• 执行多步网页工作流，如填写表单、点击按钮和处理下拉菜单。
• 验证前端 UI 行为并拍摄视觉快照以用于文档或测试目的。
• 使用自然语言指令执行目标驱动型任务，例如“从国家/地区下拉列表中选择日本”。

1. 通过 Midscene 桥接扩展程序并使用 connect 命令建立与用户活跃 Chrome 浏览器的连接。
2. 导航到特定 URL 以初始化目标环境，同时维护用户的现有 Cookie 和登录状态。
3. 捕获高分辨率截图，以便在进行任何交互之前为 AI 代理提供当前页面状态的视觉上下文。
4. 通过视觉定位的 act 命令使用自然语言提示执行高级操作，该命令可处理点击、键入和滚动。
5. 通过后续截图验证操作结果，并向用户提供调查结果和数据的详细报告。

Chrome 桥接自动化 配置指南

要在 Openclaw Skills 生态系统中使用此功能，您必须安装 Midscene Chrome 扩展程序并激活桥接模式。您还需要为具备视觉能力的模型配置环境变量。

# Gemini 配置示例
export MIDSCENE_MODEL_API_KEY="您的API密钥"
export MIDSCENE_MODEL_NAME="gemini-3-flash"
export MIDSCENE_MODEL_BASE_URL="https://generativelanguage.googleapis.com/v1beta/openai/"
export MIDSCENE_MODEL_FAMILY="gemini"

配置完成后，通过 CLI 启动连接：

npx @midscene/web@1 --bridge connect --url https://example.com

Chrome 桥接自动化 数据架构与分类体系

该技能通过本地文件生成和同步 CLI 输出组织其操作：

name: chrome-bridge-automation
description: |
  Vision-driven browser automation using Midscene Bridge mode. Operates entirely from screenshots — no DOM or accessibility labels required. Can interact with all visible elements on screen regardless of technology stack.

  This mode connects to the user's desktop Chrome browser via the Midscene Chrome Extension, preserving cookies, sessions, and login state.

  Use this skill when the user wants to:
  - Browse, navigate, or open web pages in the user's own Chrome browser
  - Interact with pages that require login sessions, cookies, or existing browser state
  - Scrape, extract, or collect data from websites using the user's real browser
  - Fill out forms, click buttons, or interact with web elements
  - Verify, validate, or test frontend UI behavior
  - Take screenshots of web pages
  - Automate multi-step web workflows
  - Check website content or appearance

  Powered by Midscene.js (https://midscenejs.com)
allowed-tools:
  - Bash

Chrome Bridge Automation

CRITICAL RULES — VIOLATIONS WILL BREAK THE WORKFLOW:

1. Never run midscene commands in the background. Each command must run synchronously so you can read its output (especially screenshots) before deciding the next action. Background execution breaks the screenshot-analyze-act loop.
2. Run only one midscene command at a time. Wait for the previous command to finish, read the screenshot, then decide the next action. Never chain multiple commands together.
3. Allow enough time for each command to complete. Midscene commands involve AI inference and screen interaction, which can take longer than typical shell commands. A typical command needs about 1 minute; complex act commands may need even longer.
4. Always report task results before finishing. After completing the automation task, you MUST proactively summarize the results to the user — including key data found, actions completed, screenshots taken, and any relevant findings. Never silently end after the last automation step; the user expects a complete response in a single interaction.

Automate the user's real Chrome browser via the Midscene Chrome Extension (Bridge mode), preserving cookies, sessions, and login state. You (the AI agent) act as the brain, deciding which actions to take based on screenshots.

Command Format

CRITICAL — Every command MUST follow this EXACT format. Do NOT modify the command prefix.

npx @midscene/web@1 --bridge  [args]

• --bridge flag is MANDATORY here — it activates Bridge mode to connect to the user's desktop Chrome browser

Prerequisites

The user has already prepared Chrome and the Midscene Extension. Do NOT check browser or extension status before connecting — just connect directly.

Midscene requires models with strong visual grounding capabilities. The following environment variables must be configured — either as system environment variables or in a .env file in the current working directory (Midscene loads .env automatically):

MIDSCENE_MODEL_API_KEY="your-api-key"
MIDSCENE_MODEL_NAME="model-name"
MIDSCENE_MODEL_BASE_URL="https://..."
MIDSCENE_MODEL_FAMILY="family-identifier"

Example: Gemini (Gemini-3-Flash)

MIDSCENE_MODEL_API_KEY="your-google-api-key"
MIDSCENE_MODEL_NAME="gemini-3-flash"
MIDSCENE_MODEL_BASE_URL="https://generativelanguage.googleapis.com/v1beta/openai/"
MIDSCENE_MODEL_FAMILY="gemini"

Example: Qwen 3.5

MIDSCENE_MODEL_API_KEY="your-aliyun-api-key"
MIDSCENE_MODEL_NAME="qwen3.5-plus"
MIDSCENE_MODEL_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
MIDSCENE_MODEL_FAMILY="qwen3.5"
MIDSCENE_MODEL_REASONING_ENABLED="false"
# If using OpenRouter, set:
# MIDSCENE_MODEL_API_KEY="your-openrouter-api-key"
# MIDSCENE_MODEL_NAME="qwen/qwen3.5-plus"
# MIDSCENE_MODEL_BASE_URL="https://openrouter.ai/api/v1"

Example: Doubao Seed 2.0 Lite

MIDSCENE_MODEL_API_KEY="your-doubao-api-key"
MIDSCENE_MODEL_NAME="doubao-seed-2-0-lite"
MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/v3"
MIDSCENE_MODEL_FAMILY="doubao-seed"

Commonly used models: Doubao Seed 2.0 Lite, Qwen 3.5, Zhipu GLM-4.6V, Gemini-3-Pro, Gemini-3-Flash.

If the model is not configured, ask the user to set it up. See Model Configuration for supported providers.

Commands

Connect to a Web Page

npx @midscene/web@1 --bridge connect --url https://example.com

Take Screenshot

npx @midscene/web@1 --bridge take_screenshot

After taking a screenshot, read the saved image file to understand the current page state before deciding the next action.

Perform Action

Use act to interact with the page and get the result. It autonomously handles all UI interactions internally — clicking, typing, scrolling, hovering, waiting, and navigating — so you should give it complex, high-level tasks as a whole rather than breaking them into small steps. Describe what you want to do and the desired effect in natural language:

# specific instructions
npx @midscene/web@1 --bridge act --prompt "click the Login button and fill in the email field with 'user@example.com'"
npx @midscene/web@1 --bridge act --prompt "scroll down and click the Submit button"

# or target-driven instructions
npx @midscene/web@1 --bridge act --prompt "click the country dropdown and select Japan"

Disconnect

npx @midscene/web@1 --bridge disconnect

Workflow Pattern

Bridge mode connects to the user's real Chrome browser. Each CLI command establishes its own temporary connection, but the browser, tabs, and all state (cookies, login sessions) are always preserved regardless of whether you disconnect. This makes reconnecting lightweight and lossless.

Follow this pattern:

1. Connect to a URL to establish a session
2. Take screenshot to see the current state, make sure the page is loaded.
3. Execute action using act to perform the desired action or target-driven instructions.
4. Report results — summarize what was accomplished, present key findings and data extracted during the task, and list any generated files (screenshots, logs, etc.) with their paths
5. Disconnect only when the user's overall task is fully complete. Do NOT disconnect if the user may have follow-up actions — keep the session available for continued interaction in subsequent conversation turns.

Best Practices

1. Always connect first: Navigate to the target URL with connect --url before any interaction.
2. Be specific about UI elements: Instead of "the button", say "the blue Submit button in the contact form".
3. Use natural language: Describe what you see on the page, not CSS selectors. Say "the red Buy Now button" instead of "#buy-btn".
4. Handle loading states: After navigation or actions that trigger page loads, take a screenshot to verify the page has loaded.
5. Disconnect only when fully done: Only disconnect when the user's overall task is completely finished and no follow-up actions are expected. In multi-turn conversations, skip the disconnect to allow continued browser interaction. Disconnecting is safe — it only closes the CLI-side bridge connection, not the browser or tabs — but reconnecting adds unnecessary overhead if the user wants to continue.
6. Never run in background: Every midscene command must run synchronously — background execution breaks the screenshot-analyze-act loop.
7. Batch related operations into a single act command: When performing consecutive operations within the same page, combine them into one act prompt instead of splitting them into separate commands. For example, "fill in the email and password fields, then click the Login button" should be a single act call, not three. This reduces round-trips, avoids unnecessary screenshot-analyze cycles, and is significantly faster.
8. Always report results after completion: After finishing the automation task, you MUST proactively present the results to the user without waiting for them to ask. This includes: (1) the answer to the user's original question or the outcome of the requested task, (2) key data extracted or observed during execution, (3) screenshots and other generated files with their paths, (4) a brief summary of steps taken. Do NOT silently finish after the last automation command — the user expects complete results in a single interaction.

Example — Dropdown selection:

npx @midscene/web@1 --bridge act --prompt "click the country dropdown and select Japan"
npx @midscene/web@1 --bridge take_screenshot

Example — Form interaction:

npx @midscene/web@1 --bridge act --prompt "fill in the email field with 'user@example.com' and the password field with 'pass123', then click the Log In button"
npx @midscene/web@1 --bridge take_screenshot

Troubleshooting

Bridge Mode Connection Failures

• Ask user to check if Chrome is open with the Midscene Extension installed and enabled.
• The Midscene Extension can be installed from the Chrome Web Store: https://chromewebstore.google.com/detail/midscenejs/gbldofcpkknbggpkmbdaefngejllnief
• Check that the 'bridge mode' indicator in the extension shows "Listening" status.
• See the Bridge Mode documentation.

Timeouts

• Web pages may take time to load. After connecting, take a screenshot to verify readiness before interacting.
• For slow pages, wait briefly between steps.

Screenshots Not Displaying

• The screenshot path is an absolute path to a local file. Use the Read tool to view it.