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-mcpes 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, y qué es esa barra de Claude started debugging this browser que Chrome saca en todas las pestañas.
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:
| Necesitas | Extensión | DevTools MCP |
|---|---|---|
| Escribir en Docs, Gmail o Notion con tu sesión iniciada | Sí | No (Chrome limpio, sin cookies) |
| Performance trace, Lighthouse, heap snapshot | No | Sí |
| Emular móvil, red 3G o CPU lenta | No | Sí |
| Grabar la sesión como GIF | Sí | No |
| Usarlo con API key, Bedrock u otro cliente MCP | No | Sí |
| Depurar localhost: consola, clic, screenshots | Sí | Sí |
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
| Extensión Claude in Chrome | Chrome DevTools MCP | |
|---|---|---|
| Quién lo hace | Anthropic | Equipo de Chrome (Google) |
| Instalación | Web Store + claude --chrome |
claude mcp add chrome-devtools ... |
| Navegador | El tuyo, visible, con tus logins | Uno propio con perfil limpio |
| Requiere | Plan directo + /login, extensión v1.0.36+ |
Node.js LTS + Chrome |
Y si usas Desktop, hay una tercera vía que no es ninguna de estas dos: el navegador que trae la app, con perfil limpio y sin instalar nada. Hay una cuarta, del mismo lado del mapa que el MCP: Playwright MCP, que en lugar del profiler te da el árbol de accesibilidad en texto, mucho más económico en contexto cuando lo que quieres es que Claude compruebe su propio cambio y se corrija.
Documentación oficial: Use Claude Code with Chrome · Chrome DevTools MCP