[English]

Desarrollo de Glareless, una extensión de navegador

Glareless (es decir, “sin deslumbramiento”), es una extensión para navegadores web que protege tus ojos evitando que el color de fondo de las zonas de texto sea demasiado brillante.

Funciona en los principales navegadores. Ver instalación.

Contenidos

Motivación

En resumen: las páginas web con fondo 100% blanco para texto no son buenas para tus ojos. Te fuerzan a mirar a un objeto brillante mientras lees, y además su alto contraste puede afectar la claridad de las letras.

En otro artículo doy más detalle sobre la locura del fondo blanco en pantalla..

Instalación

Glareless para Firefox
Glareless para Chrome
Safari: descarga una release del repositorio en formato tar.gz, descomprímela, y usa, en Ajustes, la pestaña de “Desarrollador” para instalar localmente.
Sólo para empaquetar esta extension, que funciona en Safari con el mismo código que en Firefox, tendría que pagar 99 USD/año por el Apple Developer Membership.
No, gracias.

Open source, hosteado en sourcehut

He hecho Glareless open source con la licencia Apache 2.0. El repositorio: glareless, está en sourcehut.

Estoy usando sourcehut por primera vez. El otro posible candidato era Codeberg. De cualquier forma, GitHub no. GitHub tiene varios problemas:

Está todo el rato intentando que uses Copilot y comandos IA.
Es una red social, donde los usuarios tienen una puntuación basada en el número de sus contribuciones al año. Como un fitness tracker.
Maldita gamificación, y el influjo de pull requests de gente que solo quiere tener buena puntuación en su perfil.

GitHub es sólo ligeramente menos molesto que Linkedin.

¿IA?

Espero que sourcehut mantenga los bots IA fuera de mi repositorio. Y que la ausencia de gamificación haga que si hay pull requests, sean de buena fe y no para tener trofeítos de logros.

No he usado IA para generar Glareless.

Cuando ya tenía mi primera versión funcional, decidí probar Claude Code, para ver si me valía la pena. Rápidamente llegué a la conclusión de que prefiero programar a mano, como llevo haciendo tres décadas.

Claude rápidamente generó una extensión que funcionaba, pero su forma de modificar los DOM de las páginas daba como resultado páginas feas, y no conseguí explicar a Claude cómo usar una estrategia más refinada.
Pero tengo que reconocer que la extensión generada por Claude tenía un control pop-up, que aunque yo no había pedido me pareció una buena idea. He adoptado la idea, y la ahora la extensión tiene un control pop-up para activar o desactivar la extensión en la pestaña activa.
O sea que tengo que reconocer algo de utilidad.

Seguí programando y rediseñando sin IA, hasta que finalmente di con un algoritmo de modificación de página que me pareció elegante y funcional.
Las conversaciones que hubiera tenido con un colega, y mi diálogo interno, no se parecen nada a las interacciones con Claude.

El flujo de hacer prompts sucesivos a un agente IA no es algo que yo disfrute. Para mí, programar es una actividad con un ritmo continuo, a veces meditativo y zen. La interacción con Claude me parece entrecortada.

Veo opiniones fuertes de gente dentro y fuera de la industria diciendo que quien no use agentes IA para programar se quedará obsoleto. Ojalá no!

¿Cómo funciona el algoritmo? (viva la recursión)

"¿Cambiar el color de fondo, no es super fácil?", imagino que te preguntas. Debería ser simplemente modificar el background-color en el <body> de la página web, ¿no? Pero la mayoría de páginas web usan elementos como <section>, <div>, <article> con diferentes colores de fondo para diferentes zonas de la página. El background-color modificado en <body> puede no ser aplicable más abajo en el DOM, en las zonas donde está la mayor parte del texto.

Siguiente idea … modificar background-color en los elementos que contienen texto. Por ejemplo, párrafos, representados por nodos <p> en el DOM.

Esto es lo que hacía Claude. El resultado es una página fea que parece como que un estudiante inseguro cogió un subrayador en un libro de texto:

modificando el color de fondo en párrafos

Estos nodos en el DOM como <p> o <a> o <em> generalmente no tienen descendientes, o sea son nodos hoja. Generalmente no tienen una modificación directa de su background-color, ni inline ni con selectores CSS, precisamente porque eso daría sensación de un estudiante inseguro subrayándolo todo.

Así que no queremos modificar background-color en la raíz del DOM, y seguramente tampoco en sus hojas. ¿Qué hacemos?

Inicialmente usé una serie de heurísticas para encontrar buenos nodos en el DOM donde cambiar el color de fondo. Pero tuve una idea mejor: recorrer el DOM, de la raíz a las hojas, usando recursión.

Creamos una función recursiva que, dado un nodo del DOM:

si es hoja
- si tiene un background-color explícito, y es muy brillante, cambiarlo y retornar false (para indicar que no requiere ya modificación)
- si tiene un background-color explícito, y NO es brillante, simplemente retornar false (no requiere modificación)
- si no tiene un color de fondo explícito, retornar true (pendiente de modificación más adelante)
si tiene descendientes:
- llamar recursivamente a sí misma para cada descendiente
- si algún descendiente tiene cambios pendientes (es decir, retornó true) Y este nodo tiene color de fondo explícito, modificar el color y retornar false
- si algún descendiente tiene cambios pendientes Y este nodo NO tiene color de fondo explícito, retornar true
- si ningún descendiente tiene cambios pendientes, retornar false

El algoritmo resultante configura background-color básicamente en los mismos nodos del DOM que la página original. Las páginas tendrán apariencia idéntica, salvo por el fondo de texto menos brillante. El código es algo más complicado que el resumen de arriba, pero no mucho más complicado.
Me encanta la recursión.