Claude in Chrome MCPを使うにはChromeの拡張機能が必要ですか？

はい、Chrome拡張機能「Claude in Chrome」のインストールが必要です。Chrome Web Storeからインストールし、MCPサーバーとして登録することでClaude Codeからブラウザ操作が可能になります。拡張機能はバックグラウンドでWebSocketサーバーとして動作します。

Claude Code経由のChrome操作でログインが必要なページにアクセスできますか？

はい、可能です。Claude in Chromeは実際のChromeプロファイルを使用するため、そのプロファイルでログイン済みのサービスにはそのままアクセスできます。Google Search ConsoleやGoogle Analyticsなど、ログインが必要な管理画面も操作できます。

ヘッドレスモードでも動作しますか？

Claude in Chrome MCPは実際のChromeウィンドウを使用するため、ヘッドレスモードでは動作しません。画面に表示されているChromeブラウザを操作する仕組みです。ヘッドレスでのブラウザ操作が必要な場合はPuppeteerやPlaywrightのMCPサーバーを別途構築する必要があります。

Chrome操作中にエラーが発生した場合の対処法は？

まず「tabs_context_mcp」コマンドで接続状態を確認してください。接続できない場合は、Chromeのプロファイルを正しく指定して再起動し、拡張機能が有効になっているか確認します。それでも解決しない場合は、Claude Codeを再起動してMCP接続をリセットしてください。

SEO確認の自動化はどの程度まで可能ですか？

タイトルタグ・メタディスクリプションの取得、見出し構造（H1〜H6）のチェック、内部リンク・外部リンクの一覧取得、構造化データの検証、Core Web Vitalsの簡易測定など、SEO監査に必要なほとんどの項目を自動化できます。Google Search Consoleと連携すれば、インデックス登録リクエストも自動化できます。

スクリーンショットの撮影はできますか？

はい、computerコマンドでスクリーンショットを撮影できます。特定の要素のスクリーンショットやページ全体のキャプチャも可能です。GIF作成機能（gif_creator）を使えば、操作手順を動画として記録することもできます。

複数タブの同時操作は可能ですか？

はい、tabs_create_mcpで新しいタブを作成し、switch_browserでタブを切り替えながら操作できます。例えば、タブAでデータを取得してタブBに入力するといった連携操作も実現できます。ただし、同時並行での操作ではなく、順番に切り替えて操作する形になります。

Claude Code Chrome操作ガイド｜ブラウザ自動化の始め方【2026年版】

1. Claude in Chrome MCPとは

Claude in Chrome MCPは、Claude CodeからChromeブラウザを直接操作するためのMCP（Model Context Protocol）サーバーです。Chrome拡張機能として動作し、Claude Codeとブラウザの間をつなぐ橋渡し役を果たします。

従来、ブラウザの自動操作にはSeleniumやPuppeteerなどのツールが必要でしたが、Claude in Chrome MCPを使えば自然言語でブラウザに指示を出すことができます。「このページのH1タグを取得して」「フォームにテストデータを入力して送信して」といった指示が、そのまま実行されます。

Claude in Chrome MCPでできること

カテゴリ	主な操作	活用シーン
ページ閲覧	URL移動、テキスト取得、要素検索	情報収集、コンテンツ確認
フォーム操作	テキスト入力、セレクトボックス、チェックボックス	テスト自動化、データ入力
クリック操作	ボタンクリック、リンククリック、座標クリック	画面遷移、操作テスト
データ取得	HTML取得、テーブルデータ、メタ情報	スクレイピング、SEO監査
画面記録	スクリーンショット、GIF作成	バグ報告、ドキュメント作成
開発者ツール	コンソールログ、ネットワーク監視	デバッグ、パフォーマンス分析

他のブラウザ自動化ツールとの比較

項目	Claude in Chrome	Puppeteer	Selenium
操作方法	自然言語	JavaScript API	WebDriver API
学習コスト	低い	中程度	高い
ヘッドレス対応	非対応	対応	対応
AI連携	ネイティブ対応	別途実装が必要	別途実装が必要
認証状態の利用	Chromeプロファイルをそのまま利用	Cookieの手動設定が必要	Cookieの手動設定が必要
適した用途	対話的な操作、SEO確認	CI/CD、大量テスト	クロスブラウザテスト

2. 環境構築・設定方法

前提条件

Claude Codeがインストール済みであること（始め方はこちら）
Google Chrome（最新版推奨）がインストール済みであること
macOS、Linux、またはWindowsのいずれかの環境

ステップ1: Chrome拡張機能のインストール

Chrome Web Storeから「Claude in Chrome」拡張機能をインストールします。インストール後、拡張機能のアイコンがツールバーに表示されます。

注意: 拡張機能のインストール後、Chromeを一度再起動することをおすすめします。拡張機能のWebSocketサーバーが正しく起動するために必要な場合があります。

ステップ2: MCPサーバーとして登録

Claude Codeの設定ファイル（~/.claude/settings.json）にClaude in Chrome MCPサーバーを登録します。

{
  "mcpServers": {
    "claude-in-chrome": {
      "type": "chrome-extension",
      "extensionId": "拡張機能のID"
    }
  }
}

ステップ3: Chromeプロファイルの指定と起動

特定のChromeプロファイルを使用してブラウザを起動します。プロファイルを指定することで、ログイン状態やCookieをそのまま活用できます。

# macOSの場合 - 特定のプロファイルでChrome起動
open -na "Google Chrome" --args --profile-directory="Profile 1"

# Linuxの場合
google-chrome --profile-directory="Profile 1"

# Windowsの場合
start chrome --profile-directory="Profile 1"

Tips: Chromeのプロファイル一覧を確認するには chrome://version/ のプロフィールパスを参照してください。プロファイル名は「Profile 1」「Profile 2」のように番号が振られています。

ステップ4: 接続確認

Claude CodeからChrome MCPへの接続を確認します。以下のコマンドをClaude Codeで実行してください。

# Claude Code内で実行
tabs_context_mcp

接続に成功すると、現在開いているタブの情報が返されます。失敗した場合は、Chromeが起動しているか、拡張機能が有効になっているかを確認してください。

状況	原因	対処法
接続タイムアウト	Chrome未起動 or 拡張機能無効	Chromeを起動し拡張機能を有効化
プロファイルエラー	指定したプロファイルに拡張機能がない	正しいプロファイルを指定
ポート競合	WebSocketポートが他のプロセスに使用中	他のChromeインスタンスを終了

3. ブラウザ操作コマンド一覧

Claude in Chrome MCPが提供する主要なコマンドを一覧で紹介します。各コマンドはClaude Code内から自然言語で呼び出すことも、ツール名を直接指定して呼び出すこともできます。

ナビゲーション系

コマンド	説明	主なパラメータ
`navigate`	指定URLに移動	url（移動先URL）
`tabs_create_mcp`	新しいタブを作成	url（オプション）
`switch_browser`	タブを切り替え	tabId
`tabs_context_mcp`	現在のタブ情報を取得	なし

コンテンツ取得系

コマンド	説明	主なパラメータ
`read_page`	ページの構造化データを取得	なし
`get_page_text`	ページのテキストコンテンツを取得	なし
`find`	ページ内の要素を検索	selector, text
`javascript_tool`	任意のJavaScriptを実行	code（JSコード）

操作系

コマンド	説明	主なパラメータ
`computer`	マウス・キーボード操作	action, coordinate, text
`form_input`	フォーム要素に値を入力	selector, value
`shortcuts_execute`	キーボードショートカットを実行	shortcut

デバッグ・監視系

コマンド	説明	活用例
`read_console_messages`	コンソールログを取得	JSエラーの検出・デバッグ
`read_network_requests`	ネットワークリクエストを取得	API通信の確認・パフォーマンス分析
`gif_creator`	操作のGIF録画	バグ再現手順の記録
`resize_window`	ブラウザウィンドウのサイズ変更	レスポンシブデザインの確認

4. 基本操作のパターンと実例

パターン1: ページの内容を確認する

最も基本的な操作パターンです。指定したURLに移動し、ページの内容を取得します。

# 1. ページに移動
navigate で https://example.com/ を開いて

# 2. ページ全体のテキストを取得
get_page_text でページ内容を取得して

# 3. 特定の要素を検索
find で h1 タグの内容を取得して

パターン2: フォームに入力して送信する

お問い合わせフォームやログインフォームなどに自動で値を入力し、送信するパターンです。

# 1. フォームのあるページに移動
navigate で https://example.com/contact/ を開いて

# 2. 各フィールドに値を入力
form_input で name フィールドに「テスト太郎」と入力して
form_input で email フィールドに「test@example.com」と入力して
form_input で message テキストエリアに「お問い合わせ内容」と入力して

# 3. 送信ボタンをクリック
computer で送信ボタンをクリックして

パターン3: JavaScriptを実行してデータを取得する

ページ上で任意のJavaScriptを実行し、DOMの情報を取得したり、ページの状態を変更したりします。

# メタデータの一括取得
javascript_tool で以下のコードを実行:

const meta = {
  title: document.title,
  description: document.querySelector('meta[name="description"]')?.content,
  canonical: document.querySelector('link[rel="canonical"]')?.href,
  h1: document.querySelector('h1')?.textContent,
  ogTitle: document.querySelector('meta[property="og:title"]')?.content,
  ogDescription: document.querySelector('meta[property="og:description"]')?.content,
};
JSON.stringify(meta, null, 2);

パターン4: 複数ページを巡回する

サイト内の複数ページを順番に確認し、情報を収集するパターンです。

# 複数ページのタイトルとH1を確認して
以下のURLを順番に開いて、各ページのtitleタグとh1の内容を一覧にまとめて:
- https://example.com/
- https://example.com/about/
- https://example.com/services/
- https://example.com/contact/

5. Webスクレイピング活用

Claude in Chrome MCPは、ログイン後のページやSPAなど、従来のスクレイピングツールでは取得が難しいコンテンツにもアクセスできる強みがあります。ここでは実践的なスクレイピングパターンを紹介します。

テーブルデータの取得

ページ上のテーブルデータをJSON形式で取得する例です。

# JavaScriptでテーブルデータを構造化して取得
javascript_tool で以下を実行:

const tables = document.querySelectorAll('table');
const results = [];
tables.forEach((table, i) => {
  const headers = [...table.querySelectorAll('th')].map(th => th.textContent.trim());
  const rows = [...table.querySelectorAll('tbody tr')].map(tr =>
    [...tr.querySelectorAll('td')].map(td => td.textContent.trim())
  );
  results.push({ tableIndex: i, headers, rows });
});
JSON.stringify(results, null, 2);

ページネーションの自動処理

複数ページにまたがるデータを自動で収集する方法です。Claude Codeに「次のページがある限り、データを収集し続けて」と指示すると、自動的にページ送りしながらデータを蓄積します。

# ページネーション対応のデータ収集
javascript_tool で以下を実行:

// 現在のページの商品情報を取得
const items = [...document.querySelectorAll('.product-item')].map(el => ({
  name: el.querySelector('.product-name')?.textContent.trim(),
  price: el.querySelector('.product-price')?.textContent.trim(),
  url: el.querySelector('a')?.href,
}));

// 次のページへのリンクを確認
const nextPage = document.querySelector('.pagination .next a')?.href;

JSON.stringify({ items, nextPage }, null, 2);

スクレイピング時の注意点

注意点	詳細	対策
利用規約の確認	スクレイピングが禁止されているサイトがある	robots.txt と利用規約を事前に確認
アクセス頻度	短時間に大量のリクエストを送るとブロックされる	適切な間隔を空けてアクセス
著作権	取得したコンテンツの再利用には著作権に注意	分析目的に限定し、無断転載はしない
動的コンテンツ	SPAではページ遷移後にDOMが更新されるまで待機が必要	適切な待機処理を入れる

6. SEO確認の自動化

Chrome操作の最も実践的な活用法の一つがSEO確認の自動化です。新しいページを公開する前のチェックリスト消化や、既存ページのSEO監査を自動で実行できます。

SEO基本チェックの自動化

以下のJavaScriptをページ上で実行することで、SEOに関する基本項目を一括チェックできます。

# SEO基本チェックスクリプト
javascript_tool で以下を実行:

const seoCheck = {
  title: {
    content: document.title,
    length: document.title.length,
    isOptimal: document.title.length >= 30 && document.title.length <= 60,
  },
  description: (() => {
    const desc = document.querySelector('meta[name="description"]')?.content || '';
    return { content: desc, length: desc.length,
             isOptimal: desc.length >= 80 && desc.length <= 160 };
  })(),
  h1: {
    count: document.querySelectorAll('h1').length,
    content: document.querySelector('h1')?.textContent.trim(),
    isValid: document.querySelectorAll('h1').length === 1,
  },
  headingStructure: [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')]
    .map(h => ({ tag: h.tagName, text: h.textContent.trim().substring(0, 50) })),
  canonical: document.querySelector('link[rel="canonical"]')?.href,
  ogTags: {
    title: document.querySelector('meta[property="og:title"]')?.content,
    description: document.querySelector('meta[property="og:description"]')?.content,
    image: document.querySelector('meta[property="og:image"]')?.content,
  },
  images: {
    total: document.images.length,
    withoutAlt: [...document.images].filter(img => !img.alt).length,
  },
  links: {
    internal: [...document.querySelectorAll('a[href]')]
      .filter(a => a.hostname === location.hostname).length,
    external: [...document.querySelectorAll('a[href]')]
      .filter(a => a.hostname !== location.hostname && a.href.startsWith('http')).length,
  },
};
JSON.stringify(seoCheck, null, 2);

構造化データの検証

JSON-LDで実装された構造化データを取得・検証するスクリプトです。

# 構造化データの取得と検証
javascript_tool で以下を実行:

const scripts = document.querySelectorAll('script[type="application/ld+json"]');
const structuredData = [...scripts].map(s => {
  try { return JSON.parse(s.textContent); }
  catch(e) { return { error: 'パースエラー', raw: s.textContent.substring(0, 100) }; }
});
JSON.stringify(structuredData, null, 2);

Google Search Consoleとの連携

ログイン済みのChromeプロファイルを使えば、Google Search Consoleの操作も自動化できます。新しいページのインデックス登録リクエストを自動で行う手順は以下の通りです。

Google Search Console（https://search.google.com/search-console）に移動
プロパティを選択
URL検査の入力欄に対象URLを入力
「インデックス登録をリクエスト」をクリック
完了メッセージを確認

SEO監査チェックリスト

チェック項目	合格基準	自動化可能
titleタグ	30〜60文字、キーワード含む	可能
meta description	80〜160文字、ユニーク	可能
H1タグ	1ページ1つ、キーワード含む	可能
見出し構造	H1→H2→H3の階層が正しい	可能
画像alt属性	全画像にalt属性あり	可能
canonical URL	正しいURLが設定されている	可能
OGP設定	og:title, og:description, og:imageあり	可能
構造化データ	パースエラーなし	可能
内部リンク	孤立ページがない	可能
ページ速度	LCP 2.5秒以下	一部可能

7. テスト自動化への活用

Claude in Chrome MCPは、E2E（エンドツーエンド）テストの実行にも活用できます。テストシナリオを自然言語で記述し、AIが実際のブラウザで操作を行ってくれるため、テストコードの作成・メンテナンスコストを大幅に削減できます。

フォーム送信テスト

# お問い合わせフォームのテスト
1. https://example.com/contact/ を開いて
2. 名前に「テスト太郎」、メールに「test@example.com」、
   お問い合わせ内容に「テスト送信です」と入力して
3. 送信ボタンをクリックして
4. 「送信完了」というテキストが表示されるか確認して
5. コンソールにエラーが出ていないか確認して
6. 結果をまとめて

レスポンシブデザインテスト

resize_windowコマンドでブラウザの幅を変更し、レスポンシブデザインが正しく動作しているかテストします。

# レスポンシブデザインのテスト
以下のブレイクポイントでそれぞれスクリーンショットを撮影して:
- 1920x1080（デスクトップ）
- 1024x768（タブレット横）
- 768x1024（タブレット縦）
- 375x812（スマートフォン）

各サイズで以下を確認して:
- ナビゲーションが正しく表示されているか
- テキストが読みやすいか
- 画像が適切にリサイズされているか
- ボタンがタップ可能なサイズか

リンク切れチェック

# ページ内のリンク切れチェック
javascript_tool で以下を実行:

const links = [...document.querySelectorAll('a[href]')]
  .filter(a => a.href.startsWith('http'))
  .map(a => ({
    text: a.textContent.trim().substring(0, 50),
    href: a.href,
    isExternal: a.hostname !== location.hostname,
  }));

JSON.stringify({
  total: links.length,
  internal: links.filter(l => !l.isExternal).length,
  external: links.filter(l => l.isExternal).length,
  links: links,
}, null, 2);

テスト自動化の比較表

項目	Claude in Chrome	Playwright	手動テスト
テスト作成時間	数分（自然言語）	数時間（コード記述）	テスト項目の列挙のみ
再現性	高い（AIが判断）	非常に高い（完全再現）	低い（人による差異）
メンテナンス性	高い（UI変更に柔軟対応）	低い（セレクタ変更で壊れる）	高い（人が判断）
CI/CD統合	難しい	容易	不可
おすすめの用途	アドホックテスト、探索テスト	回帰テスト、CI/CD	ユーザビリティテスト

8. 応用テクニックとTips

ネットワークリクエストの監視

read_network_requestsを使うと、ページが発行するAPIリクエストの内容を確認できます。SPA（Single Page Application）のデバッグに特に有効です。

# ネットワークリクエストの監視
1. navigateでページを開いて
2. read_network_requestsでリクエストを確認して
3. API呼び出しのレスポンスステータスとサイズを一覧にして

コンソールエラーの自動検出

デプロイ後のJavaScriptエラーを即座に検出できます。複数ページを巡回しながらコンソールエラーを収集するパターンです。

# 複数ページのコンソールエラーチェック
以下のページを順番に開いて、各ページでコンソールにエラーが出ていないか確認して:
- https://example.com/
- https://example.com/about/
- https://example.com/contact/

エラーがあったページのURLとエラー内容を一覧にまとめて

GIF録画によるバグ報告

gif_creatorコマンドを使えば、バグの再現手順をGIFアニメーションとして記録できます。テキストでは伝わりにくいUIの問題を、視覚的に共有できます。

パフォーマンス計測

# Core Web Vitalsの簡易計測
javascript_tool で以下を実行:

const perf = performance.getEntriesByType('navigation')[0];
const paintEntries = performance.getEntriesByType('paint');

const metrics = {
  domContentLoaded: Math.round(perf.domContentLoadedEventEnd),
  loadComplete: Math.round(perf.loadEventEnd),
  firstPaint: paintEntries.find(e => e.name === 'first-paint')?.startTime,
  firstContentfulPaint: paintEntries.find(
    e => e.name === 'first-contentful-paint'
  )?.startTime,
  domElements: document.querySelectorAll('*').length,
  resourceCount: performance.getEntriesByType('resource').length,
};
JSON.stringify(metrics, null, 2);

Chrome操作のベストプラクティス

プラクティス	理由
操作前にtabs_context_mcpで接続確認	接続切れの早期発見
ページ遷移後は読み込み完了を待つ	DOM更新前のアクセスを防止
JavaScript実行結果はJSON.stringifyで返す	構造化データとして扱いやすい
セレクタはidよりもdata属性を優先	UIリファクタリングに強い
大量操作は適度に間隔を空ける	サーバー負荷とブロック防止

9. トラブルシューティング

症状	考えられる原因	解決方法
MCP接続失敗	Chrome未起動、拡張機能無効	Chromeを正しいプロファイルで起動し、拡張機能を確認
ページが読み込めない	ネットワークエラー、URL誤り	URLの確認、手動でブラウザからアクセスして確認
要素が見つからない	動的読み込み、iframe内	読み込み完了を待機、iframe内の場合はJSで直接アクセス
クリックが反応しない	要素がオーバーレイで隠れている	javascript_toolでelement.click()を直接実行
フォーム入力が消える	React等のフレームワークが値を上書き	JavaScriptでイベントをディスパッチして入力
操作が遅い	ページが重い、多数の拡張機能	不要な拡張機能を無効化、シンプルなプロファイルを使用

Chromeプロファイルの切り替え手順

接続がうまくいかない場合、別のChromeプロファイルで再試行することで解決する場合があります。

# プロファイル切り替え手順
# 1. 現在のChromeを終了
# 2. 別のプロファイルで起動
open -na "Google Chrome" --args --profile-directory="Profile 29"

# 3. 接続確認
tabs_context_mcp

# 4. 失敗した場合は別のプロファイルで再試行
open -na "Google Chrome" --args --profile-directory="Profile 1"
tabs_context_mcp

10. よくある質問（FAQ）

まとめ

Claude in Chrome MCPを使ったブラウザ自動化は、開発者の日常業務を大きく効率化します。特にSEO確認、デプロイ後のチェック、フォームテストなど、繰り返し行う作業の自動化に威力を発揮します。

まずは環境構築を済ませて、簡単なページ閲覧から始めてみてください。慣れてきたら、SEO監査やテスト自動化など、より実践的なユースケースに挑戦していきましょう。

初心者: まずはnavigate + get_page_textでページ確認から
中級者: javascript_toolでSEO監査スクリプトを活用
上級者: 複数ページの巡回テストやCI連携を検討