Durante los últimos dos años tuve la idea y las ganas de crear extensiones reales para Chrome pero siempre me faltó la dirección, las herramientas adecuadas y recursos claros. Las extensiones modernas con Manifest V3 traen una arquitectura compleja, tareas de configuración tediosas y documentación dispersa, así que muchas ideas se quedaron a medias. Todo cambió en el Kiroween Hackathon: en solo 36 horas diseñé y construí la plantilla de extensión de Chrome con la que había soñado
Presento Extension Bro — Skeleton Crew, una plantilla lista para producción, preparada para IA, basada en React + Vite + TypeScript, con un generador, un sistema de diseño y dos extensiones de ejemplo funcionales. Esta es la historia de cómo lo hice, lo que aprendí y cómo Kiro aceleró todo el proceso
El empujón del hackathon me obligó a dejar las excusas y atacar los problemas que siempre me detuvieron: cómo integrar React y Vite correctamente, manejar service workers con Manifest V3, orquestar la mensajería entre popup, background y content scripts, gestionar el almacenamiento de Chrome, optimizar iconos y scripts de build e integrar capacidades de IA. Estas fricciones mataban la motivación, pero con Kiro encontré herramientas que permitieron automatizar y estandarizar muchas decisiones
Cómo Kiro potenció el desarrollo
Vibe coding para ajustar UI, corregir bugs y optimizar rendimiento, reduciendo el tamaño del bundle hasta darle una sensación de producto SaaS. Agent hooks que me ahorraron horas de depuración asegurando consistencia en salidas y evitando errores triviales. Y sobre todo steering, la capacidad de guiar a la IA para limitar o potenciar aspectos de diseño, calidad de componentes, paletas de color y reglas arquitectónicas. Definir requisitos claros permitió obtener resultados de diseño a nivel SaaS con la velocidad de la IA
Hubo un momento mágico: con un solo prompt bien estructurado pedí una interfaz pulida e integrada con IA y Kiro generó casi toda la extensión funcional. Dos revisiones y ya tenía una versión operativa. Eso me demostró que con la estructura correcta la IA puede multiplicar por diez la productividad
Qué construí en 36 horas
La plantilla Extension Bro — Skeleton Crew incluye una arquitectura React + Vite + TypeScript totalmente tipada, build multi-entry con Vite, popup, content scripts y service worker bajo Manifest V3, salida optimizada con rollup, hot reload para el popup, tokens de diseño con Tailwind, tema luxury con glassmorphism, degradados y animaciones. Añadí un generador CLI que crea carpetas nuevas, actualiza el manifest, genera iconos, instala dependencias y deja un entorno listo para desarrollo sin artefactos basura
Funciones de IA y ejemplos reales: construí dos extensiones de muestra sobre la plantilla. Is True una comprobadora de hechos que usa integraciones de IA para verificar selecciones de texto desde el menú contextual y mostrar veredicto y confianza en un modal elegante. Spam Detector una extensión que analiza páginas en tiempo real desde el background, escanea contenido, muestra overlays de advertencia y mantiene un estado persistente de activación. Ambos ejemplos muestran cómo combinar agentes IA, análisis en background y UI avanzada
Tecnologías empleadas React 18, TypeScript, Vite, Tailwind CSS, Manifest V3, Google Gemini AI, Node.js para el generador y la metodología Kiro con steering, hooks y vibe coding
Qué aporta esto a empresas como la nuestra Q2BSTUDIO
En Q2BSTUDIO, empresa de desarrollo de software y aplicaciones a medida, aprovechamos plantillas y procesos como este para reducir tiempos de entrega y subir la calidad del producto final. Nuestro equipo de especialistas en inteligencia artificial, ciberseguridad y servicios cloud diseña soluciones a medida que integran agentes IA, automatización de procesos y potencia de análisis con Power BI. Si buscas soluciones de software a medida o aplicaciones a medida podemos acelerar tu proyecto con arquitecturas probadas y componentes reutilizables. Para proyectos centrados en modelos de IA y adopción de agentes inteligentes consulta nuestra propuesta de inteligencia artificial para empresas
Además ofrecemos servicios de ciberseguridad y pentesting para proteger extensiones y aplicaciones, servicios cloud aws y azure para desplegar infraestructuras escalables, y capacidades de inteligencia de negocio y Power BI para convertir datos en decisiones. Palabras clave que definen nuestra oferta: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi
Cómo puedes usar Extension Bro
La plantilla sirve de base para construir extensiones impulsadas por IA, herramientas de productividad, scanners de seguridad, mejoras de UI, detectores de contenido y utilidades de menú contextual. Ejecuta el generador, personaliza componentes y lanza tu flujo de desarrollo. Con una base sólida se reducen riesgos y se acelera la entrega de productos listos para producción
Planes futuros y visión
Esto es solo el comienzo. En próximas versiones quiero añadir soporte multi lenguaje con plantillas para Vue, Svelte, Solid y Vanilla TypeScript, y avanzar hacia un constructor drag and drop que permita crear extensiones arrastrando componentes y generando el código automáticamente, una experiencia tipo Webflow para extensiones Chrome
Conclusión
El Kiroween Hackathon me dio la excusa y Kiro me dio la capacidad para materializar una plantilla que llevaba años en la cabeza. En Q2BSTUDIO aprovechamos este tipo de aceleradores tecnológicos para ofrecer a nuestros clientes soluciones de software a medida y proyectos de inteligencia artificial en producción. Si quieres conversar sobre cómo integrar agentes IA, seguridad, cloud o inteligencia de negocio en tus productos, en Q2BSTUDIO estamos listos para ayudarte
Gracias a Kiro, al hackathon y a la comunidad por el empujón. Si te interesa colaborar o saber más sobre nuestras soluciones empresariales contáctanos para explorar cómo trasladar ideas a productos reales y seguros