Browser Automation

Browser Automation Skill

Complete browser automation workflow based on MCP Browser Server, providing stable and reliable web page operations.

Core Capabilities

• CDP-Powered Automation: Chrome DevTools Protocol for reliable, background operations
• Smart Navigation System: Auto-detect open tabs, avoid redundant navigation
• Advanced Element Interaction: UID-based targeting, accessibility tree analysis
• Content Extraction: HTML/text extraction, saved locally
• Network Requests: Send HTTP requests with browser cookies
• Advanced Features: File upload, script injection, history navigation

📖 Quick Start

🎯 Execution Flow

Standard Workflow (CDP-Powered, Recommended)

1. get_windows_and_tabs                        (Check browser state)
2. chrome_navigate(url)                        (Navigate to target page, background mode)
3. chrome_screenshot(tabId)                    (Verify loading)
4. [Optional] chrome_page_protection_enable    (Protect from user interference)
5. [Optional] chrome_accessibility_snapshot    (Get interactive elements with UIDs)
6. [Optional] chrome_click_element(uid)        (Click using UID - most reliable)
7. chrome_get_web_content(tabId)               (Extract content)
8. [Optional] chrome_page_protection_disable   (Restore user control)
9. chrome_close_tabs                           (Clean up: close opened tabs after completion)

⚠️ User Intervention: When encountering login/CAPTCHA/complex decisions, use mcp__user_interaction_tools__ask_user_confirmation:

Example parameters:

{
    "type": "user_takeover",
    "message": "Detected login required. Please complete login and click confirm.",
    "confirm_text": "Continue",
    "cancel_text": "Cancel",
    "tabId": "1625463389",
    "timeout": 300
}

CDP Advantages:

• Background execution: No tab activation, faster performance
• UID-based targeting: Most reliable element location method
• Better error handling: CDP provides detailed error information
• Persistent state: Maintains page state across operations

---

🛠️ MCP Tools Reference

Navigation & State

chrome_navigate ⭐ (Recommended)

Navigate using CDP - supports background navigation without tab activation

Parameters:

• url (string, required): Target URL
• tabId (number, required): Target tab ID
• active (boolean, default: false): Whether to activate tab (false = background)
• waitForLoad (boolean, default: true): Wait for page load event
• timeout (number, default: 30000): Navigation timeout in milliseconds

CDP Advantages:

• ✅ Background navigation (faster, no UI disruption)
• ✅ Precise load event detection
• ✅ Reuse existing tabs efficiently
• ✅ Better error reporting

Use Cases:

• Batch URL processing without switching tabs
• Automated workflows requiring stealth navigation
• Parallel page loading

---

getwindowsand_tabs

Get all browser windows and tabs

Parameters: None

Returns: All windows and tabs info (id, url, title, active)

Use Cases:

• Check if target page already open before navigation
• Avoid redundant navigation, save time
• Determine current active tab

---

chromeclosetabs

Close one or more tabs

Parameters:

• tabIds (array, optional): Tab ID list
• url (string, optional): Match URL to close

---

Element Analysis

chromeaccessibilitysnapshot ⭐ (PRIMARY - Use this first)

Capture clickable elements using CDP DOMSnapshot - returns flat list with UIDs

Parameters:

• tabId (number, required): Target tab ID

Returns:

• Flat list of interactive elements sorted by paint order and position
• Each element includes:
• uid: Unique identifier (use with chrome_click_element)
• selector: CSS selector
• coordinates: {x, y} position
• styles: Element styles
• attributes: HTML attributes

CDP Advantages:

• ✅ PRIMARY TOOL - Always use this first for element analysis
• ✅ UID-based element targeting (most reliable)
• ✅ Complete accessibility tree analysis
• ✅ Paint order information for accurate positioning
• ✅ No visual highlighting needed

Use Cases:

• Find elements to interact with
• Analyze page structure
• Generate reliable selectors

---

Content Extraction

chromegetweb_content

Get HTML or Markdown content from web pages using CDP. Supports background execution (no tab activation)

Parameters:

• tabId (number, required): Target tab ID to fetch content from
• outputFormat (string, optional): Output format: "html" (default), "markdown"
• selector (string, optional): CSS selector to get HTML from a specific element. If not provided, gets entire page HTML (document.documentElement.outerHTML).

CDP Advantages:

• ✅ Background execution without tab activation
• ✅ Returns extracted content directly
• ✅ Element-specific content extraction via CSS selector

Returns:

• Extracted HTML or Markdown content

Note: This tool fetches content from an existing tab. Use chrome_navigate first if you need to navigate to a URL.

---

chromegetinteractive_elements

Get page interactive elements (legacy method)

Parameters:

• tabId (number, required): Target tab
• selector (string, optional): CSS filter
• textQuery (string, optional): Text search
• includeCoordinates (boolean, default: true): Include coordinates

⚠️ Deprecated: Use chrome_accessibility_snapshot instead for better reliability

---

Screenshots

chrome_screenshot ⭐ (Recommended)

Capture screenshots using CDP - supports background execution

Parameters:

• tabId (number, required): Target tab ID
• fullPage (boolean, default: false): Capture full page
• selector (string, optional): Capture specific element only

CDP Advantages:

• ✅ Background capture without activating tab
• ✅ Element-specific screenshots
• ✅ Full page capture support

Use Cases:

• ✅ Verify page loading after navigation
• ✅ Detect CAPTCHA or popups
• ✅ Capture specific page sections
• ✅ Batch screenshot collection

---

chromescreenshotwith_highlights

Highlight interactive elements and capture screenshot with numbered labels (non-CDP legacy method)

Parameters:

• tabId (number, required): Target tab ID
• selector (string, optional): CSS selector to filter elements
• name (string, optional): Filename prefix (default: "highlights")
• highlightDelay (number, optional): Wait time after highlighting (default: 500ms)

Returns:

• Two file URLs:

1. JSON file with element details and index numbers
2. Screenshot image with numbered labels

⚠️ Deprecated (Non-CDP): This tool is not CDP-powered and may require tab activation. For better reliability and performance, use chrome_accessibility_snapshot (CDP-powered) combined with chrome_screenshot instead.

Recommended Alternative:

1. Use chrome_accessibility_snapshot to get element UIDs and metadata
2. Use chrome_screenshot for visual verification if needed

---

Page Interaction

chromeclickelement ⭐ (Recommended)

Click elements using UID (most reliable), CSS selector, or coordinates

Parameters:

• uid (string, optional): Unique ID from accessibility snapshot (MOST RELIABLE)
• selector (string, optional): CSS selector
• coordinates (object, optional): {x, y} coordinates
• tabId (number, required): Target tab ID
• button (string, default: "left"): Mouse button (left/right/middle)
• clickCount (number, default: 1): Number of clicks (1=single, 2=double)
• waitForNavigation (boolean, default: false): Wait for navigation after click
• timeout (number, default: 5000): Timeout in milliseconds

CDP Advantages:

• ✅ UID targeting - Most reliable method (get UIDs from chrome_accessibility_snapshot)
• ✅ Auto-scroll to element before clicking
• ✅ Support for right-click and double-click
• ✅ Better error messages

Recommended Workflow:

1. Use chrome_accessibility_snapshot to get element UIDs
2. Click using uid parameter for maximum reliability

---

chromefillor_select ⭐ (Recommended)

Fill form elements using UID (most reliable) or CSS selector - supports automatic clearing and event triggering

Parameters:

• uid (string, optional): Unique ID from accessibility snapshot (MOST RELIABLE)
• selector (string, optional): CSS selector of the form element (alternative to uid)
• value (string, required): Value to fill
• tabId (number, required): Target tab ID
• clearFirst (boolean, default: true): Clear existing content before filling

CDP Advantages:

• ✅ UID targeting - Most reliable method (get UIDs from chrome_accessibility_snapshot)
• ✅ Automatic clearing of existing content
• ✅ Triggers proper input events (input, change, blur)
• ✅ Reliable handling of React/Vue controlled components

Recommended Workflow:

1. Use chrome_accessibility_snapshot to get element UIDs
2. Fill using uid parameter for maximum reliability

Note: Must provide either uid or selector

---

chrome_scroll ⭐ (Recommended)

Scroll page or element using CDP mouseWheel events

Parameters:

• selector (string, optional): CSS selector to scroll
• coordinates (object, optional): {x, y} where scroll is triggered
• direction (string, default: "down"): Scroll direction (up/down/left/right)
• distance (number, default: 300): Scroll distance in pixels
• tabId (number, required): Target tab ID
• timeout (number, default: 3000): Timeout in milliseconds

CDP Advantages:

• ✅ Precise pixel-based scrolling
• ✅ Directional control (up/down/left/right)
• ✅ Can target specific elements or coordinates

Best Practices:

• Provide coordinates for predictable scrolling behavior
• Use selector to scroll within specific containers

---

chromescrollinto_view 🆕 (Recommended)

Scroll element into view using UID (most reliable) or CSS selector - supports alignment control

Parameters:

• uid (string, optional): Unique ID from accessibility snapshot (MOST RELIABLE)
• selector (string, optional): CSS selector of the element (alternative to uid)
• block (string, default: "center"): Vertical alignment (start/center/end/nearest)
• inline (string, default: "center"): Horizontal alignment (start/center/end/nearest)
• behavior (string, default: "auto"): Scroll behavior (auto/smooth)
• tabId (number, required): Target tab ID
• timeout (number, default: 3000): Timeout in milliseconds

CDP Advantages:

• ✅ UID targeting - Most reliable method (get UIDs from chrome_accessibility_snapshot)
• ✅ Precise alignment control (center/start/end)
• ✅ Ensures element visibility before interaction
• ✅ Works with dynamically loaded content

Recommended Workflow:

1. Use chrome_accessibility_snapshot to get element UIDs
2. Scroll using uid parameter for maximum reliability

Use Cases:

• Scroll to specific element before clicking
• Ensure form fields are visible before filling
• Navigate to page sections

Note: Must provide either uid or selector

---

chrome_keyboard ⭐ (Recommended)

Simulate keyboard input using CDP - supports special keys and combinations

Parameters:

• keys (string, required): Keys to simulate (e.g., "Enter", "Ctrl+C", "A, B, C")
• selector (string, optional): Target element to focus before sending keys
• delay (number, default: 50): Delay between key sequences in milliseconds
• tabId (number, required): Target tab ID

CDP Advantages:

• ✅ Full special key support (Enter, Tab, Arrow keys, etc.)
• ✅ Modifier combinations (Ctrl+C, Shift+A, etc.)
• ✅ Sequence support with customizable delays

Examples:

• keys: "Enter" - Press Enter
• keys: "Ctrl+C" - Copy
• keys: "A, B, C" - Type A, B, C in sequence with delays

---

chromewaitfor_element ⭐ (Recommended)

Wait for element to appear using CDP - supports background polling

Parameters:

• selector (string, required): CSS selector
• tabId (number, required): Target tab ID
• timeout (number, default: 10000): Timeout in milliseconds
• visible (boolean, default: true): Element must be visible
• pollInterval (number, default: 100): Polling interval in milliseconds
• useBinding (boolean, default: false): Use event-driven detection

CDP Advantages:

• ✅ Background polling without tab activation
• ✅ Configurable poll intervals
• ✅ Event-driven detection option (faster)

---

chromeinputupload_file 🆕

Upload files to file input elements or drag-and-drop zones using UID or CSS selector

Parameters:

• sourceType (string, default: "base64"): Source type (url/base64)
• url (string, optional): URL of file (required if sourceType="url")
• base64Data (string, optional): Base64 file data (required if sourceType="base64")
• filename (string, optional): Filename (inferred if not provided)
• mimeType (string, optional): MIME type (inferred if not provided)
• uid (string, optional): Unique ID from accessibility snapshot (alternative to inputSelector)
• inputSelector (string, default: "input[type=\"file\"]"): File input selector (alternative to uid)
• dropZoneSelector (string, optional): Drag-and-drop zone selector
• multiple (boolean, default: false): Upload multiple files
• files (array, optional): Array of files for multiple upload
• waitForComplete (boolean, default: false): Wait for upload completion
• successSelectors (array, optional): Selectors to detect successful upload
• errorSelectors (array, optional): Selectors to detect upload errors
• showVisual (boolean, default: true): Show visual feedback of mouse movements and clicks
• timeout (number, default: 30000): Timeout in milliseconds
• tabId (number, required): Target tab ID

CDP Advantages:

• ✅ UID targeting - Most reliable method (get UIDs from chrome_accessibility_snapshot)
• ✅ Support for URL and base64 sources
• ✅ Multiple file upload
• ✅ Drag-and-drop zone support
• ✅ Upload completion monitoring
• ✅ Visual feedback for debugging

Recommended Workflow:

1. Use chrome_accessibility_snapshot to locate file input elements
2. Upload using uid parameter for maximum reliability

Use Cases:

• Upload images/documents from URLs
• Upload base64-encoded files
• Fill file upload forms
• Drag-and-drop file uploads

---

chromepageprotection_enable 🔒 (Recommended)

Enable page protection to prevent accidental user interactions during automation

Parameters:

• tabId (number, optional, defaults to active tab): Target tab ID

CDP Advantages:

• ✅ Creates transparent overlay to block all user interactions
• ✅ Automatically enables close warning to prevent accidental tab closure
• ✅ Protects automation workflows from manual interference
• ✅ Visual indicator shows page is under automation control

Use Cases:

• Prevent user clicks during long automation workflows
• Protect form filling operations from interruption
• Ensure data extraction completes without interference
• Multi-step workflows requiring consistent state

Best Practice: Always enable protection at the start of critical automation sequences

---

chromepageprotection_disable 🔓 (Recommended)

Disable page protection to restore normal user interactions

Parameters:

• tabId (number, optional, defaults to active tab): Target tab ID

CDP Advantages:

• ✅ Removes overlay and restores user control
• ✅ Automatically disables close warning
• ✅ Clean cleanup after automation completes

Use Cases:

• Restore user control after automation completes
• Allow manual intervention when needed
• Clean up after failed automation workflows

IMPORTANT:

• If page protection is enabled, you MUST disable it first using this tool before attempting clicks, otherwise clicks will be blocked and have no effect
• Always call this tool when automation completes or encounters errors

---

chromepageprotection_status

Check current page protection status for a tab

Parameters:

• tabId (number, optional, defaults to

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ClawCap
• Source: ClawCap/ManoBrowser
• License: MIT

Install and usage instructions live in the source repository linked above.