DOMShot
En líneaDOMShot convierte cualquier elemento de una web real en un PNG limpio. Uso el mismo código de captura en la extensión de Chrome, el editor, la línea de comandos y el servidor MCP para agentes de código.
Preparar una buena captura suele dar más trabajo del necesario.
El componente ya está en el navegador, pero convertirlo en una imagen limpia suele implicar abrir las herramientas de desarrollo, recortar una captura, rehacer el espaciado, añadir un fondo y volver a comprobar la exportación.
DOMShot aprovecha el propio renderizado del navegador. Captura el elemento seleccionado y abre un editor para ajustar el fondo, el espaciado, la sombra y el tamaño.
Selecciona el elemento real. Comprueba la composición final. Exporta una vez.
Elige el elemento, ajusta la imagen y guárdala.
Seleccionar un elemento
La extensión superpone una capa sobre la página y muestra con claridad qué se va a capturar.
Capturar el elemento
DOMShot separa el contenido seleccionado y conserva el aspecto que tiene en el navegador.
Ajustar la imagen
Los ajustes y controles permiten cambiar el fondo, el espacio, la sombra, las esquinas y la escala.
Exportar el PNG
La vista previa se convierte en una imagen local con el tamaño y la composición elegidos.
He mantenido el editor rápido sin quitar los controles que hacen falta.
Vista previa antes de guardar
El editor muestra la composición final antes de descargarla.
Procesamiento local por defecto
El contenido se procesa en el navegador para crear la captura y no se sube a ningún servidor de DOMShot.
Transparencia siempre que se pueda
La captura conserva la transparencia y recurre a alternativas claras cuando una página no puede renderizarse bien.
Una única base de captura
La extensión, la API de Node, la CLI y el servidor MCP comparten la misma lógica de captura.
Cómo trabajan juntas la extensión, la línea de comandos y las herramientas para agentes.
He creado tres formas de usar DOMShot: una extensión de Chrome para personas, herramientas de Node y línea de comandos para scripts, y un servidor MCP para agentes de código. Todas usan el mismo proceso de captura.
Captura en Chrome
El selector de elementos, la captura en el navegador, las imágenes recientes y el paso que abre el editor.
Controles para el fondo y el espacio
Ajustes directos para preparar una imagen que esté lista para compartir.
Node, línea de comandos y MCP
Los mismos pasos de captura preparados para scripts, agentes de código y automatizaciones locales.
Web y documentación
El sitio donde se puede instalar DOMShot, ver ejemplos, leer los detalles de privacidad y pedir ayuda.
Lo que costó resolver
Cada web se comporta de una manera
Los elementos pueden contener transparencias, estilos anidados, fuentes, iframes o comportamientos difíciles de conservar en una imagen.
Demasiados controles acaban estorbando
Si el editor ofreciera todos los ajustes posibles, terminaría recreando una herramienta de diseño. Cada control tiene que justificar su sitio en una captura rápida.
Un fallo debe verse como un fallo
La CLI y las herramientas MCP necesitan errores claros, alternativas y archivos fáciles de localizar para que un fallo no parezca un éxito.
Lo que he aprendido al construir una herramienta pequeña para desarrolladores.
- Una herramienta pequeña resulta fiable cuando cada pantalla deja claro cuál es el siguiente paso.
- Hacer la captura en el navegador es mejor para la privacidad y además simplifica el producto.
- La automatización funciona mejor cuando sigue los mismos pasos que ya funcionan en la extensión.
La extensión está publicada. Todavía estoy probando las herramientas para agentes.
Ya he publicado la extensión de Chrome y la web. La API de Node, la herramienta de línea de comandos y el servidor MCP funcionan en local, y todavía los estoy probando juntos como un solo paquete.
- Estoy arreglando los casos de captura difíciles y dejando más claro qué ocurre cuando falla la transparencia.
- Estoy añadiendo funciones a las herramientas para agentes sin hacer que la extensión sea más difícil de usar.
- Estoy preparando mejores ejemplos y documentación para hacer capturas repetibles.