Hola. Quiero presentarles Crop, una extensión de Chrome para capturar con precisión la parte que quieras de una página web.
Crop muestra una superposición sobre la página que estás viendo y te permite señalar y seleccionar elementos del DOM con el mouse, o arrastrar directamente un área para copiarla/guardarla como PNG.
Me parecía muy cómodo el flujo de seleccionar elementos con precisión en la función de capturas de Firefox, y empecé a crear esto porque quería usar algo parecido también en Chrome.
Funciones principales
- Resaltado de elementos del DOM al pasar el mouse
- Selección de elementos con clic
- Selección de área personalizada con arrastre
- Mover y redimensionar el área seleccionada
- Captura del viewport actual
- Captura de la página completa
- Captura con desplazamiento de áreas seleccionadas que continúan fuera del viewport
- Copia al portapapeles en PNG o guardado como archivo
Permisos y privacidad
Como es una extensión de navegador, pensé que este tema podía generar preocupación, así que traté de reducirlo al máximo.
Por ahora, los permisos que usa son aproximadamente estos:
- activeTab: acceso temporal solo a la pestaña actual en la que el usuario ejecutó la extensión
- scripting: inyección del script de superposición en la pestaña actual
- clipboardWrite: copiar al portapapeles el PNG generado
- downloads: guardar el PNG generado
No solicita permisos amplios como debugger o <all_urls>.
Las capturas se procesan localmente dentro del navegador. No se suben capturas ni datos de la página a un servidor, y tampoco incluí telemetría. Las imágenes solo salen al portapapeles o al archivo de descarga cuando el usuario presiona Copy o Save.
Limitaciones actuales
Debido a las restricciones de las extensiones de Chrome, hay limitaciones en los siguientes casos.
- No funciona en páginas restringidas como
chrome://o Chrome Web Store. - No se pueden inspeccionar los iframes de origen cruzado desde el content script, por lo que la selección de elementos está limitada.
- Tampoco se puede acceder al interior de un closed shadow DOM.
- La captura de página completa actualmente funciona con base en el documento de nivel superior.
- En páginas muy grandes, el PNG puede reducirse de escala por las limitaciones del canvas del navegador.
- En páginas con mucho lazy loading, animaciones o sticky header/footer, el resultado del stitch de página completa puede no ser perfecto.
Sobre la implementación
Está hecha sobre Chrome Manifest V3.
Inyecta un content script sobre la página y maneja el flujo de selección/redimensionado/captura en una superposición basada en Shadow DOM. Para la página completa o las áreas fuera del viewport, captura combinando chrome.tabs.captureVisibleTab() con stitching por desplazamiento.
Algunas partes del código tomadas/adaptadas de Firefox Screenshots mantienen el aviso de MPL-2.0, y el código nuevo del proyecto está preparado para distribuirse bajo licencia MIT. No es un proyecto afiliado oficialmente ni avalado por Mozilla/Firefox.
Enlaces
Chrome Web Store:
https://chromewebstore.google.com/detail/crop/…
GitHub:
https://github.com/postmelee/crop
Si sueles capturar páginas web para redactar documentación, reportar errores o revisar interfaces, me encantaría que lo probaras y me compartieras cualquier incomodidad o idea de mejora.
3 comentarios
Lo instalé ayer y lo estuve usando.
Siempre tenía que seleccionar el área arrastrando el mouse, pero gracias a esto se volvió mucho más cómodo. Gracias.
Parece que hay un pequeño error.
Tanto al copiar como al descargar, parece que se agrega un margen blanco innecesario en el lado derecho de la imagen.
Lo probé en un entorno de macOS y Chrome.
Hola, gracias por el aviso. En mi entorno local de macOS + Chrome todavía no he podido reproducir el mismo problema del margen blanco.
Podría deberse a diferencias del entorno, así que ¿podrías compartir la versión de macOS/Chrome/Crop, el zoom de Chrome, la escala de la pantalla, la página donde ocurrió el problema y una captura de pantalla de la imagen resultante? Si podemos comparar el área seleccionada con la imagen resultante, eso ayudará a identificar la causa.
Si es posible, por favor crea un issue usando el siguiente formulario de reporte de errores. Ya dejé preparados los campos para poder revisar la información necesaria sin omitir nada.
https://github.com/postmelee/crop/issues/new?template=bug_report.yml
Puedes dejarlo en ese enlace, o también está bien si agregas más información en este comentario.
En cuanto lo confirme, le daré seguimiento como un issue de bug por separado.
Reporté el bug en GitHub.
Espero que les sirva de ayuda para resolverlo.