Cómo Crear una Extensión de Chrome para Gestionar Prompts en ChatGPT

promptstack-extension: Construyendo una biblioteca de prompts colaborativa en tu navegador 🚀

En los últimos años, el uso de herramientas de IA generativa como ChatGPT, Perplexity y GitHub Copilot se ha vuelto esencial en los flujos de trabajo de muchos equipos técnicos. Sin embargo, a medida que los prompts (instrucciones para la IA) se vuelven más complejos y personalizados, surge un nuevo reto: ¿cómo gestionamos, compartimos y reutilizamos prompts de forma eficiente y colaborativa dentro de una organización?

De esta necesidad nació promptstack-extension, una extensión de Chrome desarrollada en TypeScript y HTML que integra directamente una biblioteca interna de prompts en las plataformas de IA más populares. En este post, te cuento cómo diseñé e implementé la arquitectura, los retos técnicos que enfrenté y los aprendizajes de este proyecto, con el objetivo de inspirar a otros a construir soluciones que realmente impacten el día a día de los usuarios.

¿Por qué necesitábamos promptstack-extension?

En mi equipo, nos dimos cuenta de varios problemas recurrentes:

• Redundancia: cada desarrollador escribía sus propios prompts desde cero, incluso para tareas comunes.
• Desorganización: los prompts útiles se perdían en chats, wikis o documentos dispersos.
• Escasa colaboración: compartir y mejorar prompts era un proceso manual y poco eficiente.
• Falta de control: necesitábamos gestionar la visibilidad y el acceso a los prompts según equipos o dominios.

La solución debía ser rápida de acceder, integrada en las herramientas de IA y soportar colaboración avanzada (rating, comentarios, filtros, etc.). Ahí es donde una extensión de navegador cobraba mucho sentido: podía “inyectar” la funcionalidad justo donde los usuarios la necesitaban, sin interrumpir su flujo de trabajo.

Arquitectura general: Modularidad y escalabilidad como principios

Desde el inicio, opté por un diseño modular basado en las siguientes capas principales:

1. Frontend de la extensión: UI responsiva hecha en HTML y TypeScript, usando Vite como build tool.
2. Content scripts: módulos que interactúan directamente con el DOM de ChatGPT, Perplexity y GitHub Copilot para insertar prompts.
3. Background script: maneja autenticación, almacenamiento local y comunicación con la API backend.
4. API backend: (fuera del scope de este post, pero esencial), provee endpoints REST para gestionar prompts, usuarios, ratings, etc.
5. Comunicación entre scripts: usando mensajes (chrome.runtime) para aislar responsabilidades y mantener la seguridad.

Diagrama simplificado

graph TD
    A[Popup UI] -- Mensajes --> B[Background Script]
    B -- Fetch --> C[API Backend]
    B -- Mensajes --> D[Content Scripts]
    D -- DOM Manipulation --> E[ChatGPT/Perplexity/GitHub]

Esta arquitectura permite:

• Escalar el soporte a nuevos sitios fácilmente
• Separar lógica de UI, manipulación de DOM y autenticación
• Facilitar el mantenimiento y testing

Decisiones técnicas clave

1. TypeScript + HTML: Robustez y compatibilidad

Elegí TypeScript para toda la lógica de la extensión. Sus ventajas:

• Tipado fuerte: reduce bugs en tiempo de desarrollo.
• Refactoring seguro: esencial para agregar features sobre una base estable.
• Amplio soporte en extensiones Chrome (Manifest V3).

La UI la construí en HTML puro (con algo de CSS modular), priorizando velocidad de carga y simplicidad, dado que el espacio de las extensiones suele ser reducido.

2. Vite como herramienta de build

Vite permite recargar rápido en desarrollo y produce bundles optimizados para producción. Además, su soporte para TypeScript y configuración sencilla lo hace ideal para extensiones.

3. Manifest V3

Adopté Manifest V3 por las siguientes razones:

• Más seguridad: scripts aislados, menor riesgo de XSS.
• Mejor manejo de permisos: sólo se activan en los sitios soportados.
• Comunicación eficiente entre scripts.

4. Inyección de prompts: Multi-sitio y resiliente

Cada plataforma (ChatGPT, Perplexity, Copilot) tiene su propio DOM y UX, así que diseñé content scripts adaptativos. Estos scripts detectan dinámicamente el textarea principal y permiten insertar el prompt seleccionado con un solo clic.

Ejemplo de snippet para insertar en ChatGPT:

1const textarea = document.querySelector('textarea');
2if (textarea) {
3  textarea.value = promptText;
4  textarea.dispatchEvent(new Event('input', { bubbles: true }));
5}

Este enfoque garantiza compatibilidad incluso si las plataformas cambian levemente su estructura.

5. Filtros avanzados y visibilidad granular

Los prompts pueden filtrarse por:

• Tags
• Dominio
• Autor
• Rating

Y cada prompt tiene un modo de visibilidad:

• Organización
• Equipo
• Dominio
• Privado
• Custom (compartir explícitamente con usuarios/domínios)

Esto exigía manejar bien las relaciones de usuarios, equipos y permisos en el backend, y reflejarlo en una UI clara para el usuario.

Componentes principales

1. Popup UI

• Búsqueda y filtrado instantáneo
• Creación y edición de prompts con tags, dominio, visibilidad
• Leaderboard de contribuyentes destacados
• Rating y comentarios para fomentar la colaboración

2. Content Scripts

• Detectan si el usuario está en un sitio soportado
• Insertan prompts en el lugar adecuado
• Mantienen la experiencia nativa del sitio

3. Background Script

• Gestiona autenticación y headers (soporte para environments de desarrollo)
• Sincroniza con el API backend
• Almacena datos temporales en chrome.storage.local para performance

4. API Backend (referencia)

• CRUD de prompts, ratings, comentarios
• Control de visibilidad y permisos
• Métricas de uso para el leaderboard

Retos técnicos y cómo los resolví

1. Compatibilidad con múltiples plataformas

Cada sitio tiene un DOM distinto y actualizaciones frecuentes. Para evitar roturas:

• Implementé selectores robustos y fallback por atributos únicos.
• Separé la lógica de inyección para cada plataforma en su propio módulo.
• Añadí logs de errores detallados para detectar rápidamente cualquier incompatibilidad.

2. Sincronización en tiempo real

Para que los cambios (nuevos prompts, ratings, comentarios) se reflejaran instantáneamente:

• Usé chrome.runtime.sendMessage para comunicación reactiva entre background y popup/content scripts.
• Cacheé datos relevantes localmente y refrescaba bajo demanda.

3. Gestión de permisos y seguridad

• Limité los permisos de la extensión a los dominios estrictamente necesarios.
• Validé todos los datos del usuario antes de enviarlos al backend.
• Utilicé tokens cortos para autenticación y los renovaba automáticamente.

4. Experiencia de usuario fluida

• La UI responde en milisegundos gracias al cache local y la optimización de queries.
• El diseño es minimalista y no interrumpe el flujo del usuario en ChatGPT, Perplexity o Copilot.
• Añadí accesos rápidos (atajos de teclado) para power users.

Resultados e impacto

Tras desplegar la extensión en nuestro equipo técnico:

• Ahorro de tiempo: reducción de ~30% en el tiempo dedicado a generar prompts repetitivos.
• Mejora en la calidad: los prompts mejor valorados se reutilizan más, elevando el nivel general de output.
• Colaboración real: los comentarios y ratings ayudaron a detectar y mejorar rápidamente los prompts más usados.
• Escalabilidad: otros equipos (product, data science) empezaron a usar la extensión adaptando los prompts a sus dominios.

Lecciones aprendidas y futuras mejoras

Lo que funcionó bien

• Integración nativa: los usuarios no necesitan cambiar de pestaña ni copiar/pegar manualmente.
• Flexible y escalable: agregar nuevos sitios o tipos de visibilidad es sencillo gracias al diseño modular.
• Colaboración incentivada: el leaderboard y los ratings motivan la participación activa.

Posibles mejoras

• Soporte para más plataformas (ej. Notion, Slack AI).
• Sincronización offline/online para usuarios con conectividad intermitente.
• Sugerencias automáticas de prompts usando IA y contexto del usuario.
• Más granularidad en permisos (ej. prompts temporales, expiración automática).

Conclusión

Desarrollar promptstack-extension fue una experiencia enriquecedora, donde el mayor reto fue equilibrar usabilidad, seguridad y escalabilidad en un entorno tan dinámico como el de las extensiones de navegador y las plataformas de IA generativa. Si tienes necesidades similares en tu equipo o quieres saber más, no dudes en contactarme (el repositorio es actualmente privado).

Si tienes preguntas técnicas, sugerencias o quieres compartir cómo gestionas tus prompts, ¡te leo en los comentarios!

👨‍💻 Javier Santos Criado Ingeniero de IA apasionado por crear herramientas que potencien el trabajo en equipo y la creatividad técnica.