¿Por qué otro Web Clipper?Why another Web Clipper?

La mayoría de herramientas de captura de pantalla toman "fotos" de la web, pero pierden el contexto del código. Otras herramientas de inspección te dan el código, pero no muestran cómo se ve realmente el elemento (sombras, márgenes, estados). Most screenshot tools take "photos" of the web but lose code context. Other inspection tools give you code but don't show how the element actually looks (shadows, margins, states).

Web Clipper A11y combina lo mejor de ambos mundos: utiliza la API nativa de Chrome para capturar exactamente lo que ves (pixel-perfect) y extrae simultáneamente el código HTML limpio. Web Clipper A11y combines the best of both worlds: it uses Chrome's native API to capture exactly what you see (pixel-perfect) and simultaneously extracts clean HTML code.

💡 Pensado para A11y

Perfecto para auditores de accesibilidad que necesitan documentar errores visuales junto con el código que los causa, o desarrolladores que quieren extraer componentes UI completos.

Características Principales

📸 Captura Nativa

Utiliza captureVisibleTab para asegurar que el renderizado es idéntico a lo que ves. Soporta iframes y transparencias.

⌨️ Navegación DOM

Navega la jerarquía del DOM con el teclado (Flecha Arriba/Abajo) para seleccionar el componente exacto que quieres capturar.

📦 Salida Zip

Descarga un archivo ZIP organizado con la imagen en alta resolución (PNG) y el fragmento de código HTML formateado.

🔒 Privacidad Total

Todo ocurre en tu navegador. Ninguna imagen o código se envía a servidores externos. Tu trabajo es tuyo.

Cómo Funciona

1. Instalación

Puedes instalar la extensión directamente desde la Chrome Web Store.

  1. Visita la página de la extensión en la tienda.
  2. Haz clic en "Añadir a Chrome".
  3. ¡Listo! El icono aparecerá en tu barra de herramientas.

2. Uso de la Extensión

  • Haz clic en el icono de la extensión para activar el modo inspector.
  • Pasa el ratón sobre los elementos para resaltarlos.
  • Usa las flechas del teclado para ajustar la selección (subir/bajar en el DOM).
  • Haz clic para capturar y descargar.

Instala la Extensión

Web Clipper A11y es gratuita. Instálala directamente desde la tienda.

Disponible en Chrome Store Available on Chrome Store

Tecnologías

  • Manifest V3
  • JSZip para compresión eficiente
  • FileSaver.js para descargas locales
  • Canvas API para manipulación de imágenes