Crea extensiones con agentes de programación

Los agentes de programación de IA, como Antigravity, ahora pueden generar código de extensión con una precisión impresionante. Sin embargo, para aprovechar al máximo su potencial y garantizar resultados de alta calidad, debes proporcionarles el contexto y las herramientas adecuados.

En esta guía, se explica cómo configurar las herramientas adecuadas en tus agentes de programación y cómo pueden ayudarte a crear mejores extensiones con mayor rapidez.

Creamos una habilidad para agentes de programación diseñada específicamente para el desarrollo de extensiones. Esta habilidad forma parte de nuestra iniciativa más amplia, Modern Web Guidance, que proporciona a los agentes de programación de IA la experiencia en la plataforma web, las prácticas recomendadas y los patrones de API modernos.

Sin embargo, crear la extensión es solo el primer paso. Para ayudarte a verificar que tu código funcione como se espera, las Herramientas para desarrolladores de Chrome para agentes permiten que los asistentes de programación de IA depuren extensiones directamente en Chrome y aprovechen las capacidades de depuración de las Herramientas para desarrolladores y las estadísticas de rendimiento.

Configuración

Modern Web Guidance

Para usar el paquete de habilidades, instala Modern Web Guidance en el entorno que prefieras y agrégale la habilidad de extensiones. Estas son las instrucciones para algunas de las herramientas populares.

CLI

La instalación recomendada para la mayoría de los agentes de programación (incluidos Gemini CLI, Claude Code y Codex) es a través de la CLI de modern-web-guidance creada por el equipo de Chrome. Si instalas las habilidades a través de la CLI de modern-web-guidance, se mantendrán actualizadas automáticamente.

  npx modern-web-guidance@latest install --choose

Esto ejecuta un asistente interactivo para instalar las habilidades según tus preferencias. Cuando se te presenten opciones, selecciona tus agentes de programación y elige chrome-extensions y modern-web-guidance.

Instrucción del selector de la CLI de Modern Web Guidance.
Selección de chrome-extensions y modern-web-guidance en el asistente de instalación.

Antigravity

Cuando instales Antigravity, puedes seleccionar el complemento Modern Web Guidance , que incluye la habilidad de extensiones, o puedes agregarlo a través de Customizations > Build With Google Plugins > Modern Web Guidance.

Complemento Modern Web Guidance en la pantalla de instalación de Antigravity.
Selección del complemento Modern Web Guidance durante la instalación de Antigravity.

Modern Web Guidance en los complementos de Build With Google en las personalizaciones de Antigravity
Adición de Modern Web Guidance a través de Customizations después de la instalación.

Herramientas para desarrolladores de Chrome para agentes de programación

Puedes agregar las Herramientas para desarrolladores de Chrome para agentes al agente de programación que elijas como un complemento, una extensión o un servidor de MCP.

Estas son las instrucciones para algunos de los agentes más populares.

Antigravity

  1. Descarga el IDE de Antigravity (no se recomienda Antigravity, ya que no te permite editar manualmente la configuración del servidor de MCP).

  2. Al inicio o en Settings > Customizations, en Build with Google, habilita Herramientas para desarrolladores de Chrome. Esto solo instalará la habilidad de las Herramientas para desarrolladores de Chrome, pero no el servidor de MCP.

    Opciones de casillas de verificación de Herramientas para desarrolladores y orientación sobre la Web moderna en la interfaz de configuración de Antigravity
    Habilitación de Modern Web Guidance y las Herramientas para desarrolladores de Chrome durante el inicio o las personalizaciones.

  3. Para agregar el servidor de MCP de las Herramientas para desarrolladores de Chrome, ve a Settings > Customization, haz clic en el botón Add MCP server y busca las Herramientas para desarrolladores de Chrome.

    El diálogo de búsqueda Add MCP server en Antigravity que muestra las Herramientas para desarrolladores de Chrome en los resultados de la búsqueda.
    Búsqueda de las Herramientas para desarrolladores de Chrome en la ventana Add MCP server
    Instalación del servidor de MCP de las Herramientas para desarrolladores de Chrome en la interfaz de Antigravity
    Instalación del servidor de MCP de las Herramientas para desarrolladores de Chrome.
    La lista de personalización que muestra las Herramientas para desarrolladores de Chrome agregadas a los servidores de MCP activos.
    Servidor de MCP de las Herramientas para desarrolladores de Chrome que aparece en Customizations

  4. Haz clic en Open MCP Config para abrir la configuración del servidor de MCP. Ten en cuenta que debes cerrar la configuración para ver el archivo de configuración en el IDE.

    La ventana de configuración de Personalización en la que se muestra el botón Abrir configuración de MCP.
    Ubicación del botón Open MCP config en la configuración.

  5. Agrega los siguientes dos parámetros de configuración: --categoryExtensions (para habilitar las herramientas de extensiones) y --autoConnect (para habilitar la conexión a un perfil de Chrome existente, que es necesario cuando se usan las APIs de IA integradas de Chrome o se requiere acceder).

    {
 "mcpServers": {
   "chrome-devtools-mcp": {
     "args": [
       "-y",
       "chrome-devtools-mcp@latest",
       "--categoryExtensions",
       "--autoConnect"
     ],
     "command": "npx"
   }
 }
}

  6. Para habilitar la depuración remota, abre Chrome, navega a chrome://inspect/#remote-debugging y selecciona Allow remote debugging for this browser instance.

    La página chrome://inspect que muestra las casillas de verificación para la depuración remota.
    Habilitación del parámetro Allow remote debugging for this browser instance en Chrome.

  7. Reinicia el IDE de Antigravity.

  8. Crea un espacio de trabajo nuevo y una instrucción de prueba: "Create a hello world extensión de Chrome. Prueba con las Herramientas para desarrolladores de Chrome. Cuando el agente inicie la prueba de la extensión en el navegador, Chrome te mostrará un diálogo en el que se solicita permiso de depuración remota. Selecciona Allow. Mientras esté habilitada la sesión de depuración remota, Chrome mostrará el banner "Un software de prueba automatizado está controlando Chrome".

<figure>
  <img src="image/antigravityide--u84rk62f5t9.png" alt="The remote debugging warning banner and approval popup dialog in Chrome." class="screenshot" width="800">
  <figcaption>The remote debugging banner indicating automated browser control is active.</figcaption>
</figure>

Claude Code

  claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions --autoConnect

Otros agentes

Para obtener instrucciones sobre cómo configurar otros agentes, consulta la documentación de Herramientas para desarrolladores de Chrome MCP GitHub.

Instrucciones del agente CHROMEWEBSTORE.md

Una parte importante de la publicación de una extensión es completar el Panel del desarrollador. La habilidad aborda esto haciendo que tu agente de programación cree y mantenga un archivo CHROMEWEBSTORE.md que haga un seguimiento de la información necesaria, incluidas las justificaciones de cada permiso solicitado en el código.

La habilidad se activará cuando uses frases como "Let's publish this" o "Prepare this extension for the store", pero para optimizar tus flujos de trabajo de agentes, agrega lo siguiente a las instrucciones del sistema de tu agente (por ejemplo, ~/.gemini/GEMINI.md para Antigravity o ~/.claude/CLAUDE.md para Claude):

Whenever you are creating or making changes to a Chrome extension, create and manage a CHROMEWEBSTORE.md file. You can use the chrome-extensions skill to learn about the format of this file.

Compila y prueba tu extensión con agentes de programación

La habilidad de extensión incluida en Modern Web Guidance ayuda a los agentes de tres maneras clave:

  • Conocimiento actualizado de la API: Les enseña a los agentes sobre las APIs más recientes, que pueden haberse lanzado después de que se entrenó el modelo que estás usando.
  • Prácticas recomendadas: Garantiza que los agentes tengan acceso a todas las prácticas recomendadas que nuestro equipo aprendió a lo largo de los años creando extensiones de Chrome.
  • Preparación para el envío: Realiza un seguimiento de la información que podrías necesitar para enviar tu extensión a Chrome Web Store, lo que facilita la distribución.

Modern Web Guidance también incluye habilidades que abarcan todo lo que necesitas para brindar una excelente experiencia del usuario, como el rendimiento, la accesibilidad y las APIs modernas. Por ejemplo, las habilidades de la API de IA integrada garantizan que los agentes de programación de IA siempre usen la versión más reciente de la API junto con información adicional sobre las reglas arquitectónicas explícitas y las restricciones de hardware para usar estas APIs, lo que permite una administración eficiente de las descargas de modelos, se centra en la seguridad y en las estrategias de resguardo correctas.

La habilidad también ayuda a tu agente a hacer un seguimiento de la información necesaria para la publicación, incluidas las justificaciones de cada permiso solicitado en el código. Por ejemplo, si le pides a tu agente de programación que cree una extensión con la API de Side Panel y la publique en Chrome Web Store, el agente reconocerá que necesita el permiso sidePanel. Luego, creará un archivo CHROMEWEBSTORE.md con una justificación. Cuando esté todo listo para enviar, puedes revisar esta justificación, realizar los ajustes necesarios y copiarla directamente en el Panel del desarrollador.

Las Herramientas para desarrolladores de Chrome para agentes permiten que los asistentes de programación de IA instalen y depuren extensiones en una instancia de Chrome en ejecución, específicamente:

  • Instalar y desinstalar extensiones
  • Mostrar una lista de todas las extensiones instaladas y volver a cargarlas
  • Activar acciones de extensión
  • Inspeccionar cada superficie de tu extensión (ventana emergente, panel lateral, service worker)

Esta es una instrucción y un video que muestran cómo funciona en la práctica:

Build a simple "Quick notes" extension that opens a popup text area to save notes and test it in the browser.

En este caso, el agente debe crear un archivo Manifest V3 y solicitar el permiso storage porque sabe que necesita conservar los datos. Ahora, el agente puede crear una extensión, instalarla, verla ejecutar y verificar su estabilidad sin que salgas de la interfaz de chat.

Este es un ejemplo de instrucción simple. Para obtener más información sobre las diferentes técnicas de instrucciones y encontrar lo que mejor se adapte a tu caso de uso, consulta nuestra guía sobre ingeniería de instrucciones.

Ejemplos de instrucciones para optimizar la distribución con CHROMEWEBSTORE.md

Si bien instalar la habilidad de extensión y agregar instrucciones a tu agente hará la mayor parte del trabajo, ser específico en tus instrucciones puede producir mejores resultados para la etapa de desarrollo en la que te encuentras. Esta es una guía rápida para indicarle a tu agente que cree, actualice y mantenga tu archivo CHROMEWEBSTORE.md.

  • Publicación por primera vez: Cuando tu extensión esté completa en cuanto a funciones y quieras generar tu presencia inicial en la tienda.
Prepare the extension for publication on the Chrome Web Store.
  • Actualización de permisos y justificaciones: Chrome Web Store aplica la política de un solo propósito y requiere justificaciones detalladas para cada permiso solicitado en tu manifest.json.
We just added the 'declarativeNetRequest' and 'storage' permissions to our manifest. Let's update our store listing.
  • Cómo controlar un rechazo de la tienda: Si tu extensión se rechaza o se marca durante el proceso de revisión, puedes darle el motivo del rechazo directamente al agente y pedirle que actualice tus metadatos de cumplimiento.
Our extension submission was rejected because our privacy policy doesn't explicitly mention how we handle user data locally. Let's update the privacy policy section in CHROMEWEBSTORE.md to resolve this.

Conclusión

Combinar las habilidades de Modern Web Guidance con las Herramientas para desarrolladores de Chrome para agentes te ayuda a crear funciones de alta calidad con mayor rapidez, pero también garantiza que tu extensión sea estable y esté lista para enviarse a Chrome Web Store.

Comienza a experimentar con estas herramientas en tu próximo proyecto para ver cómo pueden optimizar el desarrollo de tu extensión desde el prototipo inicial hasta la publicación.