J’ai développé une extension Chrome qui applique un effet de surlignage phrase par phrase pour améliorer la concentration.

J’ai développé une extension Chrome qui surligne phrase par phrase et effectue un défilement automatique pour rendre la lecture des pages web plus confortable. Des images de démonstration sont disponibles sur GitHub.

[Features]

• Surlignage phrase par phrase
  • Divers effets comme le soulignement, le contour, le surligneur ou le projecteur.
  • Possibilité de mettre au point la phrase souhaitée par clic de souris.
  • Déplacement du focus vers la phrase précédente ou suivante avec les flèches du clavier.
• Défilement automatique
  • Défilement automatique jusqu’à la phrase focalisée.
  • Fonctionne correctement même dans des conteneurs de défilement imbriqués.
  • L’utilisateur peut définir la hauteur à laquelle la phrase doit apparaître à l’écran après le défilement.
• Polyvalence
  • Fonctionne bien dans de nombreux environnements comme Google, GitHub, ChatGPT, Notion, Youtube, GeekNews, HackerNews, BOJ, Naver, LinkedIn, Tistory, Velog et SamsungSDS.
  • À ce jour, fonctionnement réussi sur toutes les pages web, sauf lorsque l’arbre DOM change en temps réel.

[Contexte du développement]

En préparant des entretiens, je devais lire beaucoup d’actualités sur les entreprises, mais il m’arrivait parfois de perdre ma concentration et de lire très lentement. Pour essayer de rester concentré, je lisais en faisant glisser la souris sur la première lettre de chaque phrase afin de garder en permanence un repère sur la phrase que j’étais en train de lire.

Mais devoir manipuler la souris à chaque phrase finissait par me faire mal au poignet. De plus, dans une position confortable, les pieds sur le bureau et la chaise inclinée vers l’arrière, il était très difficile de déplacer la souris avec précision.

J’ai cherché une extension Chrome capable d’indiquer la position de lecture phrase par phrase, mais je n’ai rien trouvé de tel parmi les résultats populaires. En fouillant davantage le Web Store, j’en ai bien trouvé exactement deux, mais elles ne fonctionnaient pas sur beaucoup de pages, modifiaient les pages web, découpaient les phrases de manière imprécise et ne permettaient pas d’ajuster librement le style de surlignage, ce qui ne me convenait pas.

J’ai donc commencé à en créer une pour mon usage personnel. En continuant à l’améliorer, j’ai obtenu un résultat plutôt satisfaisant, et je me suis dit que cela pourrait peut-être être utile à d’autres, au point de la publier aussi sur le Web Store.

[Processus de développement]

Pour la logique de segmentation des phrases, qui est au cœur du projet, j’ai adopté une approche consistant à parcourir l’arbre DOM en parcours préfixe et à repérer les positions de début et de fin des phrases à partir des fragments de texte. Je pensais naïvement que « ça devrait suffire de séparer grossièrement les phrases avec des points et des points d’interrogation ». Mais lorsque des balises comme , s’intercalent entre les phrases, une phrase entière ne se retrouve pas forcément dans un seul nœud de texte, ce qui m’a obligé à concevoir un algorithme assez complexe.

La fonction de défilement automatique n’était pas prévue au départ, mais une fois la logique de segmentation terminée, je me suis rendu compte qu’il fallait de nouveau saisir la souris pour faire défiler la page, et j’ai donc commencé à l’implémenter. Je pensais qu’il suffirait d’utiliser la méthode scrollTo, mais sur plusieurs pages web, y compris ChatGPT, il arrivait assez souvent qu’un simple scrollTo ne fonctionne pas. De plus, comme scrollTo travaille à l’échelle des nœuds et non des phrases, il a fallu résoudre le problème suivant : lorsqu’un même nœud de texte contient plusieurs phrases, déplacer le focus vers la phrase suivante ne provoque aucun défilement.

[Demande de retours]

Je sais que ce genre d’appel n’est pas très élégant, mais si cela vous intrigue et que vous l’essayez, je vous serais reconnaissant de me faire un retour. Grâce aux différents endroits où j’en ai parlé jusqu’à présent, le nombre d’utilisateurs augmente petit à petit, mais personne n’a encore laissé le moindre avis.

Je découvre par moi-même que l’absence totale de réactions peut être plus intimidante que les critiques. Qu’il s’agisse d’une critique, d’une piste d’amélioration, d’un signalement de bug ou même d’un détail tout à fait mineur, je vous serais vraiment reconnaissant de laisser votre avis.

GitHub: https://github.com/hamsteak1488/focus-anchor

Chrome Webstore: https://chromewebstore.google.com/detail/focus-anchor/…

[hwhang0917]

C’est vraiment un excellent plugin !
J’ai l’habitude de sélectionner le texte avec la souris en lisant, donc c’est extrêmement utile !

Ce serait bien s’il prenait aussi en charge les raccourcis clavier de type vim !
Et prévoyez-vous éventuellement une prise en charge de Firefox également ?

[hamsteak]

Je suis en train d’implémenter l’option d’attribution de raccourcis clavier et je prévois de l’ajouter dans la prochaine version !

Je lancerai également la prise en charge de Firefox dès que le refactoring du code sera terminé.

[vigorous5537]

C’est vraiment une fonctionnalité simple et très utile !
Je vais l’installer au bureau et m’en servir longtemps.

Le seul point un peu regrettable, c’est l’absence de raccourci clavier.
Comme j’ai de plus en plus d’extensions, il y en a déjà trop d’épinglées en haut, donc ce serait bien d’avoir aussi un raccourci.

[hamsteak]

Merci pour votre avis ! Je vais travailler pour que la fonctionnalité de raccourcis clavier puisse être ajoutée dès la prochaine version.