Desenvolvi uma extensão do Chrome que aplica destaque por frase para melhorar a concentração.
(github.com/hamsteak1488)Desenvolvi uma extensão do Chrome que faz destaque por frase e rolagem automática para facilitar a leitura de páginas da web. As imagens de demonstração estão no GitHub.
[Features]
- Destaque por frase
- Vários efeitos, como sublinhado, contorno, marca-texto e spotlight.
- É possível focar na frase desejada com um clique do mouse.
- É possível mover o foco para a frase anterior ou seguinte com as setas do teclado.
- Rolagem automática
- Rolagem automática até a frase em foco.
- Funciona corretamente mesmo em contêineres de rolagem aninhados.
- O usuário pode configurar a altura em que a frase deve ficar visível na tela após a rolagem.
- Versatilidade
- Foi confirmado que funciona bem em diversos ambientes, como Google, GitHub, ChatGPT, Notion, Youtube, GeekNews, HackerNews, BOJ, Naver, LinkedIn, Tistory, Velog e SamsungSDS.
- Até o momento, funcionou com sucesso em todas as páginas da web, exceto nos casos em que a árvore DOM muda em tempo real.
[Motivação do desenvolvimento]
Enquanto me preparava para entrevistas, eu precisava ler muitas notícias sobre empresas, mas às vezes minha concentração se dispersava e minha velocidade de leitura ficava muito lenta. Para tentar manter o foco de algum jeito, eu lia arrastando com o mouse a primeira letra de cada frase, marcando continuamente onde estava a frase que eu estava lendo.
Mas ter que usar o mouse a cada frase fazia meu pulso doer. Além disso, numa postura confortável, com os pés sobre a mesa e a cadeira reclinada para trás, era muito difícil mover o mouse com precisão.
Procurei extensões do Chrome que pudessem marcar a posição da leitura por frase, mas não havia nada assim entre os itens populares. Depois de vasculhar bastante a Web Store, encontrei apenas duas, mas não gostei porque não funcionavam em muitas páginas, modificavam a página da web, não separavam as frases com precisão e não permitiam ajustar o estilo do destaque como eu queria.
Então comecei a fazer uma para uso próprio, e conforme fui aprimorando, o resultado ficou bem melhor do que eu esperava. Achei que talvez pudesse ser útil para alguém e acabei até publicando na Web Store.
[Processo de desenvolvimento]
Na lógica de separação de frases, que é a parte central, apliquei uma abordagem de percorrer a árvore DOM em pré-ordem e identificar previamente as posições de início e fim das frases a partir de fragmentos de texto. Pensei ingenuamente algo como: “Basta separar as frases mais ou menos por pontos e sinais de interrogação e pronto, né?”. Mas quando tags como ``, se inseriam no meio das frases, a frase inteira não ficava contida em um único nó de texto, então precisei montar um algoritmo bem mais complexo.
A função de rolagem automática não estava no plano original, mas depois de concluir a lógica de separação de frases, percebi que, para rolar a página para baixo, eu teria novamente que pegar o mouse, e então comecei a implementá-la. Achei que bastaria usar o método scrollTo, mas em várias páginas, incluindo o ChatGPT, havia muitos casos em que apenas scrollTo não funcionava. Além disso, como scrollTo trabalha em nível de nó, e não de frase, eu também precisei resolver o problema de a rolagem não se mover quando várias frases estavam dentro de um mesmo nó de texto e o foco era alterado para a frase seguinte.
[Pedido de feedback]
Sei que talvez não seja adequado fazer esse tipo de pedido, mas, se por acaso você se interessar e experimentar, eu realmente agradeceria um feedback. Talvez porque venho divulgando em vários lugares, o número de usuários está aumentando aos poucos, mas até agora nem uma única pessoa deixou review.
Estou sentindo na pele que a ausência total de respostas assusta mais do que comentários negativos. Então qualquer opinião será muito bem-vinda: críticas, sugestões de melhoria, relatos de bugs ou até algo bem pequeno.
GitHub: https://github.com/hamsteak1488/focus-anchor
Chrome Webstore: https://chromewebstore.google.com/detail/focus-anchor/…
4 comentários
É um plugin muito bom!
Eu costumo selecionar o texto com o mouse enquanto leio, então isso é extremamente útil!
Acho que seria ótimo se também tivesse suporte a key bindings do vim!
E, por acaso, vocês têm planos de oferecer suporte ao Firefox também?
No momento, estou implementando a opção de definir atalhos de teclado e pretendo adicioná-la na próxima versão!
Também vou começar o suporte ao Firefox assim que terminar a refatoração do código.
É realmente uma função muito simples e boa!
Acho que vou instalar no trabalho e usar por bastante tempo.
O ponto negativo é basicamente não ter atalho.
Como tenho cada vez mais extensões, há coisas demais fixadas no topo, então seria bom também ter um atalho de teclado.
Obrigado pela opinião! Vou trabalhar para que o recurso de atalho possa ser adicionado já na próxima versão.