Snaptura: resolución DPR y redacción DOM en extensiones Chrome MV3
El desarrollador de Snaptura detalla cómo capturar elementos exactos en Chrome resolviendo problemas de escala, elementos fijos y privacidad.
Snaptura, una extensión para Chrome basada en la especificación Manifest V3 (MV3), aborda una limitación inherente a las herramientas de captura de pantalla: la incapacidad de extraer elementos del DOM exactos sin depender del recorte manual posterior. El desarrollo de esta extensión ha requerido resolver cuatro ingenierías concretas relacionadas con la resolución de dispositivo, la selección interactiva, la captura de páginas completas y la redacción de datos sensibles antes de la rasterización.
Manejo de la resolución y selección de nodos
El primer reto técnico es la discrepancia entre las unidades CSS y los píxeles físicos del dispositivo. La función captureVisibleTab() devuelve un bitmap del viewport que incorpora el devicePixelRatio (DPR). Si una tarjeta de 400x300 píxeles CSS se captura en una pantalla con DPR 2, el resultado es de 800x600 píxeles. El código debe multiplicar las coordenadas obtenidas con getBoundingClientRect por el DPR y aplicar redondeo (Math.round) en lugar de truncamiento para evitar bordes visibles de un píxel entre elementos adyacentes.
Para la selección de elementos bajo el cursor, la extensión no se limita a document.elementFromPoint. Implementa un algoritmo de hit-testing inspirado en DevTools que asciende por el árbol de ancestros, puntuando candidatos según su área visible y peso semántico. Esto permite al usuario seleccionar un contenedor padre en lugar de un <span> interno, utilizando heurísticas como el cambio de color de fondo para identificar el elemento objetivo.
Captura completa y redacción en origen
La captura de páginas completas mediante el método de desplazamiento y costura (scroll-and-stitch) se ve comprometida por los elementos con position: sticky o fixed, que se repiten en cada segmento capturado. La solución implica detectar estos elementos mediante un recorrido de getComputedStyle y ocultarlos o fijarlos en su posición correcta durante el ensamblaje final. Además, se fuerza el desplazamiento instantáneo con behavior: 'instant' para evitar artefactos causados por el zoom o el desplazamiento suave.
El aspecto más crítico para la seguridad es la redacción. En lugar de aplicar un filtro de desenfoque o un rectángulo negro sobre la imagen ya generada (lo que deja los datos en los metadatos o pilas de deshacer), Snaptura modifica el DOM antes de la captura. Sustituye los nodos de texto sensibles por elementos div con las mismas métricas de caja. Dado que la cadena original nunca se rasteriza, no puede filtrarse en el archivo final. Esta operación requiere declarar la redacción antes de tomar la captura.
Toda esta lógica opera dentro de las restricciones de MV3, donde el service worker se cierra constantemente. La extensión gestiona el estado en chrome.storage y utiliza documentos de pantalla desviados (offscreen documents) con OffscreenCanvas para tareas pesadas como la codificación de GIFs, manteniendo el worker como un simple enrutador. Aunque la extensión ofrece una versión de pago, estas técnicas son aplicables a cualquier herramienta de captura que utilice la API de Chrome.
