WebMCP Extension

The web is changing — and most people can't see it yet. A new invisible layer is being built behind the websites you visit every day. It's called WebMCP — a browser standard backed by Google that lets AI agents interact with websites directly. Not by clicking buttons and guessing what's on screen, but by calling structured tools that websites deliberately expose for AI use. WebMCP Extension is tool that makes this invisible layer visible to everyone — developers, SEO professionals, and everyday users alike. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT IS WEBMCP? ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Right now, AI agents browsing websites have to visually scan pages like a human — guessing what input fields mean, hoping clicking "Submit" works. This is slow, fragile, and breaks constantly. WebMCP changes that. With WebMCP, websites publish a structured "menu of actions" — called tools — that AI agents can read and call directly. A travel site might expose a searchFlights tool. A healthcare portal might expose a submitApplication tool. A developer dashboard might expose a runDiagnostics tool. The AI doesn't guess anymore — it knows exactly what it can do. This is the Agentic Web. It's being built right now in Chrome 146+. WebMCP Extension shows you every tool on every page, in plain English, with the ability to test them instantly. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FEATURES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔭 INSTANT TOOL DETECTION Open the extension on any page and it automatically scans for WebMCP tools. No configuration, no API keys. If tools exist, you'll see them instantly — described in plain English with everything you need to understand what they do. 🧰 TOOLS TAB — FOR EVERYONE Every detected tool appears as a clean expandable card. See what the tool does, what information it needs, whether it's built with JavaScript or HTML, and what parameters an AI agent would provide. Designed so anyone can understand it — no developer background required. ▶ EXECUTE TAB — FOR POWER USERS Test any tool directly from the extension. A smart input form is automatically generated from the tool's JSON schema. Fill in the fields on the left and watch the JSON update live on the right. Toggle to raw JSON edit mode for precision. Hit Execute and see the result, the response payload, and how long it took — all in one place. 📋 HISTORY TAB Every tool execution is logged. Click any past run to jump back to it, re-run it with the same parameters, or compare results across different inputs. Built for developers iterating on tool schemas and testers validating WebMCP implementations. 💡 LEARN TAB Everything you need to understand WebMCP from scratch. What the protocol is. Why it matters. The difference between MCP (server-side, used by Claude and VS Code) and WebMCP (browser-side, lives on the webpage). The Imperative API (JavaScript) vs. the Declarative API (HTML). How to enable it in Chrome today. Links to Google's official demos, the W3C spec, and the dev preview group. 🌍 15 LANGUAGES English, Español, Français, Deutsch, Português, Italiano, Nederlands, 日本語, 中文, 한국어, العربية, हिन्दी, Русский, Türkçe, Polski. Your language preference saves automatically and persists across sessions. ⚡ SMART AUTO-OPEN (coming soon) When tools are detected on a page, the side panel opens automatically. The toolbar badge shows the tool count at a glance. The extension works silently in the background — you only see it when something is there to see. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FOR REGULAR USERS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ You don't need to know what JSON is. You don't need to understand APIs. Think of WebMCP tools as a restaurant menu for AI agents. Without a menu, a diner guesses what the kitchen can make. With a menu, everything is clear: the dish name, the description, the options. WebMCP tools are that menu. WebMCP Extension shows you the menu — on every page you visit, in whatever language you prefer. Install the extension, visit a WebMCP-enabled page, and a clean side panel opens on the right. Each tool appears as a card with a name, a plain-English description, and a "What it needs" summary. No jargon. No code. Just a clear picture of what AI can do here. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FOR DEVELOPERS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SPEC-ACCURATE DETECTION Uses the correct WebMCP testing API: navigator.modelContextTesting.listTools() — not the commonly misused navigator.modelContext. Handles both Imperative API (registerTool / unregisterTool) and Declarative API (toolname / tooldescription HTML attributes on form elements) correctly. Listens for toolchange events to reflect real-time changes as tools register and unregister based on page state. SIDE-BY-SIDE EXECUTE + JSON The Execute tab generates a typed form from the tool's inputSchema with correct field types inferred from the schema — text, number, date, select for enums, checkbox for booleans. The live JSON panel updates as you type. Flip to raw JSON mode for edge-case inputs. Results include the full response payload, success/error status, and execution time. LIGHTWEIGHT AND STANDARD-COMPLIANT No external servers. No data collection. No tracking. Everything runs locally via standard Chrome MV3 APIs. Permissions requested: activeTab, scripting, storage, sidePanel, tabs — each used for a specific function, nothing more. BUILT ON THE RIGHT FOUNDATIONS The extension correctly handles the early-preview edge cases that trip up most DIY implementations: the toolchange event for live tool registration updates, the agentInvoked flag on submit events that lets sites behave differently for AI vs. human interactions, and the CSS pseudo-classes (:tool-form-active, :tool-submit-active) that Chrome applies for visual feedback. It also correctly distinguishes between navigator.modelContextTesting (the inspection and testing API used by this extension) and navigator.modelContext (the production API used by actual AI agents) — a distinctio…