Chrome拡張機能 · MV3 無料 v1.5.0 YouTube専用

IMGLAB ▶
YouTube Immersive

YouTubeを純粋で没入感あふれるシネマ体験に変える拡張機能。自動シアターモード、余計な要素を非表示、4K品質の強制設定、任意のアスペクト比へのズーム、動画回転、スクリーンショット機能まで内蔵。これ一本ですべて揃う。

4K
Auto quality
default setting
3
Player buttons
zoom · rotate · snap
3
Keyboard
shortcuts
0
Sign-up
required
IMGLAB YouTube Immersive — Settings Panel
設定タブ · デフォルト表示

すべての機能をシンプルなパネルで設定

ポップアップは設定タブで開き、関連する設定をカードでグループ化。没入モードの切替、自動画質の設定、不要要素の非表示、ズームの調整まで、すべてリアルタイムで反映。ページの再読み込みは不要。

  • ✓ 没入モードのマスタートグル — オン/オフはセッションをまたいで保持
  • ✓ 自動HD — 「Auto 4K」「Auto FHD」など動的ラベル表示
  • ✓ ライブチャット、エンドスクリーン、コメント欄を個別に非表示
  • ✓ ズームtoフィル — アスペクト比プリセット(Off / 16:9 / 21:9 / 4:3)
  • ✓ ズーム微調整 ±0.1 ステップ · ダブルクリックでリセット
  • ✓ 拡張機能アイコンに画質バッジ表示 — 4K / QHD / FHD / HD
IMGLAB YouTube Immersive — Shortcuts Panel
ショートカットタブ · 全設定

プレイヤーボタン、スクリーンショット設定、キーの変更

ショートカットタブは一度設定すれば忘れてよい項目を管理。プレイヤーに表示するボタン、スクリーンショットの動作、3つのキーボードショートカット。キーバッジをクリックで記録モード開始、行にホバーでリセットボタンが表示。

  • ✓ ズーム・回転・スクリーンショットボタンの表示/非表示
  • ✓ スクリーンショットへの回転・ズームクロップを個別に適用
  • ✓ 没入トグル — N · 動画回転 — R · スクリーンショット — P
  • ✓ キーバッジをクリック → 記録モード · 任意のキーで保存
  • ✓ 修飾キー対応: Ctrl, Alt, Shift の組み合わせも可
  • ✓ 各行にリセットボタン(ホバーで表示)
🎬
自動シアターモード — 全動画対応

YouTubeの動画を開いた瞬間、自動的にシアターモードに切替。ナビゲーションバー・サイドバー・余計な要素をすべて非表示にし、動画が画面を埋め尽くす。ボタン操作不要、遅延ゼロ。yt-navigate-finish を使ったSPAナビゲーション対応で、プレイリスト遷移や戻るボタンでも正常動作。

🔍
ズームtoフィル — あらゆるアスペクト比に対応

プレイヤーのズームボタンをワンクリックで21:9ワイドスクリーン表示に切替、レターボックスの黒帯を即座に除去。ボタンをスクロールして±0.05単位で微調整。ポップアップではOff / 16:9 / 21:9 / 4:3プリセットを選択可能。没入モード・通常モード・任意の回転角度でも動作。ズームと回転は1つのCSS transformで同時計算 — 干渉しない。

📺
自動HD画質 — サイレント4K強制設定

YouTubeの内部プレイヤーAPIを使い、全動画で自動的に設定した画質(デフォルト: 4K / 2160p)を適用。画質レベルの読み込みを待ち、最適な画質を選択、適用確認後に必要なら再試行。拡張機能アイコンに 4K / QHD / FHD / HD / MAX のバッジ表示でポップアップ不要。

🔄
完璧なスケールで動画を回転

Rキーで 0° → 90° → 180° → 270° と回転。レンダリング要素の実寸(ストリーム解像度ではない)を使った正確なスケール計算で、どの角度でもプレイヤーを埋め尽くす表示を実現。↺ ボタンはシアターモード切替や広告遷移を経ても消えないリトライ機能付きでYouTubeのプレイヤーコントロールに注入。

📷
スクリーンショット内蔵 — 回転・ズームに対応

Press Pキーまたはカメラボタンで85%品質のJPEGを保存。スクリーンショットは回転対応(表示に合わせてキャンバスを回転)、ズームクロップ対応 — 軸ごとの可視領域を計算してクロップしない軸はフル解像度を保持。854×480動画を4:3ズームで撮ると640×480(641×360ではない)で保存。ファイル名に動画タイトルとタイムスタンプを含む。

💬
完全な雑然要素の除去

ライブチャットを完全なカラム折りたたみで非表示(黒い隙間なし)、エンドスクリーンカード、コメント欄・サイドバーも個別にトグル可能。ライブチャットの修正はチャット非表示後も402pxを維持するYouTubeの実際のレイアウトコンテナ(#panels-full-bleed-container)を直接ターゲット。YouTubeのアンビエントグローは常時無効 — 純粋な黒背景、カラーブリードなし。

2ワールドアーキテクチャ — Isolated + MAIN

YouTubeのプレイヤーAPI(getAvailableQualityLevels、setPlaybackQualityRange)はページ固有のJSコンテキスト(MAINワールド)にのみ存在し、Chrome APIはisolatedワールドでのみ動作。IMGLABはCustomEventで通信する2つのコンテンツスクリプトを使用して両方のワールドをブリッジ。

1
content.js — Isolatedワールド

document_startで起動し、すべてのchrome.* APIにアクセス可能。起動前にchrome.storage.syncから設定を読み込み、初回フレームから保存済みの設定を適用。CSS注入、シアターモード、ナビバー、チャット折りたたみ、回転、ズーム、スクリーンショットを管理。ポップアップのメッセージを仲介し、プレイヤー設定をMAINワールドに送信。

↓
2
player.js — MAINワールド

YouTubeの内部プレイヤーと並行してページのJSコンテキストで動作。content.jsからのimglab-player-settings CustomEventを受信。ナビゲーション後800ms待って画質レベルの読み込みを確認後、player.setPlaybackQualityRange()を呼び出し、300ms後に適用確認し必要なら再試行。SPAナビゲーションとハードページロードの両方に対応。

↓
3
background.js — サービスワーカー

バッジ更新のみを担当するミニマルなサービスワーカー。content.jsがSET_BADGEメッセージを送信すると、background.jsがタブごとにchrome.action.setBadgeText/BackgroundColor/TextColorを呼び出す。各YouTubeタブが独立して異なる画質バッジを表示可能。ストレージは一切操作しない。

↓
4
ポップアップ — ストレージ優先、その後ライブ状態

ポップアップは常にchrome.storage.syncを最初に読み込んで即座にレンダリング — 「読み込み中…」のちらつきなし。その後オプションでコンテンツスクリプトにライブ状態を問い合わせ。ライブレスポンスではステータスドットのみ更新 — 設定は上書きされない。ポップアップ表示中にプレイヤーボタンをスクロールしてもズーム表示が500msごとのポーリングで同期。

🔍 ズームtoフィル — 技術的な詳細
📐
軸ごとのクロップ計算

スクリーンショットは軸ごとに解像度を保持。fracX = playerWidth / (videoOffsetWidth × zoom) — fracX = 1.0なら、その軸は全体が表示されておりクロップしない。クリップされた軸のみ縮小。16:9動画を4:3ズームすると両端のみクロップ、高さはフルで保持。

🔗
統合トランスフォーム

回転スケールとズームは常に1つのapplyVideoTransform()呼び出しで同時計算。90°/270°ではfinalScale = rotationFillScale × zoomScale。video.style.scaleへの2つの別々の代入は互いを上書きするため、絶対に許容しない。

🎯
スマートなフロア処理

微調整ズームのフロアは1.0 / AR_SCALES[currentZoomAR] — 固定値の1.0ではない。21:9(ベーススケール×1.31)が有効な場合、合計が×1.00を保てるためfineZoomは0.762まで下げられる。1.0に固定するとARプリセット使用時にマイナスボタンが完全に機能しなくなる。

⚡
プレイヤーボタンのUX

シングルクリックでOff ↔ 21:9をトグル。スクロールで±0.05ずつ調整。クリックで設定した場合はAR名(”21:9″)を表示、スクロール後は実際の比率(”×1.31″)に切替。×1.00までスクロールで戻るとOffに自動リセット。

アスペクト比プリセット
PresetScaleUse Case
Off×1.00ズームなし — ネイティブ表示
16:9×1.00overflow:hiddenを有効化(微調整のアンカー)
21:9×1.3125シネマワイドスクリーン — レターボックスの黒帯を除去
4:3×1.3333旧TV / DVDコンテンツ — ピラーボックスの黒帯を除去
内蔵スクリーンショット — 見た目以上に賢い
🎞️
フルネイティブ解像度

video.videoWidth / video.videoHeight — 縮小された表示サイズではなく、ストリームの実際のピクセル数。4K動画はクロップ前に3840×2160のフル解像度で保存。

🔄
回転対応キャンバス

90°/270°出力ではキャンバスの縦横が入れ替わる(縦型JPEG)。ctx.translate + ctx.rotate + drawImage — 出力は画面上の表示と完全に一致。

✂️
ズームクロップ

軸ごとの可視領域を計算してプレイヤーの表示範囲を正確に再現。一様なズーム分割は行わず、クロップしない軸はネイティブ解像度を保持。

📁
スマートなファイル名

{タイトル} {分-秒}.jpg — 例: My Video 4-32.jpg。長時間動画は時間も追加。タイトルはYouTubeの見出し要素から取得。

📷 IMGLAB Video Screenshotユーザー向けフォールバック: 内蔵スクリーンショットはIMGLAB Video Screenshot拡張機能を未インストールのユーザー向けの補助機能。両方の共存が可能 — ボタンクラスとトーストコンテナが異なる。
⚙️ 重要な実装上の判断
🚦
yt-navigate-finish のみ使用

唯一の正しいナビゲーショントリガー。history.pushStateをパッチする素朴なアプローチはDOMが安定する前に発火し重複排除ガードを汚染、実際のナビゲーションイベントがサイレントにスキップされる。コンソールタイミングで診断・確認済み。

🔁
4回リトライのボタン注入

YouTubeはシアターモード切替・広告遷移・フルスクリーン変更時に.ytp-right-controlsをサイレントに再構築する。単一の500msタイムアウトでは不十分。500 / 1500 / 3000 / 5000msの4回リトライでズーム・回転・スクリーンショットボタンの確実な再表示を保証。

💬
ライブチャット隙間の修正

YouTubeのライブシアターレイアウトは#panels-full-bleed-containerを使用し、チャット非表示後も402pxのカラム幅を保持する。ytd-live-chat-frameのみをターゲットにすると黒い空白が残る。修正ではコンテナを折りたたみ、#player-full-bleed-containerにflex: 1 1 100%を強制。

🖥️
スケール計算にオフセット寸法を使用

CSS scaleはストリーム解像度(3840×2160)ではなく、レンダリングされた要素のサイズ(例: 775×436px)に適用される。videoWidth/videoHeightを使うと0.34×スケールで中央に小さな動画が表示される。offsetWidth/offsetHeightで正しい1.71×が得られ、プレイヤーを埋め尽くす。

⌨️
Nキーはセッション限定

Nキーのトグルはストレージに保存しない — 意図的な仕様。保存してしまうと、コメントを確認するためにオフにするだけで以降の全動画の没入モードが無効化される。ポップアップのトグルは永続保存、キーボードショートカットは現在のセッションのみに作用。

🛡️
ポップアップ抑制

ナビゲーション後8秒間、YouTubeのおすすめ・アップセルポップアップを非表示。ytd-popup-container内のtp-yt-paper-dialogとytd-mealbar-promo-rendererのみをターゲット — コンテナ自体は対象外(IMGLABのスクリーンショットトーストをブロックしないため)。

3つのデフォルトショートカット — すべて変更可能

3つのショートカットはすべてショートカットタブで設定。キーバッジをクリックして記録開始 — 任意のキーまたは修飾キーの組み合わせを押す。Escapeで現在のキーを変更せずにキャンセル。

アクションデフォルトキー動作保存?
没入モードをトグル N すべての没入CSSとシアター強制をオン/オフ ⚡ セッション限定
動画を90°回転 R 0° → 90° → 180° → 270°をサイクル。ナビゲーション時にリセット。 ⚡ セッション限定
スクリーンショットを撮影 P タイトル+タイムスタンプ付きJPEGを保存。回転とズーム設定を反映。 ✅ 常時
💡 NとRのセッション限定は意図的な仕様。Nキーで没入モードをオフにするたびに保存されてしまうと、コメント確認のために一時オフにするだけで以降の全動画が影響を受ける。永続設定はポップアップのトグルを使用。
画質バッジ — 設定を一目で確認

拡張機能アイコンに画質バッジを表示するので、現在の画質確認のためにポップアップを開く必要がない。バッジはタブごとに設定 — 複数のYouTubeタブが同時に異なる値を表示可能。

8K
4320p — Highres

8Kダウンサンプリングの恩恵を受けられるモニター向け

4K
2160p — デフォルト

あらゆるスクリーンで画質と帯域幅の最良バランス

QHD
1440p

1440pネイティブモニターに最適

FHD
1080p

フルHD — ほとんどの回線で安定

HD
720p

低速回線でも安定

OFF
自動HD無効

YouTubeが自動的に画質を選択

⭐ なぜデフォルトが4Kで最高画質ではないのか? 1440pスクリーンで4Kを設定すると、より高いビットレートとダウンサンプリングの鮮明さにより、ネイティブ1440pより高画質になる。8Kはデフォルトから除外 — ほとんどのハードウェアでは非実用的で、標準的なモニターでは帯域を消費するだけで見た目に変化なし。
🔗 IMGLABファミリー全体と連携するように設計
⚡ Video Speed Control

Speed ControlはシャドウDOMオーバーレイ(mode: 'open')を使用。没入モード有効時、IMGLABはwrapper.shadowRoot.getElementById('ctrl').classList.add('hidden')でオーバーレイを非表示。没入モード無効時に復元。Speed Control側の変更は一切不要。

✅ 完全互換
📷 Video Screenshot

Screenshot拡張機能はdata-imglab-btn属性のボタンを注入。IMGLABは異なるクラス(.imglab-zoom-btn等)を使用。スクリーンショットのトーストはdocument.bodyに追加 — ポップアップ抑制はytd-popup-container内のみを対象とし、bodyには影響しない。競合なし。

✅ 完全互換
🚀 1分以内に使い始められる
1
Chromeに追加

Click Chromeに追加 — 無料 above. Installs instantly from the Chrome Web Store. No sign-up, no permissions beyond YouTube.

2
YouTubeの動画を開く

youtube.com/watch?v=...の任意のページに移動。拡張機能が自動的に有効化 — シアターモードに切替、ナビバーがスライドアップ、画質が4Kに設定される。

3
Nでトグル、Rで回転、スクロールでズーム

Nキーで没入モードを一時無効化。Rキーで縦動画を回転。プレイヤーコントロールのズームアイコンをホバーしてスクロールで21:9コンテンツにズーム。

4
ポップアップでカスタマイズ

ツールバーのIMGLABアイコンをクリック。有効にする機能の切替、画質ターゲットの変更、ショートカットの再マップ、スクリーンショット設定の変更 — すべて現在のページを離れずに完了。

無料 · YouTube専用 · コミュニティサポート

IMGLABを維持・アップデートし続けるために

IMGLAB YouTube Immersiveは完全無料。広告なし、データ収集なし、サブスクなし。ライブチャット隙間の発見、軸ごとのクロップ計算、ズームと回転の統合トランスフォームなど、すべての修正に実際のデバッグ時間が費やされています。あなたのサポートがそれを支えています。

🔧
YouTubeの頻繁なDOM変更とプレイヤーAPIの更新への対応
✨
新機能: ズームプリセット追加、プレイヤーボタン追加、高度なスクリーンショットオプション
🌱
長期: クロスブラウザ対応、寄付キーシステムによるIMGLAB Pro機能

1回限り · 金額自由 · アカウント不要 · 30秒

❤️ を込めて作成 by IMGLAB
Ko-fi  ·  Buy Me a Coffeeで支援  ·  [email protected]