Crop - extensión de Chrome para capturar con precisión elementos de páginas web

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.