La extensión de Claude para Chrome vs Chrome DevTools MCP: cuál necesitas de verdad (yo uso los dos)

TL;DR La extensión Claude in Chrome es Claude usando TU navegador, con tus sesiones de Google Docs, Gmail o Notion ya iniciadas: cero APIs, cero conectores. chrome-devtools-mcp es Claude como developer con las DevTools abiertas en un Chrome limpio: traces, Lighthouse, emulación. Se solapan en lo básico (navegar, clic, leer la consola) y por eso todo el mundo las confunde. Yo uso la extensión para tareas administrativas y el MCP a diario: entre un 20 y un 25% de mi inferencia se me va ahí.

Hay dos formas de darle un navegador a Claude Code, y las confundía hasta yo, que uso una de ellas a diario. No es culpa tuya: entre "Claude for Chrome", "Claude in Chrome", "la extensión" y "Chrome DevTools MCP", el naming parece diseñado para despistar. Este es el mapa que me habría gustado leer.

Primero, el lío de nombres

Claude for Chrome y Claude in Chrome son el mismo producto: la extensión oficial de la Chrome Web Store. El marketing usa un nombre y la documentación el otro. No existe una versión "sin extensión": Claude Code habla con Chrome por native messaging, un canal que solo puede terminar en una extensión. Si no la tienes instalada, /chrome te enseña el diálogo de instalarla y se queda esperando.

Y la tercera capa: Cowork tampoco tiene navegador propio. Se conecta a la misma extensión como connector. Una sola extensión, cuatro clientes: el sidebar en cualquier web, Claude Code, Claude Desktop y Cowork.

La extensión: Claude como usuario de tu navegador

claude --chrome (o /chrome en sesión) conecta Claude Code con tu Chrome real, el que tienes abierto, con tus cookies y tus logins. Por eso puede hacer esto sin conectar ninguna API:

> Redacta el resumen semanal a partir de los últimos commits
  y añádelo a mi Google Doc docs.google.com/document/d/abc123

⏺ Opening tab → docs.google.com
  Clicking into the editor...
  Typing summary (3 paragraphs)...
  Done: draft added to "Weekly notes"

Nada de OAuth, nada de conectores de Google o Notion: abre la pestaña, hace clic en el editor y teclea, como harías tú. Si se topa con un login o un CAPTCHA, se detiene y te lo pide. Y puede grabar la sesión entera como GIF para documentar el flujo.

La letra pequeña: requiere plan directo de Anthropic (Pro, Max, Team o Enterprise) con /login. Con API key, setup-token o Bedrock/Vertex queda desactivada. La integración de Claude Code funciona oficialmente en Chrome y Edge, y también detecta y configura la extensión en Brave, Arc, Vivaldi y Opera (en WSL no); el sidebar de la extensión por su cuenta, de momento, sigue siendo cosa de Chrome y Edge. El setup completo lo tienes en Claude Code abre Chrome y depura tu frontend.

El MCP: Claude como developer con las DevTools abiertas

chrome-devtools-mcp es un servidor MCP oficial del equipo de Chrome, con Puppeteer y el protocolo CDP por debajo. Arranca su propio Chrome con un perfil limpio, sin tus cookies, y le da a Claude acceso programático a todo lo que tú ves en las DevTools: performance traces con insights, auditorías Lighthouse, heap snapshots, emulación de móvil, de red lenta y de CPU, consola con stack traces.

claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest

Este es mi caballo de batalla: entre un 20 y un 25% de mi inferencia se va aquí. Primera pasada de tests end to end, iterar sobre diseños, cazar problemas de LCP y latencia. Con Sonnet la velocidad es casi humana. Y la diferencia con un test de tu IDE es la que importa: no es un script que se rompe con el primer cambio, es un LLM que mira la página y decide sobre la marcha. El flujo completo con Figma lo tienes en el agente que busca el pixel perfect.

Como es un servidor MCP normal, da igual cómo pagues: funciona con API key, con Bedrock, y con cualquier cliente MCP, no solo Claude Code.

El solape que confunde (y la mitad exclusiva de cada uno)

Los dos navegan, hacen clic, rellenan formularios, sacan screenshots, leen la consola y la red, y ejecutan JavaScript. Para depurar tu localhost valen los dos, y ahí es donde todo el mundo se pierde. La decisión está en las mitades exclusivas:

El modelo mental que lo desenreda: la extensión es Claude actuando como usuario de tu navegador (tu sesión, tus pestañas, tu vida dentro). El MCP es Claude actuando como developer en un laboratorio (perfil limpio, profiler, reproducible). No compiten: cada uno tiene una mitad que el otro no puede tocar.

Referencia

Documentación oficial: Use Claude Code with Chrome · Chrome DevTools MCP