浏览器自动化

MCP工具

chrome-devtools、playwright、DrissionPage 等浏览器自动化工具均推出了mcp，提供了诸如点击、导航、获取snapshot等丰富的工具，使得Agent可以接管浏览器完成自动化操作。其中，chrome-devtools由谷歌官方出品，对chrome浏览器的适配最好，也是唯一一个能直接接管用户Chrome的mcp工具。其他的mcp工具均无法直接接管用户的chrome，导致他们无法直接利用用户的cookies与帐户验证信息，也无法实现可持续的浏览器人机协同操作。

配置

按照以下操作即可实现通过chrome-devtools-mcp直接接管用户Chrome：

1. 更新chrome内核到144版本以上，可以在chrome浏览器中输入chrome://version/ 查看当前版本
2. 在chrome浏览器中输入chrome://inspect/#remote-debugging ，打开remote-debugging
3. 配置mcp，例如，在opencode中：

"mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest", "--autoConnect"],
      "enabled": true
    }}

其他Agent中的mcp配置格式可以参考chrome-devtools-mcp官方的README文件。核心在于：需要增加 "--autoConnect" 参数。opencode并不接受’args’参数，但是例如TRAE等变成助手将’command’和’args’参数分离，配置文件就要变为

"mcpServers": {
    "Chrome DevTools MCP": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--autoConnect"
      ],
      "env": {}
    }
  }

注意事项：chrome-devtools需要 v20.19 以上的node，使用前记得更新哦～

使用

与大多面向Agent的数浏览器自动化工具一样，chrome-devtools提供了丰富的核心工具集合：点击、导航和snapshot。其中snapshot与playwright一样，返回a11y（Accessibility，无障碍）树，在节省tokens的同时让Agent可以定位页面元素，完成操作。

Agent首次调用mcp时，浏览器会弹出提示，点击允许即可

接下来介绍一些常用工具：

1. snapshot：返回当前标签页的a11y tree：

# take_snapshot response
## Latest page snapshot
uid=1_0 RootWebArea "ChromeDevTools/chrome-devtools-mcp: Chrome DevTools for coding agents" url="https://github.com/ChromeDevTools/chrome-devtools-mcp?tab=readme-ov-file"
  uid=1_6 link "Skip to content" url="https://github.com/ChromeDevTools/chrome-devtools-mcp?tab=readme-ov-file#start-of-content"
    uid=1_7 StaticText "Skip to content"
  uid=1_15 banner "Global Navigation Menu"
    uid=1_19 button "Open menu" haspopup="dialog"
    uid=1_28 link "Homepage ( g then d )" url="https://github.com/"
    uid=1_36 navigation "Breadcrumbs"
      uid=1_39 link "ChromeDevTools" url="https://github.com/ChromeDevTools"
        uid=1_41 StaticText "ChromeDevTools"
      uid=1_44 link "chrome-devtools-mcp" url="https://github.com/ChromeDevTools/chrome-devtools-mcp"
        uid=1_46 StaticText "chrome-devtools-mcp"
...

这是最核心的工具，1）a11y是DOM tree派生的精简语义树，比DOM更稳定；2）保留语义，可以执行诸如点击之类的操作；3）大幅减少tokens；

1. list_pages：列出所有窗口的所有标签页
2. select_page：导航到list_pages返回的pages ID