A powerful skill that allows AI agents to control a local Chrome browser via the MCP chrome-devtools protocol for automated navigation and interaction.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install m5stack-chrome-browser-control
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install m5stack-chrome-browser-control using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is M5Stack Chrome Browser Control?
The M5Stack Chrome Browser Control skill empowers your AI agent to interact directly with your local Google Chrome instance. By utilizing the Model Context Protocol (MCP) and chrome-devtools, the agent can perform tasks ranging from simple web navigation to complex interactions within authenticated sessions. This is a core component for users looking to expand their Openclaw Skills into the realm of web automation without the overhead of standalone headless drivers.
This skill is particularly effective because it works with your existing browser profile, meaning it can leverage active login cookies for services like Outlook or social media platforms. It transforms your browser into an accessible tool for an AI agent to read content, fill forms, and manage web-based workflows in real-time.
M5Stack Chrome Browser Control Use Cases
- Automated reading and management of Outlook emails using your existing browser login.
- Searching and summarizing live content on X (Twitter) by navigating directly to search results.
- Automating repetitive data entry tasks across internal company portals or public websites.
- Extracting specific data from complex web pages that require JavaScript execution.
- Monitoring web dashboards and taking automated screenshots or snapshots for reporting.
How M5Stack Chrome Browser Control Works
- The user enables the Remote Debugging feature within their local Chrome browser on port 9222.
- Openclaw initializes the chrome-devtools-mcp server to establish a bridge to the browser instance.
- The agent identifies active browser tabs and retrieves their unique page IDs using the list pages tool.
- Navigation commands are sent to open new URLs or refresh existing pages as required by the task.
- The agent captures an accessibility tree (snapshot) to identify interactable elements like buttons and input fields.
- Commands such as click, fill, or wait_for are executed to interact with the page content programmatically.
M5Stack Chrome Browser Control Setup
First, ensure your local Chrome browser has remote debugging enabled. Open Chrome and navigate to chrome://inspect/#devices, then enable the Remote debugging toggle. Confirm that the server is running at 127.0.0.1:9222.
Next, configure your Openclaw environment by adding the following MCP server to your ~/.openclaw/openclaw.json file:
{
"mcp": {
"servers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--autoConnect"
]
}
}
}
}
Finally, restart your gateway to apply the changes to your Openclaw Skills setup:
openclaw gateway restart
M5Stack Chrome Browser Control Data Schema & Taxonomy
The skill organizes browser interaction data through specific identifiers and metadata structures:
| Attribute | Description |
|---|---|
| pageId | A unique string identifier for each open tab or window in the browser session. |
| Accessibility Tree | A hierarchical representation of visible elements used by the agent to understand page structure. |
| uid | A unique element ID extracted from the accessibility tree used for targeted clicks and text entry. |
| Screenshot | Binary image data of the current viewport for visual verification. |
| Navigation Type | Defines whether the agent performs a new URL navigation or a page reload. |
M5Stack Chrome Browser Control Advanced Features
- Intelligent tab management allows the agent to switch between multiple active workflows seamlessly.
- Snapshot-based interaction uses the accessibility tree to ensure high accuracy when identifying buttons and form fields.
- Deep integration with Openclaw Skills allows for cross-tool automation, such as saving browser data to local files.
- Support for wait_for triggers ensures the agent handles dynamic, slow-loading content without failing.
- Screenshot capabilities provide visual debugging for complex UI states that are hard to parse via text.
SKILL.md
Loading
Related Openclaw Skills
go2Travel
An intelligent travel planning agent that leverages real-time Fliggy data to provide comprehensive itineraries, bookings, and travel guides.
Team Outing Planner
An intelligent assistant for planning corporate team-building events by analyzing member preferences and real-time travel data.
Smart Router Omni
Smart Router Omni is a universal routing engine that intelligently selects and chains the most effective AI tools based on environmental signals and task requirements.
HN News: AI & Agent Stories
A specialized news aggregator that fetches and formats the latest Hacker News discussions focused on AI, autonomous agents, and Claude.
Walmart Seller Guide
A comprehensive strategic guide for mastering the Walmart Marketplace, covering everything from initial application to advanced fulfillment and advertising.
Influencer Outreach
A comprehensive toolkit for discovering, negotiating with, and managing influencer partnerships across major social platforms.
Featured*
