Viscum

Extensión de Chrome (Manifest V3) para depurar analítica digital. Captura los beacons de Adobe Analytics, Adobe Web SDK (Alloy), GA4 y Tealium (y cualquier otro pixel de tracking, en modo genérico) y los presenta en una matriz traza-a-traza: cada beacon es una columna y cada variable una fila. Así ves de un vistazo el recorrido completo de una navegación y cómo cambia cada variable entre hits.

Inspirada en dataslayer, Omnibug y el Adobe Experience Platform Debugger, pero centrada en el flujo de un analista: comparación por columnas, búsqueda, filtros y exportación.

El nombre viene de Viscum album (el muérdago): la extensión se adhiere a la sesión y va extrayendo lo que la página envía.

---

Instalación (modo desarrollador)

1. Descarga el código (o clona el repo).
2. Ve a chrome://extensions y activa Modo de desarrollador.
3. Cargar descomprimida → selecciona la carpeta raíz del proyecto (la que contiene manifest.json).
4. Ancla el icono de Viscum desde el menú de extensiones (la pieza de puzzle).

Cómo se usa

Viscum se puede abrir de dos formas:

• En una pestaña propia (recomendado): clic en el icono de Viscum → “Abrir vista completa”. Se abre la matriz en una pestaña normal.
• En DevTools: abre las DevTools (F12) → pestaña Viscum.

Flujo: pulsa ● recolectar y navega o interactúa con la web que auditas. Cada beacon aparece como una nueva columna. La captura es global (vale cualquier pestaña); no necesitas elegir una.

El permiso debugger puede mostrar el aviso “DevTools se está depurando este navegador” mientras se captura: es esperado (se usa CDP para leer el cuerpo de algunos POST). Si otra herramienta ya lo ocupa, Viscum degrada a webRequest sin romperse.

Funcionalidades

• Matriz traza-a-traza — filas = variables, columnas = hits. Comparas el mismo eVar/prop/event a lo largo de toda la navegación.
• Parsers por vendor — Adobe Analytics, Adobe Web SDK, GA4 y Tealium con etiquetas legibles (v84 → eVar84, c1 → prop1, en → Event Name…). Los POST se decodifican leyendo el cuerpo (link tracking, Web SDK, GA4 batched).
• Modo genérico — cualquier otro beacon de tracking se muestra igualmente, volcando sus parámetros, con el host como etiqueta.
• Búsqueda 🔍 — filtra por nombre de variable o por valor. Con “sólo coincidencias” oculta el resto de filas, y “sólo variables que cambian” deja únicamente las que varían entre trazas.
• Filtro por vendor — limita la vista a un proveedor concreto o muéstralos todos.
• Grupos plegables — las variables se agrupan (eVars, props, events, XDM…); clic en la cabecera del grupo para plegar/desplegar. Las cabeceras quedan fijas al hacer scroll horizontal.
• Detalle y copia — clic en una celda para ver el valor completo y copiarlo.
• Exportar ⬇ — vuelca la matriz a CSV, el detalle a JSON o un resumen en texto.
• Diagnóstico 🔬 — muestra en crudo cada petición capturada y si Viscum la reconoce; útil para depurar por qué algo no aparece.
• Popup rápido — arrancar/parar la captura y ver el recuento sin abrir la vista completa.

---

Arquitectura

Captura híbrida, para ver el beacon pase lo que pase:

• chrome.devtools.network (en el panel de DevTools) — la vía canónica: ve lo mismo que la pestaña Network.
• Hooks de página — fetch/XHR/sendBeacon/Image interceptados en el contexto de la página; capturan también el cuerpo de los POST.
• webRequest — respaldo global por URL.

Los beacons se normalizan en el service worker y se difunden a la vista por un port. En MV3 el estado se persiste en chrome.storage.session para sobrevivir a los reinicios del worker.

 página (MAIN world)         contexto aislado        extensión
 ┌──────────────────┐        ┌────────────┐          ┌────────────────────┐
 │ page-hooks.js    │postMsg │ bridge.js  │ runtime  │ service-worker.js  │
 │ fetch/XHR/beacon │───────▶│            │─────────▶│  parsea + dedup    │
 │ dataLayer hooks  │        └────────────┘          └─────────┬──────────┘
 └──────────────────┘                                          │ port "panel"
                                          ┌───────────────────▼─────────────┐
                                          │ vista (pestaña o DevTools)       │
                                          │  matriz traza-a-traza            │
                                          └──────────────────────────────────┘

Estructura

• manifest.json — MV3.
• src/shared/vendors.js — catálogo de proveedores (cómo se detecta cada uno).
• src/shared/parsers/* — un parser por proveedor → objeto de hit normalizado.
• src/background/service-worker.js — orquesta la captura y reenvía los hits.
• src/inject/page-hooks.js — hooks de red y de dataLayer/UDO en el MAIN world.
• src/content/bridge.js — puente entre la página y la extensión.
• src/panel/* — la vista (matriz, búsqueda, filtros, export); se usa tanto en la pestaña como en el panel de DevTools.
• src/popup/* — popup rápido.

Modelo de hit normalizado (lo que devuelven los parsers):

{
  vendor: "ADOBE_AA",          // id del proveedor
  vendorLabel, vendorColor,    // para la cabecera de columna
  rsid: "myrs-prod",           // report suite / measurement id / account-profile
  hitType: "pageview|link|...",
  page: "home",
  vars: [ { key, label, value, group } ],  // group: eVars|props|events|page|...
  index: 3,                    // nº de traza = nº de columna
  ts, raw                      // timestamp y url cruda
}

Añadir un vendor

1 entrada en src/shared/vendors.js (cómo se detecta) + 1 parser en src/shared/parsers/ + registrarlo en src/shared/parsers/index.js.

Privacidad

Toda la captura ocurre en local, en tu navegador. Viscum no envía datos a ningún servidor. Es una herramienta de depuración; no la uses para almacenar ni compartir datos de navegación de terceros.

Estado

Andamiaje funcional. Ver ROADMAP.md para lo que falta.