ChatGPT en Chrome: configuración y modo desarrollador CDP

Qué es la extensión oficial de ChatGPT para Chrome

La ficha oficial de Chrome Web Store se llama actualmente ChatGPT y muestra OpenAI como editor. La ayuda de OpenAI también utiliza el nombre «Codex Chrome extension». Para evitar extensiones de terceros con nombres parecidos, utiliza esta ficha oficial y comprueba la página del editor OpenAI.

Lo que cambia es el contexto de trabajo. Puedes pedir una acción en una aplicación web que ya tienes abierta y seguir el resultado en el navegador que utilizas a diario. El panel de conversación es un punto de entrada; lo interesante es poder leer, navegar e interactuar con una página autorizada.

Navegador integrado o extensión de Chrome: qué cambia

El navegador integrado en la aplicación de escritorio tiene su propio estado de navegación. La extensión permite utilizar tu perfil de Chrome existente, sus pestañas, sesiones y extensiones. Esta diferencia se explica en la ayuda oficial sobre el navegador integrado y Chrome.

Elige el navegador integrado para un entorno de navegación separado o una página de desarrollo local. Utiliza Chrome cuando la tarea dependa de un área de cliente o de un backoffice donde ya has iniciado sesión. Antes de continuar, comprueba el perfil, el dominio y la cuenta mostrados: dos pestañas parecidas pueden corresponder a dos clientes distintos.

Cómo instalar la extensión oficial

1. Abre la extensión ChatGPT en Chrome Web Store. Comprueba que el editor es OpenAI e instálala en el perfil de Chrome que quieras utilizar.
2. Instala o actualiza la aplicación de escritorio de ChatGPT que da acceso a Work y Codex. La ficha de la extensión enlaza a la descarga oficial. No se trata de instalar dos aplicaciones diferentes.
3. Abre la extensión desde su icono en Chrome y sigue las indicaciones para conectarla con la aplicación.
4. Asigna una primera tarea sencilla y después comprueba y autoriza el acceso al sitio cuando se solicite.

La disponibilidad depende de la cuenta, del despliegue y de las reglas de tu organización. Si falta una opción, revisa la documentación actual y la configuración de tu espacio de trabajo para identificar el origen del problema.

Cómo conectar ChatGPT y Codex con Chrome

En la aplicación de escritorio, abre Configuración > Uso del ordenador > Chromey sigue las indicaciones de instalación o gestión. En una interfaz en inglés, los nombres son «Settings», «Computer Use» y «Chrome». El procedimiento actualizado aparece en la documentación de la extensión del navegador.

Si la aplicación solicita un plugin de conexión, sigue ese procedimiento oficial. Después comprueba que la extensión esté activa en el perfil correcto. En la conversación, menciona @Chrome e indica la página correspondiente. Empieza con una lectura: así puedes confirmar el contexto antes de cualquier modificación.

«Utiliza @Chrome en la pestaña de mi área de proveedor. Indica el nombre del sitio, la cuenta activa y la información visible. No modifiques nada.»

Qué puedes pedirle en el navegador

Las tareas más útiles parten de un resultado concreto. Indica el alcance, los datos que debe utilizar, el formato esperado y el momento en que debe detenerse. Estos ejemplos pueden adaptarse a tu actividad, sin dar por hecho que todos los sitios funcionan de la misma manera.

Entender la página abierta en una pestaña

Una guía, un área de cliente o una pantalla llena de opciones: empieza pidiendo una explicación de la página que has autorizado. Indica qué buscas y cuánto detalle necesitas. No hace falta empezar por una tarea técnica.

«Explícame esta página abierta en @Chrome con palabras sencillas. Resume la información importante e indica dónde encontrar el ajuste que busco. De momento, no pulses ningún botón.»

Preparar un formulario para revisión

«Rellena este formulario con los datos facilitados. Identifica los campos obligatorios, selecciona las opciones correspondientes y deja vacías las respuestas dudosas. Detente antes del envío y muéstrame un resumen.»

La revisión final debe comprobar los datos de contacto, los importes, los consentimientos y los archivos adjuntos. Autorizar un sitio no equivale a aprobar todas las acciones posibles. Un envío definitivo o una operación sensible puede activar controles adicionales.

Leer un panel y comparar datos

• Pedidos y compras: comparar referencias, precios, estados o fechas de entrega entre varias páginas.
• Facturas de un proveedor: recoger números, fechas e importes visibles y señalar posibles duplicados para comprobarlos.
• Estadísticas: resumir un panel indicando el periodo, los filtros aplicados y los datos que faltan.
• Backoffice: reunir información de varias pantallas y preparar una tabla útil sin modificar la configuración.
• Tareas repetitivas: preparar una serie de registros o comprobaciones con un punto de revisión antes de cada operación importante.

Para que una comparación sea fiable, pide conservar el enlace o el número de cada elemento. Indica que distinga un dato ausente de un importe cero, un precio sin IVA de otro con IVA y un mes completo de un periodo todavía en curso. Estas precisiones permiten comprobar el resultado.

Revisar un correo y detectar indicios de phishing

También puedes pedir que revise un mensaje mostrado en tu correo web autorizado. Un remitente incoherente, un enlace sospechoso o una petición inusual de datos pueden merecer una comprobación. El objetivo es entender las señales de alerta, sin considerar la respuesta una prueba de autenticidad.

«Revisa este correo abierto y señala los indicios que podrían apuntar a un intento de phishing. Explica tus dudas sin abrir enlaces ni archivos adjuntos. Indica qué habría que comprobar con el remitente por otro canal.»

Esta ayuda para revisar el contenido no es un detector infalible: que no encuentre indicios no garantiza que un mensaje sea legítimo. Si tienes dudas, evita sus enlaces y archivos adjuntos y accede al servicio mediante una dirección conocida. Los formularios, las páginas abiertas y los correos ofrecen primeros usos sencillos antes de explorar las herramientas de diagnóstico para desarrolladores.

Modo desarrollador: para qué sirve el acceso completo a CDP

CDP significa Chrome DevTools Protocol. Para entenderlo sin ser programador, imagina una conexión con los instrumentos de diagnóstico del navegador. La página muestra el resultado; esos instrumentos ayudan a examinar los elementos, los estilos y los intercambios que producen ese resultado.

OpenAI documenta la inspección del DOM, los estilos aplicados, la consola y el tráfico de red, además del perfilado de JavaScript. Son medios para investigar un problema en el navegador real, con autorización explícita. Consulta la sección Developer mode de la documentación oficial.

Activar la opción avanzada

En la aplicación de escritorio: Configuración > Navegador > Modo desarrollador > Habilitar acceso completo a CDP. Los nombres de referencia en inglés son: Settings > Browser > Developer mode > Enable full CDP access. Una organización puede desactivar esta opción.

Activar la opción no elimina la necesidad de revisar la siguiente solicitud. OpenAI prevé una aprobación explícita antes de utilizar el acceso completo en un sitio, porque puede exponer información interna sensible. Para trabajar en Chrome, configura primero la extensión y después utiliza @Chrome.

Seis formas de analizar un problema web

• DOM: examinar la estructura de la página y localizar el elemento afectado. Pregunta útil: ¿qué contenedor provoca que este botón se desborde?
• CSS aplicado: estudiar los estilos realmente utilizados. Pregunta qué regla explicaría un espaciado, una anchura o una visibilidad inesperados.
• Consola: recoger errores y advertencias al reproducir un caso concreto. Un error observado es una pista; por sí solo no demuestra la causa del problema.
• Red / Network: examinar las peticiones relacionadas con la acción que falla. Pide distinguir una respuesta con error, una respuesta vacía y una demora importante.
• JavaScript: orientar la investigación hacia el comportamiento de un script y su perfil de ejecución, y relacionar las observaciones con el caso reproducido.
• Rendimiento: estudiar una traza y los intercambios de red para buscar una ralentización. Compara el mismo recorrido antes y después de una corrección.

Para que la investigación resulte útil, pide un informe en tres partes: observaciones, hipótesis y comprobaciones pendientes. Una frase como «encuentra el problema» mejora si añades la URL, la acción que falla y el comportamiento esperado. Así podrás revisar y reproducir el diagnóstico.

Ejemplos para un desarrollador o administrador de WordPress

Un formulario deja de responder

«En esta página de prueba de @Chrome, reproduce el fallo del formulario con datos de demostración. Examina la consola y las peticiones de red. Explica lo observado, propone una causa probable e indica qué hay que comprobar antes de modificar el código.»

Este enfoque es útil para una petición AJAX que no devuelve el resultado esperado. Recibir una respuesta no significa que el formulario funcione de principio a fin. Comprueba también el mensaje mostrado al usuario y, con un acceso autorizado por separado si hace falta, el efecto esperado en el servidor.

Un cambio en WordPress causa un problema

«Revisa esta página de WordPress en ordenador y móvil. Identifica los errores de consola y los elementos que se desbordan. Compara el resultado con el comportamiento esperado. No desactives ninguna extensión ni publiques cambios durante el diagnóstico.»

Distinguir entre observar y corregir resulta útil en un sitio de cliente. Pide primero una prueba del fallo y después una propuesta limitada. Tras corregirlo, repite el recorrido que fallaba y otro relacionado para comprobar que la mejora no ha trasladado el problema.

Relacionar el navegador con los archivos locales

El trabajo puede combinar Chrome y los archivos locales del proyecto cuando están disponibles las herramientas y los permisos correspondientes. OpenAI describe estos usos en su guía para trabajar con el ordenador y Codex. La extensión no da, por sí sola, acceso al alojamiento ni a todos los archivos de un sitio remoto.

«En el proyecto local autorizado, relaciona el error JavaScript observado en @Chrome con el archivo correspondiente. Prepara una corrección mínima, explícala y comprueba después el resultado en el navegador. No despliegues nada en producción.»

Para situar este método en mi actividad, puedes leer cómo construyo mis agentes con ChatGPT y Codex y el papel de Web Orchestrator en mis trabajos con WordPress.

Seguridad: mantener el control de sitios y acciones

Por defecto, ChatGPT solicita acceso a un sitio nuevo, salvo que exista un permiso guardado o un ajuste más permisivo. Puedes gestionar los sitios permitidos y bloqueados en la configuración. Las restricciones de la organización siguen aplicándose. Estos controles se detallan en la documentación de permisos de la extensión.

• Comprueba la cuenta activa: nombre del cliente, perfil de Chrome, dominio y entorno de pruebas o de producción.
• Limita la tarea: indica qué se puede leer o modificar y en qué momento debe detenerse.
• Revisa las acciones definitivas: publicar, enviar, comprar, eliminar o modificar permisos merece una comprobación concreta.
• Introduce tus credenciales en el navegador: nunca escribas contraseñas ni códigos de acceso en la conversación.
• Reserva el CDP completo para una necesidad real: comprueba el sitio y el objetivo de la solicitud antes de aprobarla.
• Comprueba el resultado: contrasta el resumen con los datos mostrados y una corrección con el recorrido que debía funcionar.

Una página web también puede contener instrucciones engañosas. Mantén como referencia el objetivo indicado en la conversación y detén la tarea si el sitio o la cuenta no son los correctos. Un acceso técnico más potente requiere una instrucción más precisa y una revisión del resultado.

El navegador se convierte en una herramienta de trabajo para el agente

El interés de esta extensión va más allá de tener un asistente al lado de Chrome. Permite encargar una tarea en el contexto real donde trabajas. El modo desarrollador añade herramientas de investigación útiles para profesionales web, pero sigue siendo opcional y sujeto a permisos.

Empieza con una página sin riesgos relevantes, pide una lectura o un formulario preparado para revisión y comprueba el resultado. Pasa al diagnóstico con CDP cuando un problema concreto lo justifique. El objetivo es una acción observable, explicable y controlada.

Para completar esta guía, consulta los usos de la extensión en Chrome y WordPress y los diez comandos útiles para empezar. Este artículo se centra en la configuración, los permisos y el diagnóstico avanzado.

Fuentes oficiales

• Documentación de OpenAI: navegador y modo desarrollador CDP. La dirección facilitada redirige actualmente a ChatGPT Learn.
• Ayuda de OpenAI: navegador integrado y extensión de Chrome.
• Ficha de ChatGPT en Chrome Web Store.
• Página oficial del editor OpenAI.
• Documentación de configuración y permisos de la extensión.