はじめに
最近、AnthropicからリリースされたChrome拡張機能「Claude in Chrome」が、単なるブラウザアシスタントの枠を超えて、特に開発者のワークフローを大きく変える可能性を秘めていると感じています。
これまでも、ブラウザ上でAIと対話できる拡張機能は存在しました。しかし、今回の「Claude in Chrome」が画期的なのは、AIがブラウザを直接「見て」、そして「操作」できる点にあります。まるで、隣に座っている同僚に「このボタン押しといて」と頼むような感覚で、ブラウザ作業を任せられるようになってきました。
この記事では、「Claude in Chrome」の基本的な機能から、特にエンジニアにとって強力な武器となるであろう「Claude Code」との連携機能まで、実際に試しながらその実力を深掘りしていきます。
まずは基本機能をおさらい
「Claude in Chrome」は、現在、有料プラン（Pro, Max, Team, Enterprise）ユーザー向けにベータ版として提供されています。なお、現時点ではGoogle Chromeのみ対応で、BraveやArcなど他のChromiumベースのブラウザはサポート外です。
まずは、その基本的な機能を見ていきましょう。
1. ブラウザのサイドパネルでいつでも一緒
Chrome Web Store から拡張機能をインストールすると、サイドパネルにClaudeが常駐します。
ウェブサイトを閲覧しながらシームレスにAIと対話でき、タブを切り替える必要がありません。
2. ワークフローを記録して自動化
個人的に「これはすごい」と思ったのが、ワークフローの記録機能です。
チャット欄に / と入力すると「ワークフローを記録」が表示されます。
選択すると録画モードに入ります。
記録中は、操作しながら声で説明を加えるのがポイントです。「30日以上経ったものをアーカイブしている」のように意図を伝えると、Claudeは単なるクリック位置ではなく、タスクの目的を理解してくれます。
記録を終えると、ショートカットが自動生成されます。以降は / を入力してそのショートカットを選ぶだけで、同じ作業を再現できます。
3. スケジュール実行
記録したワークフローは、スケジュール実行も可能です。「毎日朝9時に、このサイトのダッシュボードをチェックして、新しい情報があれば要約して」といったタスクを一度設定しておけば、あとはClaudeが自動で実行してくれます。
Claude Codeとの連携
さて、ここからが本題です。この拡張機能の真価は、ターミナルで動作する「Claude Code」と連携することで発揮されます。一言で言えば、ターミナルからブラウザを自在に操れるようになるのです。
この連携を有効にするには、ターミナルで以下のコマンドを実行します。
claude --chrome
接続に成功すると、以下のような案内が表示されます。
毎回フラグを付けるのが面倒であれば、/chrome コマンドから「Enabled by default」を選択すれば、以降は自動で接続されます。
これだけで、Claude CodeのセッションがChrome拡張機能と接続され、ターミナルでの指示がリアルタイムにブラウザへ反映されるようになります。
活用例1：ローカル開発サーバーのデバッグ
localhost:3001 で開発中のアプリを確認するとき、ターミナルからこう指示できます。
指示の例：
「localhost:3001 を開いて、ページ読み込み時にコンソールエラーが出ていないか確認して。」
Claudeはページを開き、コンソール出力を読み取って状態を報告してくれます。エラーがなければ「問題なし」、あれば内容と修正案を提示してくれるので、開発者ツールを開く手間が省けます。
活用例2：UIの実装確認
Figmaのデザインを見ながら実装したUIが、意図通りになっているか確認したいときにも使えます。
指示の例：
「localhost:3001 のヘッダーを見て、DOM構造を読み取り、ナビゲーションリンクが横並びになっているか、ロゴが左端にあるか確認して。」
Claudeは実際にページを開いてDOM構造を読み取り、レイアウトの状態を報告してくれます。目視確認の補助として使うと便利です。
活用例3：操作手順のGIF記録
公式ドキュメントによると、Claudeがブラウザを操作する様子をGIFとして記録できる機能があります。READMEのデモや、PRでの動作確認共有に使える想定です。
指示の例：
「large-task-burstワークフローを実行して、その様子をGIFで記録して。」
注意点として、GIF生成には「computer tool」による操作（クリック、スクロールなど）が必要です。単なるページ閲覧だけではフレームが記録されないので、実際にブラウザを操作するタスクで使うのがおすすめです。
他のツールと何が違うのか
Cursorのように、エディタ内でAIがブラウザを操作するツールは他にも存在します。しかし、「Claude in Chrome」のユニークな点は、ユーザーが普段使っている「素のChrome」と、そのログインセッションや他の拡張機能をそのまま利用できる点にあると思います。
多くの企業では、特定のGoogleアカウントでログインしないとアクセスできない社内システムなどがあるはずです。Claudeは、その「ログイン済みの状態」を引き継いでブラウザを操作してくれるため、APIキーの設定やCookieのインポートといった面倒な事前準備なしに、すぐに実用的なタスクを任せることができます。
ただし、ログインページやCAPTCHAに遭遇した場合は、Claudeが一時停止して手動対応を求めてきます。認証を済ませて「続けて」と伝えれば、そこから作業を再開してくれます。
まとめ
「Claude in Chrome」を実際に使ってみて感じたのは、これが単なる「ブラウザ自動化ツール」ではないということです。SeleniumやPlaywrightのようなテスト自動化ツールは、厳密なスクリプトに基づいて動作しますが、Claudeは現在の画面の状態を「見て」、文脈を「理解」し、柔軟に次のアクションを判断します。
もちろん、まだベータ版ということもあり、複雑なUIの解釈に失敗したり、JavaScriptのalert/confirmダイアログが操作をブロックしたりすることもあります。しかし、ターミナルとブラウザという、開発者が最も多くの時間を過ごす2つの場所がシームレスに連携し、そこにAIの推論能力が加わったインパクトは計り知れないものがあります。
これまで面倒だと感じていたブラウザ上での細々とした確認作業やデバッグ作業を、まるで優秀なアシスタントに口頭で指示するように任せられる。そんな新しい開発スタイルが、もうすぐそこまで来ているのかもしれません。
有料プラン限定の機能ではありますが、もし対象となる方は、ぜひ一度試してみる価値はあると思います。