ブラウジング中の「あとで読みたい」を、画面右側でスマートに一時保存するChrome拡張機能
プロダクト概要
Webリサーチや日々のブラウジングにおいて、「今は読めないが、あとで必ず読みたい記事」を次々と見つけることがあります。しかし、ブラウザの標準ブックマークに保存し続けると、いつの間にか整理されない「ゴミ屋敷状態」になってしまうという課題がありました。
「あと読み君」は、この課題を解決するため、「その時の作業セッションに特化した、一時的なストック場所」を手軽に提供する拡張機能です。
使用技術 (Tech Stack)
- 言語: HTML5 / CSS3 / JavaScript (Vanilla JS)
- プラットフォーム: Google Chrome Extension (Manifest V3)
- 主要API:
chrome.sidePanel: シームレスなUI表示chrome.storage.local: データの永続化・状態管理chrome.tabs: アクティブなタブ情報の取得
※外部ライブラリ（ReactやVue等）に依存せず、素のJavaScriptによるDOM操作やドラッグ＆ドロップAPIを活用し、軽量かつ高速な動作を実現しています。
主要機能とこだわりのUX
1. Side Panel APIによる「作業を止めない」体験
従来のポップアップ型拡張機能とは異なり、最新の chrome.sidePanel APIを採用しました。別のタブやページに遷移しても常に画面右側にリストが常駐するため、思考を中断することなくシームレスな情報のストックとアクセスが可能です。
2. ユーザー心理に寄り添った「デフォルト消去」設計
本ツールの最大のコンセプトである「手軽さ」を追求するため、ブラウザ終了時にリストが自動で空になる設計をデフォルトとしました。
「いつか読むかも」という精神的負担や整理の手間をゼロにしつつ、必要な時だけは「保持」トグルをONにすることでストレージに維持できる、柔軟な状態管理を実装しています。
3. 保存と同時にタブを閉じる「高速ストック機能」
「後で読むために保存したのだから、目の前の画面からは消えてほしい」というユーザー心理に基づき、保存ボタンを押した瞬間に現在開いているタブを自動的に閉じる処理を実装しました。
※タブが1つしかない場合にブラウザ自体が終了してしまうのを防ぐため、ウィンドウ内のタブ数をカウントし、2つ以上ある場合のみ閉じるという安全設計を組み込んでいます。
4. 直感的なドラッグ＆ドロップ (Drag & Drop API)
外部ライブラリを使用せず、HTML5標準の Drag & Drop API を用いてリストの並び替え機能を実装しました。ユーザーが直感的に「読む優先度」を整理できるUIを提供しています。
5. 視認性を極限まで高めたリッチなデザイン
- ファビコンの自動取得
GoogleのAPIを活用し、保存したURLからサイトのアイコン（ファビコン）を自動取得・表示することで、視覚的にどのサイトか瞬時に判別できるようにしました。 - カラーカスタマイズとCSSによる工夫
ユーザーが自作の右クリックメニューから、ラベル全体の色を自由に変更可能です。どのような背景色を選んでも文字やアイコンがくっきり視認できるよう、CSSのtext-shadowやdrop-shadowを用いた縁取り処理を実装しています。
技術的な工夫点
- 状態管理の最適化
background.js(Service Worker) とsidepanel.js間でのデータ連携において、chrome.storageを単一の信頼できる情報源（Single Source of Truth）として扱い、データの不整合を防いでいます。 - カスタムコンテキストメニュー
ブラウザ標準の右クリックメニューをキャンセルし、DOM上に自作のポップアップメニューを生成。色変更や削除などのアクションを直感的に行えるようにしました。 - エラーハンドリング
Chromeの「新しいタブ」や「設定画面」など、拡張機能が干渉できない特殊なページで保存ボタンが押された際、プログラムがクラッシュしないよう適切なエラー処理を行っています。
今後の展望・学んだこと
この開発を通じて、Chrome拡張機能（Manifest V3）特有の非同期処理やアーキテクチャへの理解が深まりました。
また、開発の途中で「保存確認のアラートは煩わしいのではないか？」「デフォルトは保持ではなく消去の方が手軽なのではないか？」と自問自答し、仕様を逆転させる決定をしました。この経験から、「ユーザーが本当に求めている手軽なUXとは何か」を定義し、それを技術で形にする重要性を学びました。
※コメントポリシーはこちらから。