メニュー
フルスクリーンチャットの実行時契約とデバッグ手法。Content/YTDLiveChat/ソース解決/スイッチ挙動/iframe 隠蔽方式/blur・background スタイルを変更するとき、またはフルスクリーン/ネイティブチャットの表示崩れ・スロットリング問題を調査するときに使う。live/archive/no-chat の境界、iframe の DOM 移動、CSS の隠蔽方式、スタイル適用先に関わるコードを触るときは必ず参照すること。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
Playwright E2E testing guide for Chrome extensions. Covers extension loading, MV3 Service Worker startup, page.evaluate() serialization boundary, chrome.storage test access, Shadow DOM interaction, iframe throttling, fixture design, and failure diagnostics. Use this skill only when writing, debugging, or stabilizing Playwright E2E tests for Chrome extensions. Do not use it for manual browser verification; use `agent-browser` or the project-specific `ylc-agent-browser` skill when the task is to open the site and inspect real browser behavior.
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
この拡張の web 上の動作確認・手動検証・表示崩れ調査を agent-browser で行うためのガイド。YouTube 上で live/archive/no-chat の挙動、フルスクリーン切替、overlay/switch/native chat/extension iframe の状態、DOM 移動、computed style、スクリーンショット、console/trace を確認するときはこの skill を使う。ブラウザで現物確認する作業では Playwright を使わない。Playwright は E2E テスト実行・追加・修正のときだけ `ylc-e2e-playwright` を使う。
この拡張の Playwright E2E テスト専用ガイド。E2E テスト実行・新テスト追加・失敗/フレーク調査・URL ドリフト修正・trace/PWDEBUG デバッグで使う。フルスクリーンチャット・チャットなし動画・リプレイ不可・アーカイブ遷移・SPA 遷移の E2E テストを扱う。実ブラウザでの手動動作確認や DOM/見た目の現物確認には使わず、その場合は `ylc-agent-browser` を使う。
このリポジトリ向けの Git 操作・コミット・PR 作成・PR レビュー手順。差分確認、コミット分割、PR 作成/ドラフト/更新、コードレビュー依頼のときに使う。
Technical blog post writing with structure, code examples, and developer audience conventions. Covers post types, code formatting, explanation depth, and developer-specific engagement patterns. Use for: engineering blogs, dev tutorials, technical writing, developer content, documentation posts. Triggers: technical blog, dev blog, engineering blog, technical writing, developer tutorial, tech post, code tutorial, programming blog, developer content, technical article, engineering post, coding tutorial, technical content
SOC 職業分類に基づく
| name | fullscreen-chat-contracts |
| description | フルスクリーンチャットの実行時契約とデバッグ手法。Content/YTDLiveChat/ソース解決/スイッチ挙動/iframe 隠蔽方式/blur・background スタイルを変更するとき、またはフルスクリーン/ネイティブチャットの表示崩れ・スロットリング問題を調査するときに使う。live/archive/no-chat の境界、iframe の DOM 移動、CSS の隠蔽方式、スタイル適用先に関わるコードを触るときは必ず参照すること。 |
live / archive / no-chat 境界の破壊を防ぎ、過去の回帰バグを再発させないためのガイド。実ブラウザでの確認は ylc-agent-browser を前提にする。
live_chat?v=<videoId> を使う。native iframe を borrow しないlive_chat_replay iframe のみ borrow する。動画遷移後に stale iframe を再利用しないcanToggle（スイッチ有効化）と sourceReady（attach 可否）は分離する。archive で sourceReady だけを switch 有効条件にしない（deadlock 回避）YouTube はフルスクリーン進入時に #chat-container を #secondary-inner から #panels-full-bleed-container に移動する。この挙動はコードからは読み取れず、ylc-agent-browser / agent-browser で実際に確認する必要がある。
落とし穴: #secondary にだけ CSS を適用しても、フルスクリーン中の #chat-container には効かない。#panels-full-bleed-container にも同等の処理が必要。
Chrome は表示面積ゼロまたは display: none 配下の iframe のタイマーを強くスロットルする。チャット iframe がスロットルされるとメッセージ更新が止まるため、隠蔽方式の選択が重要。
| 方式 | 使える場面 | 理由 |
|---|---|---|
display: none | iframe を含まない要素のみ | スロットルされるが影響なし |
visibility: hidden + position: fixed + width: 400px | iframe を含む要素 | 描画面積を維持しスロットルを回避 |
width: 0 + overflow: hidden | 使わない | 過去の回帰原因。スロットルされる |
iframe を含む祖先要素を隠すときは visibility: hidden + position: fixed + top: -200vh で画面外に配置し、pointer-events: none + z-index: -9999 で干渉を防ぐ。
body に適用する。host 側に filter をかけると iframe 全体がぼけて文字が読めなくなる--yt-live-chat-background-color は transparent を維持する。暗色化は内部変数のみで行うentrypoints/content/features/YTDLiveChatIframe/styles/iframe.css で html/body と主要 chat コンテナ背景を透過させる不具合を再現したら、以下の状態を採取して壊れている境界を特定する:
| 項目 | 確認方法 | 壊れている境界 |
|---|---|---|
| fullscreen 状態 | document.fullscreenElement | DOM 移動（上記セクション参照） |
| switch ボタン | 存在有無・aria-pressed 値 | toggle/overlay gating |
| native iframe | #chatframe の href・playable 状態 | source resolver |
| extension iframe | data-ylc-chat・data-ylc-owned・src | mode 判定・borrow/新規作成 |
スロットリング問題の詳細な診断手順は references/throttling-diagnostics.md を参照。