chrome-browser

Chrome Browser Automation

Implement browser automation operations through the chrome-devtools-mcp service, supporting natural language instructions to control the browser.

Prerequisites

Chrome Browser: Google Chrome 90+ or Chromium
MCP Service：@anthropic-ai/chrome-devtools-mcp (latest version recommended)
Node.js: 18+ (to run the MCP service)

For detailed installation steps, please refer to Installation Guide。

Use Cases

Activate this skill when the user requests the following:

"Open www.example.com", "visit this website"
"search xxx in the browser", "google it for me"
"click the login button on the page"
"fill out this form"
"capture the current page", "save a screenshot of the page"
"retrieve the xxx data on the page"

Execution Flow

Step 1: Check the Environment

Try calling the MCP tool to check the Chrome browser connection status. If the connection fails, prompt the user to start Chrome in remote debugging mode.

When unable to connect to the Chrome browser, please start Chrome in remote debugging mode:
chrome.exe --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-debug"

Step 2: Parse the User Instruction

Based on the user input, identify the operation to be performed:

User Intent	Corresponding Instruction
Open/visit website	`navigate`
Click element	`click`
Input text	`type`
Search	`type` + `click` or `press Enter`
Screenshot	`screenshot`
Get data	`evaluate`
Wait	`wait`
Scroll	`scroll`

Step 3: Determine the Target Page

If the user specified a URL → navigate to that address
If the user says "current page" → use the current active tab
If a new tab needs to be created → use new_page

Step 4: Execute the Operation Sequence

Execute the parsed operation instructions in order. See Supported Instructions。

Step 5: Return the Result

Return the result based on the operation type:

Navigation type: return the page title and URL
Operation type: return whether the operation succeeded
Retrieval type: return the retrieved data
Screenshot type: return the screenshot and describe the content

Common Operations Quick Reference

Open Website

用户: 打开 github.com
执行: navigate → https://github.com
返回: 已打开 GitHub 首页

Search

用户: 在 Google 搜索 Chrome DevTools
执行:
  1. navigate → https://www.google.com
  2. type → 搜索框 → "Chrome DevTools"
  3. press → Enter
返回: 搜索结果页面截图

Click Element

用户: 点击页面上的"登录"按钮
执行:
  1. 分析页面找到登录按钮选择器
  2. click → 登录按钮选择器
返回: 点击结果

Get Data

用户: 获取页面标题
执行: evaluate → document.title
返回: 页面标题文本

Error Handling

Error Type	Handling Method
Chrome not started	Provide the startup command and guide the user to start remote debugging mode
Page load timeout	Suggest checking the network or increasing the wait time
Element not found	Indicate possible causes and suggest re-locating
Script execution error	Return the error message and provide repair suggestions
Permission issue	Explain operations that require user authorization

Notes

Browser launch: Chrome needs to be launched with --remote-debugging-port=9222 launch
Wait for loading: Complex pages require appropriate waiting to avoid performing operations too early
Selector stability: Prefer stable IDs and data attributes, and avoid using volatile classes
Login state: Websites involving login require the user to log in in advance or provide credentials
Page changes: SPA pages may require listening for URL or DOM changes

Reference documentation

Documentation	Description
Installation guide	Detailed installation steps and common issues
Supported commands	All executable browser operation commands
Selector strategy	Element locating methods and best practices
Browser API	MCP tool correspondence
Usage examples	Complete interaction examples

Example conversation

User: Help me open Baidu and search for Claude AI

Assistant:

Connecting to browser...connected
Opening Baidu...completed
Entering search term...entered "Claude AI"
Executing search...completed

Search results: found about X related results, the first few are as follows...

User: Get all links on the current page

Assistant: Execute script to get links...

Array.from(document.querySelectorAll('a[href]'))
  .map((a) => ({ text: a.textContent.trim(), href: a.href }))
  .filter((l) => l.text && l.href);

Retrieved X links:

Link text
...