Building Chrome Extensions That Bridge AI Agents to Your Browser

Building Chrome Extensions That Bridge AI Agents to Your Browser AI agents can read files, call APIs, and write code. But they cannot see what is on your screen, click a button in a web app, or read the DOM of the page you are looking at. The browser remains a walled garden -- unless you build a bridge. This tutorial shows you how to build a Chrome extension that exposes browser state to AI agents through two patterns: a CDP (Chrome DevTools Protocol) relay that proxies low-level browser commands, and an MCP (Model Context Protocol) bridge that wraps those capabilities as structured tools. By the end, you will have a working TypeScript extension (Manifest V3) that lets any MCP-compatible agent read pages, fill forms, and navigate the web using your authenticated session. Why an Extension and Not Just Puppeteer? The obvious question: why build an extension when you can connect to Chrome over CDP directly? Three reasons make extensions the right choice for agent-browser integration: 1. N