Chrome DevTools para agentes permite que tu agente inicie una sesión del navegador y que instale extensiones de Chrome o interactúe con ellas mediante un servidor de MCP. Esto permite que tu agente de codificación controle el ciclo de vida de la extensión: instalación, recarga y activación de acciones.
En lugar de cargar manualmente una extensión sin empaquetar, hacer clic en el botón de recarga en la página de administración de extensiones cada vez que cambias el código y activar manualmente la extensión para probarla, indica a tu agente de IA que administre todo el proceso de forma autónoma. Esto cierra la brecha entre la generación de código estático y las pruebas de extensión en vivo.
Puedes usar las herramientas de extensiones para hacer lo siguiente:
- Instalar extensiones: Instala una extensión de Chrome sin empaquetar desde una ruta de directorio local.
- Mostrar extensiones: Recupera una lista de todas las extensiones de Chrome instaladas, incluidos su nombre, ID, versión y estado habilitado.
- Recargar extensiones: Vuelve a cargar una extensión de Chrome sin empaquetar por su ID para aplicar los cambios de código de inmediato.
- Activar acciones: Activa la acción predeterminada de una extensión por su ID,
como abrir un menú o ejecutar una acción de secuencia de comandos en segundo plano (consulta
chrome.action en la documentación
de la API).
- Desinstalar extensiones: Quita una extensión de Chrome de la sesión del navegador por su ID.
Requisitos previos
Antes de usar las herramientas de extensiones, asegúrate de tener lo siguiente:
- Marca experimental: La categoría Extensiones no está activa de forma predeterminada en DevTools para agentes. Debes configurar el servidor MCP con la
--categoryExtensionsmarca. - Extensiones sin empaquetar: Las herramientas como
install_extensionrequieren una ruta absoluta a la carpeta de extensión sin empaquetar, lo que las hace ideales para el desarrollo local.
Casos de uso de las herramientas de extensiones de Chrome
Indica a tu agente que administre el ciclo de vida de tu extensión mientras desarrollas y corriges errores.
Nota: Los pasos de ejecución del agente son ejemplos de comportamiento potencial. Es posible que tu agente actúe de manera diferente.
Itera y vuelve a cargar una extensión rápidamente
Volver a cargar manualmente una extensión después de cada cambio de archivo ralentiza el desarrollo. Indica a tu agente que aplique una corrección de código y vuelva a cargar la extensión de inmediato para verificar el nuevo comportamiento sin intervención manual.
Ejemplo de instrucción:
Puedes usar un enfoque general:
Verify the extension has access to the active tab.
O puedes ser más detallado:
Update the manifest.json to include the "activeTab" permission. Then, reload the extension with ID 'abc123xyz' and trigger its default action to ensure it works.
Ejemplo de ejecución del agente: Tu agente edita el archivo manifest.json en tu sistema de archivos. Luego, invoca la herramienta reload_extension con el ID proporcionado.
Por último, llama a la herramienta trigger_extension_action para activar la extensión y verificar que no se arrojen errores de permisos en la consola.
Prueba la acción predeterminada de una extensión en una página de destino
A menudo, debes probar cómo interactúa una secuencia de comandos de contenido o una acción de extensión con un sitio web específico. Para automatizar este proceso, indica a tu agente que navegue al sitio, instale la extensión y la active.
Ejemplo de instrucción:
Puedes usar un enfoque general:
Test my extension on example.com and verify it works correctly.
O puedes ser más detallado:
Navigate to example.com, install the unpacked extension located at '/Users/dev/my-extension', and trigger the extension action. Check the console logs to verify the content script executed correctly.
Ejemplo de ejecución del agente: Tu agente navega a la URL de destino con navigate_page. Luego, usa install_extension con la ruta absoluta proporcionada. Una vez que se carga la extensión, ejecuta trigger_extension_action para simular un clic del usuario. Por último, usa list_console_messages para confirmar que la secuencia de comandos de contenido se ejecutó y produjo el resultado esperado.
Verifica las extensiones instaladas y realiza una limpieza
Durante las pruebas automatizadas, es posible que debas verificar si una extensión se carga correctamente con la versión correcta o quitarla para garantizar un estado limpio para la siguiente prueba.
Ejemplo de instrucción:
Uninstall 'My Test Extension' from the browser.
Ejemplo de ejecución del agente: Tu agente usa la herramienta list_extensions para recuperar la lista de extensiones instaladas y sus metadatos. Analiza el resultado para identificar el ID asociado con "My Test Extension". Luego, usa la herramienta uninstall_extension con ese ID para quitarla de forma segura del navegador.
Crea una extensión nueva y pruébala
Por lo general, para iniciar una nueva extensión de Chrome desde cero, se requiere crear archivos de código estándar y cargar manualmente el directorio sin empaquetar en el navegador para probarla. Para omitir esta configuración manual, indica a tu agente que genere el código inicial, cargue la extensión y verifique su funcionalidad básica de extremo a extremo en un solo paso.
Ejemplo de instrucción:
Build a Chrome extension that turns the page background gray when I click its icon. Save the files to '/tmp/gray-bg-ext', navigate to example.com, load the extension, and verify that it works.
Ejemplo de ejecución del agente: Tu agente crea un manifest.json básico de Manifest V3 y un service worker en segundo plano que escucha el evento chrome.action.onClicked. Luego, navega a la página de prueba, invoca install_extension y usa trigger_extension_action para simular un clic del usuario. Por último, inspecciona el DOM o toma una captura de pantalla para confirmar que el fondo se volvió gris, lo que demuestra que el código estándar es funcional.