🎥 Chrome拡張機能「Fresh Douga」
YouTubeのホーム画面を鮮度順に整理し、新しい動画との出会いを最大化する拡張機能
💡 プロダクト概要
YouTubeのホーム画面は、視聴履歴に基づく「アルゴリズム最適化」により、同じチャンネルや似たような動画ばかりが表示されがちです。その結果、ユーザーが本来求めている「新しい発見（探索体験）」が損なわれているという課題がありました。
「Fresh Douga」は、YouTubeの推薦アルゴリズムを否定することなく、「鮮度」というフィルターをレイヤーとして重ねることで、ユーザーが直感的に新しい動画だけを探索できるようにする拡張機能です。
🛠 使用技術 (Tech Stack)
- 言語: JavaScript (ES6+), HTML5, CSS3
- プラットフォーム: Google Chrome Extension (Manifest V3)
- 主要技術:
MutationObserver: YouTubeの動的なDOM変更（スクロール読み込み等）の追従chrome.storage: ユーザーのモード設定の永続化正規表現 (Regex): 複雑なUIから日付テキストを抽出するロジック
✨ 主要機能
- Normal モード: YouTubeの標準アルゴリズムをそのまま利用します。
- 1 Week モード (🆕): 投稿から7日以内の動画のみを抽出して表示します。
- 1 Day モード (🌱): 投稿から24時間以内の最新動画のみを抽出して表示します。
⚙️ 技術的な工夫点・苦労したポイント
1. YouTubeの複雑なDOM構造への対応
YouTubeはモダンなフレームワーク（View Model）を採用しており、要素のクラス名や構造が環境やユーザーごとに動的に変化します。特定のクラス名に依存せず、innerText から正規表現を用いて「〇〇前」という日付テキストを抽出する堅牢なロジックを構築しました。
2. 安定したUXの実現
動画の並び替え（DOM移動）を行うと動画プレイヤーがクラッシュする問題があるため、「CSSによる非表示（display: none）」を用いる手法を採用しました。これにより、YouTubeの既存機能を損なうことなく、極めて高い安定性を実現しています。
3. パフォーマンスとUIの最小化
「設定画面」をあえて作らず、ヘッダーに配置したボタン1つで全ての操作を完結させました。MutationObserver を活用し、スクロールで動画が増えるたびに自動でフィルタリングが適用されるよう、効率的なDOM監視を行っています。
🚀 学んだこと
YouTubeのような巨大なSPA（Single Page Application）において、サイトの構造を壊さずに機能を拡張する難しさを学びました。特に「DOMの読み込みタイミング」や「言語設定による日付形式の差異」など、実運用を見据えたエッジケースへの対応が、プロダクトの質を左右することを痛感しました。
ユーザーに「設定」を強いるのではなく、「直感的に切り替えられるシンプルさ」こそが、ブラウザ拡張機能において最も愛されるUXであると確信しました。
※コメントポリシーはこちらから。