Nuestra extensión de Chrome se convierte en un estudio

La primera versión de la extensión tenía un único propósito: permitirnos grabar una página detrás de tu inicio de sesión, con tu propia sesión del navegador. Útil, pero limitado. Hoy se convierte en un panel de captura completo, adaptado de la extensión de captura de drurls.com, nuestro producto hermano, con todos sus comportamientos intactos.

Ábrela junto a cualquier pestaña y tendrás:

• Un grabador de screencast con un cursor con estilo, un punto, un anillo o un foco en tu color, con ondas al hacer clic y un seguimiento suave.
• Capturas de página completa, unidas mientras la página se desplaza, y un selector de elementos que recorta la captura a un solo elemento y conserva su estilo exacto.
• Un kit de marca: los colores de la página según el espacio que ocupan, sus fuentes, el redondeo de esquinas, los estilos de botón y el logotipo.
• Un atajo a un nuevo vídeo que abre /new con la dirección de la pestaña y un brief creativo ya rellenado.

Una captura solo sirve si luego la encuentras. Ahora cada una va a tu biblioteca de PageToVid: las capturas de pantalla como imágenes, los screencasts convertidos a un MP4 estándar que se reproduce en todas partes, los kits de marca guardados como datos reutilizables.

También cambiamos lo que la biblioteca muestra primero. Antes se abría en la pestaña compartida, mientras que una captura nueva es privada hasta que decides compartirla. Tus propios medios son ahora la vista por defecto, así que lo que acabas de capturar es lo primero que ves.

La extensión, la biblioteca y el editor funcionan ahora como un solo lugar: capturas en Chrome, abres PageToVid y las imágenes están ahí.

Queríamos que cada captura llegara, siempre, y eso exigía entender cómo trata un navegador a una extensión.

Tu sesión de PageToVid vive en una cookie protegida por una regla llamada SameSite. El navegador solo la envía con las peticiones que vienen de nuestra propia web, o cuando entras directamente. Es una buena protección, con una consecuencia fácil de pasar por alto: para el navegador, una extensión de Chrome es otro sitio, tenga los permisos que tenga. Sus peticiones no llevan tu sesión por sí solas.

Así que ahora la extensión la lleva de forma explícita. Lee tu sesión con las herramientas de extensión del propio navegador y la envía con cada petición, de la forma estándar, en una cabecera. En nuestro lado, la biblioteca de inicio de sesión que ya usamos entiende esa cabecera con la misma naturalidad que la cookie y la comprueba exactamente igual. Sin nuevo tipo de credencial, sin nuevo secreto: una pequeña función, userFromRequest, compartida por las rutas de capturas, sitios e inicio de sesión.

Nuestros servidores están detrás de un balanceador de carga que gestiona la conexión segura, así que la aplicación ve un tráfico interno corriente. La forma en que la biblioteca lee una sesión depende de si la conexión es segura, y ese salto interno puede hacer que una llamada segura parezca otra cosa.

En lugar de adivinar, el servidor prueba ahora las dos formas de leer la sesión. No cuesta casi nada, nunca falla de forma ruidosa y no depende de ningún detalle de cómo se reenvía el tráfico.

Lo comprobamos de extremo a extremo, tal como funciona la extensión: crear una sesión real, enviar una captura con ella desde fuera y confirmar que llega a la biblioteca correcta. Una sesión de otra procedencia se rechaza, como debe ser.

Con la extensión alimentando la biblioteca, ordenamos la navegación del sitio. La cabecera para usuarios conectados tenía siete enlaces en fila, demasiados. Ahora muestra los cinco que usas a diario: Panel, Sitios, Editor, Biblioteca y Animaciones. Precios y Recursos pasan al menú de la cuenta, y los botones de tema e idioma forman su propio grupo.

El resultado es un ciclo sencillo: ves algo en tu navegador, lo capturas desde el panel lateral y lo encuentras a un clic cuando montas tu próximo vídeo. La extensión tiene su propia página, PageToVid para Chrome, con todo lo que puede hacer.