AI-Driven Chrome Extension Development with WXT and Chrome DevTools MCP

The Problem Building a Chrome extension that modifies a third-party web app is a unique challenge. The DOM structure is opaque, class names are minified and change between deployments, and there's no official API to hook into. Traditional extension development looks like this: Inspect the DOM manually in DevTools Write selectors and content scripts Reload the extension Check if it works Repeat This cycle is slow. I wanted an AI coding agent that could see the actual browser state and verify its own changes — not just generate code blindly. That's how I arrived at this stack: WXT for the extension framework, Chrome DevTools MCP for giving the AI agent browser access, and Cursor as the IDE tying it all together. The Stack Tool Role WXT Chrome extension framework (TypeScript, hot reload, Manifest V3) Chrome DevTools MCP MCP server that exposes Chrome DevTools Protocol to AI agents Cursor AI-powered IDE with native MCP support Step 1: WXT with a Fixed CDP Port WXT is a framework that wraps