Google Image Expanded Preview

- 1. こだわりポイント（技術詳細） 2. 操作パネル（「前の画像」「次の画像」ボタンの並び）に追加された を使用し、ユーザーの好みの表示モードをブラウザを閉じても維持するように設計しました。 - - 任意の画像をクリックしてプレビューを表示します。 既存の操作ボタン群に「拡大/縮小」ボタンを自動で追加。ワンクリックで切り替え可能です。 状態の永続化: 表示状態の記憶: クラスを付与することで、google純正のuiアニメーションとの干渉を防いでいます。 右側に小さく表示されるプレビューを、画面いっぱいのダイナミックなサイズに拡張します。 拡大表示に合わせて、関連画像リストも画面幅いっぱいに最適化されたグリッド表示（タイル状）に再配置されます。 アニメーション時のみ一時的に 拡大・縮小時に滑らかなトランジションを適用し、心地よい操作感を実現しました。 5. - 使い方 シームレスなトグル: `chrome.storage.local` アスペクト比の維持: googleの動的な要素生成を監視し、画像が切り替わるたびに自動でボタンを再配置します。 スムーズなアニメーション: 低干渉設計: をクリックしてください。 拡大表示モードで、細部まで画像を楽しむことができます。 🌟 🛠 スマート・レスポンシブ: - - - - 拡大・縮小の状態をブラウザに保存します。一度「拡大表示」にすれば、次に画像を開いた際も自動的に拡大された状態で表示されます。 アスペクト比を維持したまま、画面の縦横どちらか限界まで画像を拡大表示するロジックを組んでいます。 拡大表示プレビュー: 4. 📝 google画像検索で好きなワードを検索します。 - mutationobserverの活用: `transition` pc版google画像検索のプレビュー画面（サイドパネル）を、スマートフォン版のような没入感のある拡大表示に拡張するchrome拡張機能です。 3. 拡大アイコン 主な機能 一度モードを選択すれば、その設定は保存され、他の画像を見る際も維持されます。