リーディングリストをもっと使いやすくするChrome拡張`AtodeYomu`をリリースした
はじめに
読みたい記事があるがちょうど今は読む時間がなかったり、長くて読み終えられなかったとき、後で読み返せるようにどこかに残しておきたいときがある。自分はブックマークに「後で読む」フォルダを作ってそこに残していたが、読み終わったページもどんどん溜まっていって整理するのが億劫になる。Chromeブラウザにあるリーディングリストはサイドパネルに表示すれば便利だが、画面が狭くなるし、サイドパネルで表示しない場合はその機能にアクセスするのに結構手間がかかる。
そんな面倒を解決するためにリーディングリストを拡張したChrome拡張、AtodeYomuをリリースした。名前の由来は、今まで自分が使っていた「後で読む」という名前のブックマークフォルダから。
ストアは以下のリンクから。
どんな拡張か
動きが分かる方が早いと思うので、まずはこちらの紹介用の動画を見てほしい。
以下のことを実現できる。
- 右クリックで表示されるコンテキストメニューから、今読んでいるページをリーディングリストに簡単に追加できる。
- リーディングリストに追加されたページの右下に既読用のボタンが表示され、それを押すだけでページを既読状態にできる。
- また、スクロールに応じて既読ボタンのインジケーターが進み、最後まで読み終えると自動でページを既読状態にする。
- リーディングリストからの削除も右下のボタンから簡単にできる。
元々の自分の課題が小さいものだったのもあって、機能もシンプルになっている。
開発メモ
AtodeYomuを作るにあたっての実装面のメモや小ネタをいくつか紹介する。
まず、いつものようにコードをGitHubに公開している。
今回の開発において新しい挑戦はしていないが、UIの作成にSvelteを使ってみた。ページ右下に表示しているボタンはcontent_scriptsから制御しており、このUIの作成にSvelteを使った。いつもはReactなので気分転換に、と言うのが主な理由。小さい拡張なのでファイルサイズも無視できる範囲だと判断した。
初期の構想ではpopupも作成し、そのUIの構築にSvelteを作ろうと思っていた。popupでは既読ページの一括削除機能や、ボタンの表示位置やスクロールでの自動既読機能のオンオフ制御といったカスタム設定機能などを提供しようと思っていた。しかし、現在の状態まで作り切ったときにこれで十分だと感じ、popupまで作るのはYAGNI味を感じたのでやめた。
Svelteを使った他の理由としては、アニメーションの作りやすさがある。このおかげで、既読用ボタンのアニメーションはSvelteのtransitionを使って簡単に実現できた。
最後に、今回得られた小さな知見としては以下。
- content_scriptsでは
import構文はサポートされていないので1ファイルで完結する必要がある。ビルドツールとしてViteを使っている場合は、build.inlineDynamicImportsをtrueに設定することで対応可能。しかしこの設定はエントリファイルが複数の場合は使うことができないので、vite.configを複数用意してあげる必要がある。 - content_scriptsで表示するUIのスタイルにTailwindCSSを使うのは避けた方が良い。ホストのページでTailwindCSSが使われている場合、それと競合してしまってホスト側にも拡張側にも良くない影響を与えかねない。その点、SvelteであればCSSのスコープが閉じているので良かった。
おわり
Chromeブラウザのリーディングリストに少し不便を感じている方はぜひ使ってみてほしい。拡張機能に関して使いにくい箇所やフィードバックがあれば、GitHubの方にイシューを気軽に投げてほしい。気が向いたら対応します。
