新章案: Claude Code × Claude in Chrome（ネイティブアプリ版でブラウザ操作）

[watanabe-kohei-jp]

背景

Claude Code はブラウザを直接操作・観察できる（Claude in Chrome）。フォーム入力・スクショ・DOM / コンソール確認まで AI に任せられるが、導入方法が 2 系統あり、選択を間違えると検証ができなくなる。

• NPM 版: タブが MCP の tab group の外に作られ、Claude Code から DOM / JS / スクリーンショットにアクセスできない（＝「ユーザーに目視確認を丸投げ」になる）
• ネイティブアプリ版: MCP ツール（mcp__claude-in-chrome__*）でタブを掌握でき、観察 → 操作 → 検証のループが閉じる

この章では ネイティブアプリ版を前提にする（ここが最大の注意点）。

目的

Claude Code × Claude in Chrome（ネイティブ版）で、ブラウザを観察し、操作し、結果を検証するループを受講者が再現できるようにする。

スコープ

in scope

• なぜ AI にブラウザ操作をさせるのか（主張）
• NPM 版 vs ネイティブアプリ版の違いと、なぜネイティブ版を選ぶか（最重要）
• ネイティブ版のセットアップ概要
• 主要ツール: tabs_context / navigate / computer / read_page / find
• スクショ検証の作法（期待状態を先に言語化 / before・after ペア / テキスト併用 / コンソール・ネットワーク確認）
• 既知の制約（file:/// が壊れる、about: / data: 不可 → localhost HTTP で回避 等）

out of scope

• NPM 版のセットアップ手順（非推奨として理由のみ触れる）
• Selenium / Playwright 等の代替自動化ツール

設計方針（叩き台）

• 既存講義と同じ HTML スライド構成
• 番号は 06-*。slug 案: 06-claude-in-chrome
• 「見た目 OK ≠ 正常」を軸に、スクショ単独で判定しない検証作法を強調

受け入れ条件

• 06-claude-in-chrome/index.html を追加（10〜13 枚程度）
• <title> と <meta name="description"> を記入（listing 自動同期の真実源）
• 各 <section> に data-label="<章> · <タイトル> — <サブ>" を付与
• スクリプト読み込み順を遵守（theme.css → deck-stage.js → progress-strip.js → page-number.js → ai-focus.js）
• python3 scripts/sync_listings.py --write で listing を同期
• CI green（sync-listings-check / prompt-injection-check / pages-deploy build）

関連

• スライド作成ガイド: CLAUDE.md、scripts/README.md