Picklet es una extensión de Chrome para quien prueba webs: testers de QA, desarrolladores y agencias. Hace capturas de la página entera o de un elemento y las guarda con lo que hace falta para entender el fallo: la URL, el navegador, el tamaño de pantalla y los errores de consola. La acompaña una web, Picklet Studio, para montar mockups y guardar los informes.
01 En corto
02 Mi papel
Trabajé con Claude Code y con Codex. Cada decisión técnica está escrita en un registro (38 hasta ahora) con el contexto, lo que se eligió y lo que se descartó. Cada error tiene su síntoma, su causa, el arreglo y cómo se comprobó. Así podía revisar cada cambio por lo que hacía y por cómo se había probado.
03 Cómo se hizo
Capturar lo que se ve en pantalla es sencillo, Chrome ya lo hace. La página entera da más problemas. Estos tres salieron al probar con webs reales.
Stripe · elementos fijos
Para capturar la página entera, Picklet baja por ella y hace una captura cada 650 ms como mínimo, porque Chrome limita cuántas puede hacer una extensión por segundo. Antes de empezar congela las animaciones y marca los elementos fijos y sticky para que no se repitan en cada trozo.
En Stripe, el aviso de cookies aparecía otra vez más abajo: la web lo volvía a crear después de que Picklet lo marcara. Ahora busca elementos fijos otra vez justo antes de cada captura y los oculta a partir del primer trozo. Al acabar, deja el scroll, los estilos y las animaciones como estaban.
Wikipedia · 21.235 px
Chrome no deja crear un canvas muy alto, así que Picklet trabaja por partes de 16.000 píxeles como máximo. Al principio esas partes también se descargaban por separado, y un artículo de Wikipedia de 21.235 píxeles de alto salía en dos archivos. Yo quería una sola imagen.
La solución fue escribir el PNG fila a fila, sin montar nunca la imagen entera en un canvas. Ahora sale un único PNG de 1905 × 21.235 que se abre sin problemas, y quien prefiera partes numeradas puede elegirlas. Si una página no se acaba nunca, la captura se para a los 120.000 píxeles y lo avisa.
Permisos
Picklet no tiene permisos sobre ninguna web. Pide seis permisos en total y usa activeTab: Chrome le da acceso a la pestaña actual solo cuando pulsas el icono, y en ese momento inyecta el código que necesita para esa captura. Un script revisa el paquete en cada build y falla si aparece un permiso nuevo.
El editor solo puede guardar o descartar una captura si trae el código de esa captura y viene de la misma pestaña. Para pasar una imagen a Studio se usa un permiso de un solo uso que caduca a los diez minutos, y la imagen va por bloques de la extensión a la página, sin pasar por ningún servidor.
04 Detalles
El popup tiene tres pestañas: capturar, guardar la página como HTML y comparar. Al capturar se abre un editor encima de la misma página, con recorte, flechas, rectángulos, dibujo a mano alzada, texto y pixelado, y con deshacer y rehacer.
Desde ahí se exporta a PNG, JPEG, WebP o PDF, o como informe de evidencia: un único HTML, sin scripts, con la imagen editada, la URL, el navegador, el tamaño de pantalla y los errores y avisos de la consola.
También compara dos capturas píxel a píxel, captura la misma página a 375, 768 y 1280 píxeles de ancho y propone zonas para pixelar cuando ve emails, tarjetas o contraseñas. Las propone, pero las aplicas tú. Lo que exportas se guarda en una biblioteca local de hasta 200 MiB.
Studio empezó como Picklet Reports, una biblioteca para guardar y buscar informes de evidencia. Después llegó un editor de mockups: varias capturas en el mismo lienzo, con marcos de navegador, portátil, tableta o móvil, seis plantillas y exportación a PNG, JPEG o WebP desde el propio navegador.
Sin cuenta, todo se guarda en tu navegador y la interfaz lo dice. Si inicias sesión con un enlace por correo, la biblioteca pasa a Postgres en Supabase, con seguridad por filas: cada usuario solo ve y cambia sus informes. Los enlaces para compartir llevan un identificador aleatorio de 128 bits, se pueden revocar y no enseñan quién es el dueño.
Hay límites que no dependen de Picklet: Chrome no deja a ninguna extensión trabajar en las páginas chrome:// ni en la Chrome Web Store, y Picklet lo avisa. Live Capture, que guarda una página como HTML estático, sigue en beta y sus límites están documentados.
05 Galería
Imágenes de la tienda y capturas reales de la extensión y de Studio. Los datos que salen son de ejemplo.
06 Estado
La extensión está terminada y pasa todas sus comprobaciones. Me falta repetir las pruebas a mano con el paquete final y enviarla a la Chrome Web Store. Studio funciona, pero no lo enlazo todavía: sin la extensión instalada sirve de poco.
Para después de la versión 1 quedan apuntadas otras ideas, como Firefox y Edge o enviar capturas a Jira, GitHub o Linear.
Software libre: WXT, React, pdf-lib, pixelmatch, Next.js y Supabase.