Chrome Browser Control
Overview
This skill provides a robust interface for direct control and inspection of a live Chrome browser instance, powered by the chrome-devtools-mcp server. Unlike traditional browser automation which relies on extensions, this skill leverages the Chrome DevTools Protocol to offer in-depth debugging, performance analysis, and reliable automation capabilities. It's ideal for tasks requiring precise browser interaction, data extraction, or detailed web performance metrics.
Core Capabilities
This skill wraps the functionalities exposed by chrome-devtools-mcp, allowing you to perform a wide range of browser operations:
1. Input Automation
Automate user interactions such as clicking elements, filling forms, typing text, hovering, pressing keys, and uploading files.
click(selector: string, ...)drag(startSelector: string, endSelector: string, ...)fill(selector: string, text: string, ...)fill_form(selector: string, fields: object, ...)handle_dialog(accept: boolean, promptText?: string, ...)hover(selector: string, ...)press_key(key: string, ...)upload_file(selector: string, paths: string[], ...)
2. Navigation Automation
Control browser navigation, including opening new pages, listing open pages, navigating to URLs, and closing pages.
close_page(targetId?: string, ...)list_pages()navigate_page(url: string, ...)new_page(url?: string, ...)select_page(targetId: string, ...)wait_for(selector: string, ...)
3. Emulation
Emulate various device conditions or resize the browser viewport.
emulate(device: string, ...)resize_page(width: number, height: number, ...)
4. Performance Analysis
Record traces, analyze performance insights, and identify bottlenecks.
performance_analyze_insight()performance_start_trace()performance_stop_trace()
5. Network Inspection
Monitor and inspect network requests made by the browser.
get_network_request(requestId: string)list_network_requests()
Usage
All capabilities are exposed through the scripts/chrome-devtools.ts script. To invoke these functions, you will use mcporter call chrome-devtools.<tool_name> [args...].
Example: Navigating to a page and taking a screenshot at a specific path
mcporter call chrome-devtools.navigate_page url="https://example.com"
mcporter call chrome-devtools.take_screenshot filePath="/Users/tim/.openclaw/workspace/google_home.png" fullPage=true
Note: The chrome-devtools-mcp server must be running and configured in your OpenClaw environment (mcporter config add chrome-devtools ...) for this skill to function.
Resources
scripts/
chrome-devtools.ts: The auto-generated TypeScript CLI interface for the chrome-devtools-mcp server, providing direct access to all listed capabilities. This script handles the communication with the underlying MCP server.
1---2name: chrome-browser-control3description: This skill enables comprehensive control and inspection of the Chrome browser without extensions, utilizing the Chrome DevTools Protocol via chrome-devtools-mcp. Use it for advanced browser automation, performance analysis, debugging network requests, taking screenshots, and interacting with web pages. Triggers include explicit requests to browse, automate, debug, or analyze Chrome's behavior, or any task requiring headless/direct browser interaction.4---56# Chrome Browser Control78## Overview910This skill provides a robust interface for direct control and inspection of a live Chrome browser instance, powered by the `chrome-devtools-mcp` server. Unlike traditional browser automation which relies on extensions, this skill leverages the Chrome DevTools Protocol to offer in-depth debugging, performance analysis, and reliable automation capabilities. It's ideal for tasks requiring precise browser interaction, data extraction, or detailed web performance metrics.1112## Core Capabilities1314This skill wraps the functionalities exposed by `chrome-devtools-mcp`, allowing you to perform a wide range of browser operations:1516### 1. Input Automation17Automate user interactions such as clicking elements, filling forms, typing text, hovering, pressing keys, and uploading files.18- `click(selector: string, ...)`19- `drag(startSelector: string, endSelector: string, ...)`20- `fill(selector: string, text: string, ...)`21- `fill_form(selector: string, fields: object, ...)`22- `handle_dialog(accept: boolean, promptText?: string, ...)`23- `hover(selector: string, ...)`24- `press_key(key: string, ...)`25- `upload_file(selector: string, paths: string[], ...)`2627### 2. Navigation Automation28Control browser navigation, including opening new pages, listing open pages, navigating to URLs, and closing pages.29- `close_page(targetId?: string, ...)`30- `list_pages()`31- `navigate_page(url: string, ...)`32- `new_page(url?: string, ...)`33- `select_page(targetId: string, ...)`34- `wait_for(selector: string, ...)`3536### 3. Emulation37Emulate various device conditions or resize the browser viewport.38- `emulate(device: string, ...)`39- `resize_page(width: number, height: number, ...)`4041### 4. Performance Analysis42Record traces, analyze performance insights, and identify bottlenecks.43- `performance_analyze_insight()`44- `performance_start_trace()`45- `performance_stop_trace()`4647### 5. Network Inspection48Monitor and inspect network requests made by the browser.49- `get_network_request(requestId: string)`50- `list_network_requests()`5152<h3> 6. Debugging & Screenshots</h3>53Evaluate JavaScript in the browser context, log console messages, and capture screenshots or full page snapshots.54- `evaluate_script(expression: string, ...)`55- `get_console_message(messageId: string)`56- `list_console_messages()`57- `take_screenshot(filePath?: string, fullPage?: boolean, ...)` - **CRITICAL:** Use `filePath` to specify the exact save location. If omitted, the screenshot is saved to the MCP server's default directory (often `/config`).58- `take_snapshot()`5960## Usage6162All capabilities are exposed through the `scripts/chrome-devtools.ts` script. To invoke these functions, you will use `mcporter call chrome-devtools.<tool_name> [args...]`.6364**Example: Navigating to a page and taking a screenshot at a specific path**65```bash66mcporter call chrome-devtools.navigate_page url="https://example.com"67mcporter call chrome-devtools.take_screenshot filePath="/Users/tim/.openclaw/workspace/google_home.png" fullPage=true68```6970**Note:** The `chrome-devtools-mcp` server must be running and configured in your OpenClaw environment (`mcporter config add chrome-devtools ...`) for this skill to function.7172## Resources7374### scripts/75- `chrome-devtools.ts`: The auto-generated TypeScript CLI interface for the `chrome-devtools-mcp` server, providing direct access to all listed capabilities. This script handles the communication with the underlying MCP server.
TimLai666