Descripción general de la extensión de Chrome
Qué hace la extensión
La extensión de Chrome de ComStack captura cualquier página web y la guarda como un borrador estructurado en tu proyecto de ComStack. La extensión es un cliente ligero: captura el HTML de la página y lo envía al servidor para una extracción mediante IA. El contenido extraído aparece como un borrador, listo para revisar, editar y publicar. Se ejecuta en el panel lateral de Chrome junto a tu navegador, sin que tengas que abandonar la página que estás viendo.
Por qué usar la extensión en lugar de un importador del lado del servidor
La mayoría de las herramientas de importación funcionan enviando una URL a un servidor, que luego obtiene la página por su cuenta. Esto falla en cuanto una página requiere inicio de sesión, tiene un muro de pago o protección contra bots.
La extensión funciona de forma diferente. Lee la página desde tu propio navegador, exactamente como ya la ves, por lo que captura contenido al que los importadores del lado del servidor no pueden acceder:
- Páginas tras un inicio de sesión en el que ya estás conectado
- Listados dentro de un portal o panel de control
- Cualquier elemento que bloquee rastreadores automatizados
Como utiliza tu sesión de navegador, funciona en esas páginas sin necesidad de una configuración especial.
Arquitectura
La extensión tiene dos componentes:
Service worker — abre el panel lateral cuando haces clic en el icono de la extensión. No tiene estado persistente ni procesamiento en segundo plano.
Panel lateral — una aplicación de una sola página con cuatro estados de vista:
- Auth — inicia sesión con Google mediante el flujo OAuth2 integrado de Chrome. La credencial resultante autentica todas las llamadas a la API.
- Setup — espacio de trabajo que contiene selectores de proyecto y plantilla, un campo de instrucciones opcional, el botón de extracción y la lista de borradores no publicados. La extensión sugiere automáticamente la plantilla correcta para la página actual y detecta si la página ya ha sido importada.
- Loading — indicador de carga con texto de estado progresivo mientras se ejecuta la extracción.
- Review — el componente web
<tf-document-editor>con campos de metadatos basados en plantillas y un editor markdown WYSIWYG Milkdown.
Flujo de extracción
Cuando haces clic en Extraer:
- La extensión lee la URL y el HTML de la pestaña activa
- Envía el HTML, la plantilla y cualquier instrucción del usuario al servidor para la extracción por IA
- El servidor devuelve markdown estructurado y metadatos
- La extensión obtiene las imágenes de la página, las sube a la CDN y sustituye las URLs por enlaces permanentes en el markdown
- El resultado se renderiza en el editor de revisión para su inspección y edición
- Al hacer clic en Guardar, se almacena como un borrador en tu proyecto
Instrucciones del usuario — El texto introducido en el campo de instrucciones se añade al prompt de extracción, permitiéndote guiar a la IA: “Céntrate en las especificaciones de la propiedad y omite la navegación”, “Extrae solo los miembros del equipo”, etc.
Editor de documentos (<tf-document-editor>)
El editor de revisión renderiza:
- Formulario de metadatos basado en plantillas — campos de las definiciones de campo de la plantilla seleccionada. Admite tipos de cadena, número, booleano y matriz.
- is_faq toggle — marca la página como FAQ, lo que la añade al índice de IA
llms.txty a la ruta rápida del asistente de voz. - Sección avanzada — prioridad del sitemap, frecuencia de cambio, asignación de grupo en la barra lateral, etiqueta y orden.
- Menú desplegable de grupos de la barra lateral — poblado desde los grupos de la barra lateral de tu proyecto, ordenado por orden con etiquetas traducidas según la configuración regional. Si la plantilla activa sugiere un grupo que aún no existe, aparece un banner con un botón “Crearlo” de un solo clic. Una opción “Crear nuevo grupo” al final del desplegable abre un formulario en línea: etiqueta e ID de grupo, autogenerado a partir de la etiqueta.
- Editor WYSIWYG Milkdown — markdown renderizado como texto enriquecido. Los diagramas Mermaid se previsualizan como SVG en línea en tiempo real mientras escribes.
Enriquecimiento por IA
Tras guardar, el enriquecimiento opcional por IA ejecuta un post-procesamiento definido por la plantilla en el borrador: añadiendo campos calculados, enriqueciendo descripciones o extrayendo datos estructurados que la extracción inicial no pudo inferir del HTML sin procesar. Para listados inmobiliarios, esto incluye leer fotos de la propiedad para añadir descripciones de vistas, materiales de superficie y detalles de acabado. El enriquecimiento se ejecuta de forma asíncrona; la lista de borradores muestra un estado de “enriqueciendo” mientras se procesa.
Detección de duplicados
Cuando abres una página que la extensión ya ha importado, aparece una tarjeta que muestra el borrador existente con un enlace “Abrir borrador”. Volver a extraer reemplaza el borrador existente en lugar de crear un duplicado. La comprobación se ejecuta cada vez que se abre el panel y al cambiar de pestaña.
Lista de borradores no publicados
La vista de configuración muestra todos los documentos que se encuentran actualmente en estado de borrador, enriquecimiento o procesamiento. Cada elemento muestra una insignia de estado y enlaces de vuelta al editor. La lista se actualiza cada 5 segundos cuando algún elemento sigue procesándose.
Enlaces directos al sitio publicado
Los enlaces del pie de página del panel lateral navegan al sitio en vivo mediante fragmentos de hash de URL:
| Botón | Efecto |
|---|---|
| Publicar | Abre el panel de borradores en el sitio en vivo |
| Abrir (borrador) | Abre el modo de edición para una página de borrador específica |
| Nueva página | Abre un borrador en blanco en modo de edición |
Los fragmentos de hash evitan conflictos de enrutamiento con el generador de sitios estáticos: la página se carga normalmente y luego el cliente procesa el hash.
Grupos de la barra lateral y alcance de sección
Cuando el proyecto utiliza navegación basada en secciones, el grupo de la barra lateral también determina bajo qué sección de navegación superior aparece una página. Elegir un grupo de barra lateral en el editor implica elegir la sección; no hay un selector de sección independiente.
Permisos
| Permiso | Propósito |
|---|---|
sidePanel | API de panel lateral de Chrome |
identity | Flujo OAuth2 de Chrome para inicio de sesión con Google |
activeTab | Inyectar el script de captura en la pestaña activa |
tabs | Detectar cambios de URL para la detección de duplicados |
scripting | Ejecutar el script de captura HTML |
storage | Persistir selecciones de proyecto/plantilla y caché de grupos de barra lateral |
<all_urls> | Obtener imágenes de cualquier dominio para subirlas a la CDN |
Autenticación
La extensión utiliza Firebase Auth a través del flujo OAuth2 integrado de Chrome, no claves de API. El token de Google se intercambia por una credencial de Firebase; el ID Token de Firebase autentica todas las llamadas a la API. Este es el mismo modelo de autenticación utilizado por los endpoints del asistente de voz en vivo, separado del modelo MCP OAuth.
Instalación
La extensión se distribuye como un archivo zip desde la sección Conectores en account.comstack.ai. Para instalarla: descarga el zip, extráelo, abre chrome://extensions/, activa el modo de desarrollador y carga la carpeta extraída como una extensión desempaquetada.
Relacionado
- Primeros pasos — instalación paso a paso y primera captura
- Revisar y publicar — gestión de borradores y publicación
- Descubrimiento por IA y SEO — cómo aparecen las páginas de FAQ en los índices de agentes de IA