Zenn Dev Joemike Articles Chrome Extension One Session Claude Code 2026
Claude Code で YouTube Shorts Chrome 拡張を 1 セッションで作り切った
- URL: https://zenn.dev/joemike/articles/chrome-extension-one-session-claude-code-2026
- 日付: 2026-06-25
- Tier: Tier 3
- 要旨: Claude Code で YouTube Shorts 説明文展開拡張を 2.5 時間で実装。Shadow DOM・非同期レンダリング・Manifest V3 権限・キャッシュ更新・URL 変化監視の 5 つの落とし穴を DevTools DOM 貼り付け質問で突破。
詳細
Claude Code で YouTube Shorts Chrome 拡張を 1 セッション（約 2.5 時間）で完成させた事例。通常 YouTube の ytp-button とは異なる ytSpecButtonShapeNextHost 仕様により querySelector が何度も null を返す問題に直面。Shadow DOM は shadowRoot 経由でアクセス、非同期レンダリングは MutationObserver で待機、Manifest V3 の host_permissions を追加、キャッシュ更新は chrome://extensions/ で手動、スワイプ時の URL 変化は監視ループで re-init。DevTools で見えている DOM 構造を丸ごと貼り付けて Claude Code に質問することで、一人での試行錯誤を数時間削減。コア実装は 100 行弱のシンプルな content.js。