Claude Media
Kapture MCPをClaude Codeに追加して手元のChromeを操作する
Claude CodeMCPチュートリアル

Kapture MCPをClaude Codeに追加して手元のChromeを操作する

Kapture MCPはChrome拡張とMCPサーバーで、いま開いているタブをClaude Codeから操作させる仕組みです。追加コマンド、タブの接続、JS実行の許可、つまずいたときの切り分けまでを手順でたどります。

読了目安 約9分

Kaptureは、Chrome拡張とMCPサーバーの組み合わせで、いま自分が開いているタブをAIに操作させるOSSです。Seleniumやヘッドレスブラウザの設定は要りません。Claude Codeからは claude mcp add で1本登録し、操作したいタブで拡張の接続スイッチを入れれば動き始めます。

この記事は、Claude Codeへの追加から最初の操作までの手順と、Kapture固有の癖をまとめたものです。DevToolsの計測が主目的ならChrome DevTools MCPの記事が先です。

Kapture MCPとは何か

Kaptureの公式サイトは、自らを「MCPサーバーとChrome DevTools拡張」と説明しています。リポジトリの説明文も「MCPを通じてブラウザ自動操作を可能にするChrome DevTools拡張」です。ライセンスはMITです。

構成は3層です。AIアプリがMCPでサーバーと話し、サーバーがWebSocketでブラウザ拡張と話します。拡張はバックグラウンドのサービスワーカーでコマンドを実行します。

層役割
MCPサーバー役割MCPクライアントとの通信を受け持つ。ポートは61822
WebSocketブリッジ役割サーバーと拡張の間をつなぐ
Chrome拡張役割タブに対して実際の操作を行う

操作の対象は、あなたがすでにログインして開いているタブです。新しい空のブラウザを立ち上げて操作する方式とは出発点が違います。ログイン済みの社内ツールや管理画面を触らせたいときに向く一方、その分だけ任せる範囲の線引きが重要になります(後述の「任せる前に決めておくこと」)。

事前に用意するもの

  • Chrome、Brave、Edge、Opera、Vivaldiのいずれか(MCP_USAGEの動作環境)
  • Node.js 16以上(npx を使うため)
  • Claude Code

ブラウザの検出は自動です。公式サイトには、Chrome、Edge、Brave、Opera、Vivaldiのインストールを検出し、新規タブを開くブラウザを選べるとあります。

Claude Codeに追加する

Kaptureのドキュメントに載っている設定例は、Claude DesktopとClineのものです。どちらも npx -y kapture-mcp@latest bridge を起動コマンドにしています。

{
  "mcpServers": {
    "kapture": {
      "command": "npx",
      "args": ["-y", "kapture-mcp@latest", "bridge"]
    }
  }
}

Claude CodeのMCPドキュメントは、他クライアント向けの設定を claude mcp add に直す方法を示しています。起動コマンドが npx のサーバーは、-- の後ろにコマンドと引数をそのまま渡します。Kaptureに当てはめると次の形になります。

claude mcp add kapture -- npx -y kapture-mcp@latest bridge
claude mcp list

これはClaude Codeの変換規則をKaptureの起動コマンドに当てた例で、Kapture側のドキュメントにClaude Code向けのコマンドが書かれているわけではありません。追加後は claude mcp list の ✔ Connected で接続を確かめ、失敗しているなら claude mcp get kapture の Issue: 行を読みます。

bridge を使うと、サーバーの起動もstdioとWebSocketの変換も一手に引き受けてくれます。サーバーを自分で立てる npx kapture-mcp と、ws://localhost:61822/mcp へ直接つなぐ設定もあります。ただしREADMEは、こちらはサーバーの寿命を自分で管理する必要があるとして、多くの場合はbridgeを勧めています。

拡張を入れてタブをつなぐ

手順

最初の操作までの流れ

  1. 1

    拡張を入れる

    ChromeウェブストアのKaptureページから追加します。開発者モードで読み込むなら、chrome://extensions/ で「パッケージ化されていない拡張機能を読み込む」を選び、リポジトリの extension フォルダを指定します。

  2. 2

    操作したいタブで接続する

    サイトを開き、ツールバーのKaptureアイコンで接続スイッチを入れます。バッジが ✓ になれば接続済みです。DevToolsの「Kapture」パネルや、URLに ?kapture-connect=true を付けて開く方法でも接続できます。

  3. 3

    Claude Codeに頼む

    「example.comを開いてスクリーンショットを撮って」のように頼みます。READMEの例も、移動、クリック、フォーム入力といった素朴な指示です。

接続はタブ単位です。接続していないタブは、Claude Codeから見えません。list_tabs で接続済みタブの一覧が取れ、各タブには固有のIDが付くので、他のタブに誤って命令が飛ぶことはありません。

どんなツールが使えるか

公式サイトの一覧は、ツールを用途別に並べています。

用途主なツール
移動とタブ主なツールnavigate / back / forward / reload / show / list_tabs / new_tab / close
操作主なツールclick / hover / fill / type / insertText / clear / select / keypress / scroll
情報取得主なツールscreenshot / dom / elements / console_logs / watch_console
ネットワーク主なツールnetwork_monitor / network_requests / network_body
まとめ実行主なツールcompose

セレクターはCSSとXPathのどちらでも書けます。「Submitという文字のボタン」を探すときは //button[contains(text(), 'Submit')] のようなXPathが便利です。

fillとtypeの使い分け

fill は入力欄の値を直接書き換えるので速い反面、element.value を見ない作りの入力欄には効きません。そのときは type で実際のキー入力を送ります。Google Docsのようなエディタに長文を入れるなら insertText が向きます。type はカーソル位置に打つため、置き換えたいときは先に clear を挟みます。

複数手順をcomposeでまとめる

compose は1行1コマンドの短いスクリプトを順に実行し、最初に失敗した時点で止まります。「開く、待つ、クリックする」を1往復で済ませたいときに使います。

同じセレクターに複数一致するとき

セレクターを受けるツールは、一致した最初の要素にだけ作用します。応答には実際に使われた要素の一意なセレクターが返るので、意図と違う要素を触っていないかは、その返り値で確かめられます。要素が見つからない場合も、例外ではなく「成功」としてエラーの詳細が返ります。Claude Codeに任せるときは、操作のたびに結果の中身を読ませる指示を添えておくと、見つからなかったまま次の手順へ進む事態を避けられます。

通信とコンソールを見る

ネットワークの記録は、見たい操作の前に network_monitor をオンにするのが前提です。記録に履歴は残らないので、オンにする前に起きた通信は取れません。リクエスト本文とレスポンス本文は network_body で取り出し、既定では65536バイトで切り詰められます。SSEのようなストリーミング応答は読めません。

JavaScript実行は既定でオフ

evaluate は、拡張のポップアップかDevToolsパネルで「Allow JS execution」を有効にするまで、ツール一覧にも出てきません。許可はタブの接続が切れるとリセットされます。

つまり、Claude Codeに evaluate を使わせたいなら、人間が接続中のタブで毎回スイッチを入れる運用になります。ほかのツールで済む作業に evaluate を許す必要はなく、既定のままで足りる場面のほうが多いはずです。

他のブラウザ操作系MCPとの違い

観点Kapture別ブラウザを立ち上げる方式
操作対象Kapture自分が開いているタブ別ブラウザを立ち上げる方式新規に起動したブラウザ
ログイン状態Kaptureそのまま使える別ブラウザを立ち上げる方式別途ログインが必要
追加の準備Kapture拡張とMCP登録別ブラウザを立ち上げる方式ドライバーや設定
同時利用Kapture複数のAIクライアントが同じサーバーに接続可別ブラウザを立ち上げる方式製品による

Kapture側の資料は、Selenium系の「重い準備」との対比で自らを位置づけています。クラウド上のブラウザを使うならBrowserbase MCP、Macのデスクトップ全体ならmacOS-MCPがそれぞれ別の選択肢です。

複数クライアントの同時接続はKaptureの売りの一つです。同じ bridge の設定をClaude DesktopやClineにも入れれば、全員が同じサーバーとタブを共有します。サーバーが起動済みなら、npx kapture-mcp は接続情報を表示して終了するので、二重起動で壊れることはありません。

つまずいたときの切り分け

接続の問題は、ブラウザ側とサーバー側に分けて見ます。

切り分け

つながらないときの確認順

  1. Qcurl http://localhost:61822/ に応答があるか?
    答えがサーバーが動いていません

    claude mcp list でkaptureがConnectedか確認します。MCPクライアントを起動するとサーバーも立ち上がる作りです。

    答えがはい
  2. Qツールバーのバッジが ✓ か?
    答えが接続していないか再試行中です

    バッジが ↻ なら再試行中です。タブの接続スイッチを入れ直し、chrome://extensions/ からサービスワーカーのコンソールを見ます。

    答えがはい
  3. Qコマンドが 5 秒でタイムアウトするか?
    答えがセレクターや待ち時間の問題ではなさそうです

    既定のタイムアウトは5秒です。navigate のようにタイムアウトを指定できるツールは値を伸ばし、セレクターの誤りも疑います。

    答えがはい

それでも直らないとき

拡張の再読み込みとDevToolsの開き直しを試します。

READMEは、DevToolsを閉じていても自動操作は動くと書いています。一方、MCP_USAGEの最初の手順はDevToolsを開いてKaptureパネルで接続を確認する流れです。パネルは任意で、接続の確認や通信の観察に使うものと読むと食い違いません。

任せる前に決めておくこと

ログイン済みのタブを渡すと、Claude Codeはそのセッションでできる操作をすべて実行できます。Kapture側の制約は3点です。

  • 操作は接続したタブだけに閉じる(タブIDで分離)
  • 拡張はファイルシステムに直接アクセスしない
  • evaluate は人間の許可がないと使えない

逆に言えば、接続したタブの中の送信ボタンや削除ボタンを押す操作を止める仕組みは、Kaptureにはありません。Claude Codeの権限設定で mcp__kapture__click などを確認付きにしておくと、実行のたびに人間が止められます。接続するタブも、作業用のプロファイルのものに絞ると事故の範囲が小さくなります。

よくある質問

公式サイトのツール数が資料ごとに違うのはなぜですか

公式サイトは32個のツールを掲げ、MCP_USAGEは28個と書いています。どちらが古いかは資料に書かれていません。実際に使えるツールは、接続後にClaude Codeの /mcp で見るのが確実です。

プライバシーの扱いはどうなっていますか

サイトは「分析なし、トラッカーなし、すべてのコードがGitHubにある」と述べています。ただし、画面の中身はMCPを通じてClaudeに渡ります。接続するタブの内容がモデルに送られる点は、他のブラウザ操作系MCPと同じです。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →