Claude in Chrome を Claude Code からスキル化することで、ブラウザ操作を完全自動化できます。筆者はこのアプローチを使い、Google AI Proプランのブラウザ枠を活用した画像生成スキル（gemini-image）を作成しました。その結果、APIコストをゼロに抑えながらWordPress記事の画像を自動生成する仕組みを実現できました。この記事では、Claude in Chromeをスキル化する方法を、実際の体験をもとに具体的に解説します。
関連記事: IT技術カテゴリの記事一覧もあわせてご覧ください。
Claude in Chrome スキル化とは何か
Claude in Chromeは、Claude Codeとブラウザを連携させるための公式拡張機能です。2025年8月にリサーチプレビューとして公開されました。この拡張機能を使うと、Claude Codeがブラウザのタブを操作し、クリック・入力・スクリーンショット取得などを自動で実行できます。
しかし、毎回同じブラウザ操作手順をClaude Codeに説明するのは非効率です。そこで活用したいのが「スキル（Skills）」機能です。スキルとは、SKILL.mdファイルに操作手順を記述することで、Claude Codeが定型的なタスクを再現できるようにする仕組みです。つまり、Claude in Chromeのブラウザ操作手順をスキルとして定義すれば、`/スキル名` というコマンドだけで複雑なブラウザ操作を呼び出せるようになります。なお、Claude Codeのスキル機能全般については、Claude Code 始め方【2026年】初心者が最初にやること5選も参考にしてください。
スキルの保存場所と適用範囲
スキルには保存場所によって適用範囲が異なります。具体的には、個人スキル（`~/.claude/skills/`）はすべてのプロジェクトで使えます。一方、プロジェクトスキル（`.claude/skills/`）はそのプロジェクト内のみで利用可能です。ブラウザ操作スキルは複数プロジェクトをまたいで使うケースが多いため、個人スキルとして保存するのがおすすめです。
Claude in Chromeで使えるMCPツール一覧
スキル化のカギとなるのが、Claude in ChromeのMCPツールです。主なツールは以下のとおりです。
| ツール名 | 用途 |
|---|---|
| mcp__Claude_in_Chrome__navigate | 指定URLへのナビゲーション |
| mcp__Claude_in_Chrome__computer | クリック・入力・スクリーンショット等 |
| mcp__Claude_in_Chrome__find | ページ上の要素検索 |
| mcp__Claude_in_Chrome__read_page | ページコンテンツの読み取り |
| mcp__Claude_in_Chrome__get_page_text | ページのテキスト取得 |
| mcp__Claude_in_Chrome__form_input | フォームへの入力 |
| mcp__Claude_in_Chrome__javascript_tool | JavaScriptの実行 |
| mcp__Claude_in_Chrome__tabs_create_mcp | 新規タブの作成 |
| mcp__Claude_in_Chrome__tabs_context_mcp | 現在のタブ一覧の取得 |
これらのツールをスキルの `allowed-tools` に指定することで、スキル実行時に自動的に許可されます。承認のプロンプトが毎回出なくなるため、完全自動化が実現します。
SKILL.mdの書き方：Claude in Chromeスキルの基本構造
SKILL.mdはYAMLフロントマターとMarkdown本文の2段構成になっています。フロントマターにはスキルのメタ情報を、Markdown本文には実行手順を記述します。Claude in Chromeスキルを作るうえで最も重要なのは、`allowed-tools` にMCPツールを正確に列挙することです。
フロントマターの記述例
以下は、ブラウザ操作スキルのフロントマター基本形です。
---
name: my-browser-skill
description: "〇〇のブラウザ操作を自動化する。/my-browser-skill で呼び出す。"
allowed-tools:
- Bash
- Read
- Write
- mcp__Claude_in_Chrome__tabs_context_mcp
- mcp__Claude_in_Chrome__tabs_create_mcp
- mcp__Claude_in_Chrome__navigate
- mcp__Claude_in_Chrome__find
- mcp__Claude_in_Chrome__read_page
- mcp__Claude_in_Chrome__computer
- mcp__Claude_in_Chrome__form_input
- mcp__Claude_in_Chrome__javascript_tool
- mcp__Claude_in_Chrome__get_page_text
---ポイントは `allowed-tools` の記述方法です。Claude in ChromeのMCPツールは `mcp__Claude_in_Chrome__ツール名` という形式で指定します。なお、スキルに不要なツールを列挙すると権限が広がりすぎるため、実際に使うツールだけを記載するのがベストプラクティスです。
Markdown本文に書くべき内容
フロントマターの下には、Claudeへの詳細な指示をMarkdownで記述します。記述すべき内容は大きく3つです。
- 動作モードの判定: `$ARGUMENTS` の内容によって処理を分岐させる場合、その判定ロジックを記述する
- ブラウザ操作の手順: タブの準備→ページへのナビゲーション→要素の操作→結果の取得、という順序で具体的に記述する
- エラーハンドリング: ログイン未済・タイムアウト・要素が見つからない場合の対処法を明記する
特に重要なのはエラーハンドリングです。ブラウザ操作はネットワーク状況やページのレンダリングタイミングに左右されます。そのため、「XX秒待機後にリトライする」「スクリーンショットで状況を確認する」といった記述を入れておくと、スキルの安定性が格段に上がります。
ディレクトリ構成のベストプラクティス
なお、スキルのディレクトリ構成は以下のようにシンプルにまとめるのがおすすめです。
~/.claude/skills/my-browser-skill/
├── SKILL.md # メイン指示（必須）
└── reference.md # 補足情報（任意）SKILL.mdは500行以内に収めるのが公式の推奨です。詳細な操作手順が長くなる場合は、`reference.md` などのサポートファイルに分割してSKILL.mdから参照するとよいでしょう。
実例：gemini-imageスキルで学ぶClaude in Chrome活用術
ここでは、筆者が実際に作成した gemini-image スキルを題材に、Claude in Chromeスキル化の実践方法を解説します。このスキルは、Google AI Proプランのブラウザ枠を活用してAPIコストをゼロにするために考案したものです。
筆者がスキル化に踏み切ったきっかけ
WordPress記事の自動生成フローを構築する中で、画像生成のコストが課題になりました。Gemini APIを使えば高品質な画像を生成できますが、記事ごとに複数枚の画像を生成すると月のAPI費用が膨らみます。そこで気づいたのが、Google AI Proプランに含まれるブラウザUI経由の利用枠です。
実際には、gemini.google.comのUIをClaude in Chromeで操作することで、API課金なしに画像を生成できます。さらに generate-post スキルとの統合により、記事執筆から画像生成まで全工程が自動化されました。その結果、月のAPI費用をゼロにしながら、記事生成フロー全体を完全自動化することに成功しました。
もう一つ印象的だったのが、Google AnalyticsとSearch Consoleのデータを自動分析する blog-analytics スキルです。「何を確認すべきか」の専門知識がなくても、スキルがGA4やSearch Consoleを開いて自律的に重要指標を読み取り、改善提案まで行ってくれました。ブラウザ操作をスキル化することで、専門知識の壁が低くなる——このとき、スキル化の本質的な価値を実感しました。
スキルの核心：ブラウザ操作手順の言語化
スキル化で最も大切なのは、ブラウザ操作手順を曖昧さなく言語化することです。gemini-imageスキルでは、以下の手順を逐一SKILL.mdに記述しています。
- タブの準備: tabs_context_mcp で既存タブを確認後、tabs_create_mcp で新しいタブを作成
- ナビゲーション: navigate で https://gemini.google.com/app に移動し、毎回新規会話を開始
- プロンプト入力: find でテキスト入力エリアを特定後、computer でクリック→タイプ→Enter送信
- 生成完了の確認: computer(action=”wait”, duration=10) を繰り返し、スクリーンショットで進捗を確認
- 画像の保存: ダウンロードボタンからディレクトリに保存
特に重要なのは4番の「生成完了の確認」です。Geminiの画像生成には20〜60秒かかります。一方で computer(action=”wait”) は20秒以上でタイムアウトします。そのため、10秒待機→スクリーンショット確認を繰り返すロジックを明記する必要があります。この種の細かい制約こそ、SKILL.mdに記述しておく価値があります。
他スキルとの連携設計
gemini-imageスキルの大きな特徴は、generate-post スキルから呼び出されるワークフローモードを持つ点です。image_requests.json の読み込みパスと出力先を引数として受け取り、連携動作します。この設計により、記事生成スキルがリクエストファイルを作成→画像生成スキルが自動実行→結果ファイルを書き込む、というパイプライン処理が実現しています。
スキル同士を連携させる際のポイントは「引数の受け渡しルールを明確に定義すること」です。SKILL.mdに $ARGUMENTS の使い方と期待する形式を明記しておけば、連携ミスを防げます。
Claude in Chromeスキル開発の注意点とベストプラクティス
Claude in Chromeを使ったスキル開発には、いくつかの注意点があります。事前に把握しておくことで、開発効率が大幅に上がります。
前提条件：拡張機能とClaudeのバージョン確認
まず確認すべきは動作環境です。Claude in Chromeは以下の条件を満たす必要があります。
- 対応ブラウザ: Google Chrome または Microsoft Edge（Brave・Arcは現時点で非対応）
- 拡張機能バージョン: 1.0.36以上
- Claude Codeバージョン: 2.0.73以上
- 契約プラン: Anthropicの直接プラン（Pro・Max・Teams・Enterprise）
なお、Amazon BedrockやGoogle Cloud Vertex AI経由でClaudeを利用している場合、Claude in Chrome機能は使えません。その点は注意が必要です。
待機処理とタイムアウト対策
ブラウザ操作スキルの安定性を高めるうえで、待機処理の設計は欠かせません。`computer(action=”wait”, duration=N)` は最大でも15〜18秒程度に抑えることを推奨します。長時間の処理が必要な場合は、短い待機とスクリーンショット確認を繰り返す方式にしてください。さらに、最大試行回数を決めてタイムアウト時の動作（スキップするか・エラー報告するか）をSKILL.mdに明記しておくと、スキルの予測可能性が上がります。
ログイン状態とCAPTCHA対応
Claude in Chromeはブラウザのログイン状態を共有するため、すでにサインインしているサービスを自動操作できます。ただし、ログイン画面やCAPTCHAが表示されるとClaudeは処理を一時停止し、手動対応を求めます。そのため、スキルにはこのケースの処理をエラーハンドリングとして記述しておくのがベストです。具体的には「スクリーンショットでログイン画面が見えたら停止して報告する」という指示を入れておくと、スキルが途中で無限ループに陥るのを防げます。
関連記事: 生成AIカテゴリの記事一覧で、AIツール活用の最新情報をご覧ください。
スキルのデバッグと改善サイクル
ブラウザ操作スキルは一度作って終わりではなく、運用しながら改善するものです。ここでは効率的なデバッグと改善の進め方を解説します。
スクリーンショットを活用したデバッグ
ブラウザ操作のトラブル原因は、ほぼ「セレクタが変わった」「要素が見つからない」「ページのレンダリングが完了していない」の3パターンに集約されます。これらを特定するには、`computer(action=”screenshot”)` をSKILL.mdの各ステップに差し込んでデバッグするのが最も効率的です。実際に、スクリーンショットをClaudeが視覚的に確認しながら判断できる点が、Claude in Chromeの大きな強みといえます。
SKILL.mdの更新方法
スキルの改善はSKILL.mdを編集するだけで完了します。Claude Codeはスキルファイルのライブ変更を検出するため、セッションを再起動せずに変更が反映されます。つまり、スキルを実行しながらSKILL.mdを修正し、すぐに再実行して効果を確認するという高速な改善サイクルが実現します。その結果、SKILL.mdを少しずつ洗練させながら安定した自動化を構築できます。
description文を磨いてClaudeの自動起動を最適化する
スキルは `description` フィールドの内容をもとに、Claudeが自動的に呼び出すかどうかを判断します。そのため、`description` の文章は「どんな状況でこのスキルを使うか」を明確に書くことが重要です。一方で、ユーザーが手動で呼び出すべきスキルには `disable-model-invocation: true` を設定して、意図しない自動起動を防ぎましょう。
また、Claude Codeのコマンドを体系的に把握したい方には、Claude Codeの基本コマンド一覧【保存版チートシート】も参考にしてください。
あわせて読みたいおすすめ書籍
Claude Codeのスキル定義やブラウザ自動化をさらに深く学びたい方には、以下の書籍がおすすめです。
まとめ：Claude in Chromeスキル化で実現できること
この記事で解説した内容を整理します。
- Claude in Chromeの操作をSKILL.mdに定義することで、ブラウザ操作を`/スキル名`コマンドで再利用できる
- フロントマターの`allowed-tools`にMCPツールを列挙すれば、承認なしで自動実行できる
- 待機処理・タイムアウト・エラーハンドリングをSKILL.mdに明記することが安定動作のカギ
- gemini-imageスキルの例のように、他スキルとの連携設計でパイプライン処理が実現できる
- Google AI Proのブラウザ枠を活用すれば、APIコストをゼロにした画像生成自動化が可能
- SKILL.mdのライブ変更検出により、高速な改善サイクルを回せる
Claude in ChromeとSkills機能を組み合わせることで、繰り返しのブラウザ操作を完全自動化できます。まずはシンプルな操作から始めて、少しずつスキルの複雑度を上げていくのがおすすめです。ぜひ自分だけのブラウザ操作スキルを作ってみてください。
コメント