Desarrollé una extensión de Chrome que aplica un efecto de resaltado por oración para mejorar la concentración.
(github.com/hamsteak1488)Desarrollé una extensión de Chrome que resalta por oración y hace desplazamiento automático para que sea más fácil leer páginas web. Las imágenes de demostración están en GitHub.
[Features]
- Resaltado por oración
- Varios efectos como subrayado, contorno, marcador fluorescente y reflector.
- Se puede enfocar la oración deseada con un clic del mouse.
- Se puede mover el enfoque a la oración anterior o siguiente con las flechas del teclado.
- Desplazamiento automático
- Desplazamiento automático hacia la oración enfocada.
- Funciona con precisión incluso en contenedores de desplazamiento anidados.
- El usuario puede configurar la altura a la que debe quedar la oración dentro de la pantalla después del desplazamiento.
- Versatilidad
- Confirmé que funciona bien en diversos entornos como Google, GitHub, ChatGPT, Notion, Youtube, GeekNews, HackerNews, BOJ, Naver, LinkedIn, Tistory, Velog y SamsungSDS.
- Hasta ahora, ha funcionado correctamente en todas las páginas web excepto en los casos donde el árbol DOM cambia en tiempo real.
[Contexto de desarrollo]
Mientras me preparaba para entrevistas, tenía que leer muchas noticias relacionadas con empresas, pero a veces me distraía y mi velocidad de lectura se volvía muy lenta. Para mantener la concentración de alguna forma, cada vez que leía una oración iba arrastrando con el mouse la primera letra y así seguía marcando en qué oración estaba leyendo.
Pero tener que manipular el mouse cada vez que leía una oración me terminó doliendo la muñeca. Además, en una postura cómoda con los pies sobre el escritorio y la silla reclinada hacia atrás, era muy difícil mover el mouse con precisión.
Busqué extensiones de Chrome que permitieran marcar la posición de lectura por oración, pero entre las más populares no había nada así. Después de seguir buscando en la Web Store encontré exactamente dos, pero no funcionaban en muchas páginas, alteraban la página web, no separaban correctamente las oraciones y no me gustó que no se pudiera ajustar el estilo del resaltado como yo quería.
Así que empecé a hacerla yo mismo con la idea de usarla en solitario. Luego seguí mejorándola y terminé con un resultado bastante bueno, así que pensé que quizá a alguien más le podría ser útil y hasta la publiqué en la Web Store.
[Proceso de desarrollo]
Para la lógica de separación de oraciones, que es la parte central, apliqué un método que recorre el árbol DOM en preorden y va identificando las posiciones de inicio y fin de las oraciones a partir de fragmentos de texto. Pensé ingenuamente: “Bastará con separar más o menos por puntos y signos de interrogación, ¿no?”, pero si etiquetas como ``, se intercalan entre las oraciones, la oración completa no queda dentro de un solo nodo de texto, así que tuve que construir un algoritmo bastante complejo.
La función de desplazamiento automático no estaba en el plan original, pero cuando terminé la lógica de separación de oraciones me di cuenta de que, para seguir bajando por la página, otra vez tenía que agarrar el mouse, así que empecé a implementarla. Pensé que bastaría con usar el método scrollTo, pero en varias páginas web, incluyendo ChatGPT, había bastantes casos en los que no funcionaba solo con un scrollTo simple. Además, como scrollTo trabaja por nodo y no por oración, tuve que resolver el problema de que, cuando varias oraciones están dentro de un mismo nodo de texto, al mover el enfoque a la siguiente oración el desplazamiento no se movía.
[Buscando feedback]
Sé que quizá no sea muy apropiado pedir esto así, pero si les llamó la atención y llegaron a probarla, les agradecería mucho algún comentario. Gracias a que la he promocionado en varios lugares, el número de usuarios ha ido creciendo poco a poco, pero hasta ahora no ha habido ni una sola persona que deje una reseña.
Estoy comprobando en carne propia que la ausencia total de respuestas da más miedo que las críticas negativas, así que de verdad agradecería cualquier opinión: críticas, ideas de mejora, reportes de bugs o incluso detalles muy pequeños.
GitHub: https://github.com/hamsteak1488/focus-anchor
Chrome Webstore: https://chromewebstore.google.com/detail/focus-anchor/…
4 comentarios
¡Es un plugin excelente!
Suelo seleccionar texto con el mouse mientras leo, así que me parece súper útil.
¡Estaría bueno que también admitiera atajos de teclado de
vim!Y, por cierto, ¿tienen pensado dar soporte para Firefox también?
Actualmente estoy implementando la opción para asignar atajos de teclado y planeo agregarla en la próxima versión.
También avanzaré con el soporte para Firefox apenas termine la refactorización del código.
¡De verdad es una función muy simple y buena!
Creo que debería instalarla en la empresa y usarla por mucho tiempo.
Lo único que se extraña es que no tiene atajo de teclado.
Como cada vez tengo más extensiones, ya hay demasiadas fijadas arriba, así que también estaría bueno que tuviera una tecla rápida.
¡Gracias por tu opinión! Voy a desarrollarlo para que la función de atajos de teclado pueda agregarse de inmediato en la próxima versión.