集中力向上のため、文単位でハイライト効果を付けるChrome拡張機能を開発しました。

 (github.com/hamsteak1488)
8 ポイント 投稿者 hamsteak 2025-06-28 | 4件のコメント | WhatsAppで共有

ウェブページを読みやすくするため、文単位のハイライトと自動スクロールを行うChrome拡張機能を開発しました。デモ画像はGitHubにあります。

[Features]

  • 文単位のハイライト
    • 下線、アウトライン、蛍光ペン、スポットライトなど多様な効果。
    • マウスクリックで任意の文にフォーカス可能。
    • キーボードの矢印キーで前の文、次の文へフォーカス移動可能。
  • 自動スクロール
    • フォーカスした文へ自動でスクロール移動。
    • ネストしたスクロールコンテナでも正確に動作。
    • スクロール後に文を画面内のどの高さに配置するかをユーザーが設定可能。
  • 汎用性
    • Google、GitHub、ChatGPT、Notion、Youtube、GeekNews、HackerNews、BOJ、Naver、LinkedIn、Tistory、Velog、SamsungSDS など、さまざまな環境でよく動作することを確認。
    • 現時点では、リアルタイムでDOMツリーが変化する場合を除くすべてのウェブページで動作に成功。

 

[開発の背景]

面接準備をしながら企業関連のニュースをたくさん読まなければならなかったのですが、ときどき集中が散って読書速度が非常に遅くなることがありました。何とか集中力を維持しようとして、マウスで一文読むたびに最初の文字をドラッグしながら、今読んでいる文がどこなのかをずっと表示していました。

しかし、文を読むたびに毎回マウスを操作しなければならず、手首が痛くなりました。また、机に足を乗せて椅子を後ろに倒した楽な姿勢では、マウスを正確に動かすことがとても難しかったです。

文単位で読んでいる位置を表示できるChrome拡張機能を検索してみましたが、人気項目の中にはそのようなものはありませんでした。ウェブストアを探し続けた結果、ちょうど2つ見つけはしたものの、多くのウェブページで動作せず、ウェブページを変形させ、文単位の区切りも正確ではなく、ハイライトスタイルを思い通りに調整できない点が気に入りませんでした。

そこで自分ひとりで使うつもりで直接作り始めたのですが、その後も改善を重ねていくうちにかなり良い出来になり、誰かの役に立つのではないかと思ってウェブストアにまで公開してみました。

 

[開発過程]

中核となる文分割ロジックには、DOMツリーを先行順巡回しながらテキスト断片から文の開始位置と終了位置を見つけておく方式を適用しました。「だいたいピリオドと疑問符で文の区切りを判定すれば終わりだろう？」と安易に考えていましたが、タグが文の間に挟まっていると1つのテキストノードに文全体が収まらないため、アルゴリズムをかなり複雑に構成しなければなりませんでした。

自動スクロール機能はもともと計画になかったのですが、文分割ロジックを完成させたあと、今度はスクロールを下げるためにまたマウスを握らなければならないことに気づき、実装を始めました。自動スクロール機能は、適当に scrollTo メソッドを使えばすぐできるだろうと思っていましたが、ChatGPTを含むさまざまなウェブページで単純な scrollTo だけでは動作しないケースがかなり多くありました。また、scrollTo は文ではなくノード単位で使われるため、1つのテキストノード内に複数の文がある場合、次の文へフォーカスを移動してもスクロールが動かない問題を解決しなければなりませんでした。

 

[フィードバックのお願い]

こういうお願いが適切でないことは分かっていますが、もし興味を持って一度使ってみていただけたなら、ぜひフィードバックをお願いします。これまでいろいろな場所で紹介してきたおかげか、ユーザー数は少しずつ増えているものの、まだレビューを残してくれた人は一人もいません。

反応がないことは悪評より怖いと身をもって感じている私に、批評、改善案、バグ報告、そのほか本当に些細なことでも構いませんので、ご意見を残していただけたら本当にありがたいです。

 

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

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

関連記事

4件のコメント

 
hwhang0917 2025-07-03

とても良いプラグインですね！
マウスでテキストを選択しながら読むタイプなので、すごく便利です！

vim キーバインドにも対応すると良さそうですね！
それと、Firefox も今後対応予定はありますか？
 
hamsteak 2025-07-03

現在、ショートカットキーの割り当てオプションを実装中で、次のバージョンで追加する予定です！

Firefox対応も、コードのリファクタリングを終え次第、すぐに進めてみます。
 
vigorous5537 2025-06-28

本当にシンプルで良い機能ですね！
会社に入れて長く使いたいです。

惜しい点は、shortcutがないことくらいです。
拡張機能が増えると上部に固定されたものが多くなりすぎるので、ショートカットがあるのも良さそうです。
 
hamsteak 2025-06-28

ご意見ありがとうございます！ショートカットキー機能は、できるだけ次のバージョンに追加できるよう開発してみます。