Los agentes de programación con 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 codificació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 codificació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 según lo previsto, Herramientas para desarrolladores de Chrome para agentes permite que los asistentes de programación basados en IA depuren extensiones directamente en Chrome y se beneficien de las capacidades de depuración y las estadísticas de rendimiento de las Herramientas para desarrolladores.
Configuración
Orientación para la Web moderna
Para usar el paquete de habilidades, instala Modern Web Guidance en tu entorno preferido y agrégale la habilidad de extensiones. A continuación, se incluyen las instrucciones para algunas de las herramientas más populares.
CLI
La instalación recomendada para la mayoría de los agentes de programación (incluidos Gemini CLI, Claude Code y Codex) se realiza a través de la CLI de modern-web-guidance compilada 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
Se ejecutará un asistente interactivo para instalar las habilidades según tus preferencias. Cuando se te presenten opciones, selecciona tus agentes de codificación y elige chrome-extensions y modern-web-guidance.
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.
Herramientas para desarrolladores de Chrome para agentes de programación
Puedes agregar las Herramientas para desarrolladores de Chrome para agentes a tu agente de programación preferido como un complemento, una extensión o un servidor de MCP.
Estas son las instrucciones para algunos de los asistentes más populares.
Antigravity
Para usar el servidor de MCP de Herramientas para desarrolladores de Chrome, sigue las instrucciones de los documentos de Antigravity para instalar un servidor de MCP personalizado. Agrega lo siguiente a la configuración de los servidores de MCP:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--category-extensions",
"-y"
]
}
}
}
Claude Code
claude mcp add chrome-devtools --scope project -- npx chrome-devtools-mcp@latest --categoryExtensions
Otros agentes
Para obtener instrucciones sobre cómo configurar otros agentes, consulta la documentación en GitHub de MCP de Herramientas para desarrolladores de Chrome.
Instrucciones para el agente de CHROMEWEBSTORE.md
Una parte importante de la publicación de una extensión es completar el panel del desarrollador. La habilidad aborda este problema haciendo que tu agente de codificació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 "Publiquemos esto" o "Prepara esta extensión para la tienda", pero, para optimizar tus flujos de trabajo de agente, 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 la guía de la Web moderna ayuda a los agentes de tres maneras clave:
- Conocimiento actualizado de las APIs: 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.
La guía de la Web moderna 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 integradas de la API de IA garantizan que los agentes de codificación de IA siempre usen la versión más reciente de la API junto con información adicional sobre reglas arquitectónicas explícitas y restricciones de hardware para usar estas APIs, lo que permite una administración eficiente de las descargas de modelos, un enfoque en la seguridad y estrategias de resguardo elegantes.
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 codificación que cree una extensión con la API de Side Panel y que la publique en Chrome Web Store, el agente reconocerá que necesita el permiso sidePanel. Luego, se creará un archivo CHROMEWEBSTORE.md con una justificación. Cuando esté todo listo para enviar la justificación, puedes revisarla, 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 basados en IA instalen y depuren extensiones en una instancia de Chrome en ejecución, específicamente:
- Instalar y desinstalar extensiones
- Enumera todas las extensiones instaladas y vuelve a cargarlas.
- Activar acciones de extensiones
- Inspecciona cada superficie de tu extensión (ventana emergente, panel lateral, service worker).
Aquí tienes 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 de manifiesto V3 y solicitar el permiso storage porque sabe que necesita conservar datos. Ahora el agente puede compilar una extensión, instalarla, verla en ejecución y verificar su estabilidad sin que salgas de la interfaz de chat.
Este es un ejemplo sencillo de instrucciones. Para obtener más información sobre las diferentes técnicas de instrucciones y descubrir qué funciona mejor para 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 skill 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 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 propósito único 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 el rechazo de la tienda: Si se rechaza o marca tu extensión durante el proceso de revisión, puedes indicarle directamente al agente el motivo del rechazo y pedirle que actualice los 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 más rápido, 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.