Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
BrowserMCP Skill
Automate browser tasks using the BrowserMCP MCP server and Chrome extension. Use for navigating websites, filling forms, clicking elements, taking screenshot...
skill openclawclawhub Free
Automate browser tasks using the BrowserMCP MCP server and Chrome extension. Use for navigating websites, filling forms, clicking elements, taking screenshot...
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, templates/config-template.json, references/setup.md, references/tools.md, references/workflows.md, references/best-practices.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- frankausberlin
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
BrowserMCP Skill
This skill enables MCP Clients to automate browser interactions through the BrowserMCP protocol. It leverages a local MCP server and a Chrome extension to control the user's actual browser session, allowing for authenticated actions and bypassing common bot detection.
Key Features
โก Fast: Automation happens locally without network latency ๐ Private: Browser activity stays on the device ๐ค Logged In: Uses existing browser profile with active sessions ๐ฅท Stealth: Avoids basic bot detection and CAPTCHAs via real browser fingerprint
Prerequisites
Before using BrowserMCP automation: MCP Server: BrowserMCP server must be running (via npx) Chrome Extension: Browser MCP Chrome extension must be installed and connected Active Tab: The target browser tab must be connected via the extension [!IMPORTANT] The AI can only control tabs that are actively "Connected" via the Browser MCP extension. If you switch tabs, you must reconnect the new tab.
Core Workflow
The standard browser automation process follows an iterative approach: flowchart TD A[Navigate to URL] --> B[Take Snapshot] B --> C[Identify Elements] C --> D[Interact: Click/Type/etc] D --> E[Wait for Changes] E --> B E --> F[Verify: Screenshot/Logs]
Standard Pattern
StepToolPurposeKey Consideration1navigateOpen the target URLEnsure extension is connected first2snapshotCapture ARIA tree to identify interactive elementsRefresh after any page changes3click / typeInteract with page elementsUse exact ref from snapshot4waitPause for dynamic content to loadEssential after navigation/clicks5screenshotVisually verify resultsUse when uncertain about state6get_console_logsDebug JavaScript errorsCheck when interactions fail
Essential Tools
ToolUse WhenParametersnavigateOpening a new pageurl - full URL including protocolsnapshotUnderstanding page structureNone - returns ARIA accessibility treeclickActivating buttons/linkselement (description), ref (exact ID from snapshot)typeFilling input fieldselement, ref, text, submit (optional)hoverTriggering hover menuselement, refselect_optionChoosing from dropdownselement, ref, values (array)press_keyKeyboard shortcutskey - e.g., "Enter", "Escape", "ArrowDown"waitAllowing page to loadtime - seconds to waitscreenshotVisual verificationNone - returns PNG imageget_console_logsDebugging errorsNone - returns recent console outputgo_back / go_forwardNavigation historyNone
Common Key Values
Navigation: Enter, Escape, Tab Editing: Backspace, Delete Arrows: ArrowUp, ArrowDown, ArrowLeft, ArrowRight Modifiers: Control, Alt, Shift, Meta (combine via modifiers array) Function: F1-F12 Other: Home, End, PageUp, PageDown, Space
Example 1: Search on Google
// Step 1: Navigate to search engine navigate(url="https://google.com") // Step 2: Type search query (use snapshot to find the ref) type(element="Google search box", ref="e12", text="BrowserMCP automation", submit=true) // Alternative: Type then press Enter separately type(element="Search box", ref="e12", text="BrowserMCP automation") press_key(key="Enter")
Example 2: Fill and Submit a Login Form
// Step 1: Navigate to login page navigate(url="https://example.com/login") // Step 2: Get snapshot to identify form fields snapshot() // Step 3: Fill username field type(element="Username or email field", ref="e5", text="user@example.com") // Step 4: Fill password field type(element="Password field", ref="e7", text="password123") // Step 5: Click login button click(element="Sign in button", ref="e9") // Step 6: Wait for redirect wait(time=2) // Step 7: Verify successful login with screenshot screenshot()
Example 3: Navigate and Extract Information
// Navigate to documentation navigate(url="https://docs.browsermcp.io") // Wait for page load wait(time=1) // Capture accessibility tree to understand structure snapshot() // Click on a documentation link click(element="API Reference link", ref="e15") // Wait for content to load wait(time=1) // Take screenshot for verification screenshot() // Check for any JavaScript errors get_console_logs()
Example 4: Handle Dynamic Content
// Navigate to page with dynamic content navigate(url="https://example.com/dashboard") // Wait for initial load wait(time=2) // Take snapshot to see available elements snapshot() // Click element that triggers dynamic content click(element="Load more button", ref="e22") // Wait for new content to appear wait(time=2) // Refresh snapshot to see new elements snapshot() // Interact with newly loaded element click(element="New item", ref="e45")
1. Always Use Snapshots for Element Identification
Good: // Take snapshot first, then use exact refs snapshot() click(element="Submit button", ref="e12") Bad: // Guessing selectors without snapshot click(element="button.submit") // May not work with dynamic DOM
2. Wait After Navigation and Major Actions
Dynamic web applications often load content asynchronously. Always wait after: Navigation to a new page Clicking buttons that trigger requests Submitting forms click(element="Load data button", ref="e8") wait(time=2) // Wait for data to load snapshot() // Then get fresh page structure
3. Handle Connection Requirements
Before any automation: Verify the Browser MCP extension is installed Ensure the target tab is connected (user must click "Connect") If connection errors occur, remind the user to reconnect
4. Use Screenshots for Debugging
When interactions fail: // Take screenshot to see current page state screenshot() // Check console for JavaScript errors get_console_logs() // Re-snapshot to see updated element refs snapshot()
5. Respect Privacy and Security
BrowserMCP uses the user's actual browser profile Be cautious with sensitive data User remains logged into their services All actions happen locally on the device
Reference Navigation
FileContentsreferences/setup.mdDetailed installation and configuration for MCP server and Chrome extensionreferences/tools.mdComplete tool reference with parameters and detailed examplesreferences/best-practices.mdAdvanced patterns, error handling, and troubleshooting techniquesreferences/workflows.mdCommon workflow patterns (forms, authentication, scraping, etc.)
Connection Errors
Error: "No connection to browser extension" Solution: User must click the Browser MCP extension icon in Chrome toolbar Click "Connect" button on the target tab Only connected tabs can be automated
Element Not Found
Error: Element reference invalid or element not found Solution: Take a fresh snapshot() - the DOM may have changed Use the new ref values from the updated snapshot Dynamic content may require wait() before snapshot
Action Blocked or Failed
Error: Click/type action didn't work as expected Solution: Take a screenshot() to see current page state Check get_console_logs() for JavaScript errors Verify element is visible and enabled in snapshot Check for browser-level popups or security prompts Ensure the page has finished loading
CAPTCHA or Bot Detection
Note: BrowserMCP helps avoid basic bot detection by using the real browser profile. However: Some sites may still present challenges Rate limiting may apply to rapid interactions User may need to manually solve some CAPTCHAs
Comparison: BrowserMCP vs Playwright MCP
FeatureBrowserMCPPlaywright MCPBrowserUser's existing browserNew browser instanceProfileUses existing profile with cookiesIsolated profileAuthenticationAlready logged inMust log in each sessionBot DetectionLower (real fingerprint)HigherMulti-tabOne tab at a timeMultiple tabs supportedBest ForPersonal automation, testing logged-in flowsTesting, CI/CD, isolated sessions
Tips for Effective Automation
Start with navigate + wait + snapshot - Establish baseline page state Use descriptive element names - Helps with debugging and clarity Take screenshots at checkpoints - Visual verification catches issues early Check console logs after errors - JavaScript errors explain many failures Wait strategically - Too short = flakiness, too long = slowness Refresh snapshots after interactions - DOM changes invalidate old refs Use submit=true for forms - Cleaner than separate press_key("Enter") Combine actions efficiently - Group related operations to minimize round-trips
Resources
BrowserMCP Website: https://browsermcp.io Documentation: https://docs.browsermcp.io Chrome Extension: Search "Browser MCP" in Chrome Web Store GitHub: https://github.com/browsermcp/mcp Based on: Playwright MCP
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
5 Docs1 Config
- SKILL.md
- references/best-practices.md
- references/setup.md
- references/tools.md
- references/workflows.md
- templates/config-template.json