ChromeのレコーダーとClaudeでブラウザ操作を高速自動化する

Claudeでブラウザ操作を自動化したい

Claude Desktopには組み込みでClaude in Chromeというコネクタが入っているので、AIからブラウザを操作することができます。しかし試してみてもらうとわかるのですが、ひとつひとつの操作に時間がかかったり、誤操作をしてしまったりすることが多々あります。なぜかというと、2026年春時点では、表示されているページのレイアウトや要素の場所を理解するために、DOMの解析と画面のキャプチャ両方を使っているからです。例えば保存ボタンをクリックする、という操作を行うだけでも、ボタンにアクセスするためのDOMを解析するだけでなく、スクリーンショットを撮ってキャプチャ画像から「保存」と書かれたテキストを探し、座標を解析するといった処理を行っています。特に画面キャプチャを撮ってからの画像解析のステップが非常に時間がかかります。

それにAIに指示をするときにいちいちログイン画面にパスワードを入力してからヘッダーの〇〇リンクをクリックしてドロップダウンを✗✗みたいなプロンプトを書いていたらまどろっこしいですよね。予め決まった操作なら、画面をキャプチャせずにDOMの処理だけで済むのでは思って、今回はChrome DevToolsのレコーダーを使って、スクリプトを直接Claudeに読み込ませてみました。

やりたいこと

ANAのマイレージサイトにログインして保有マイルを取得し、メールで通知する。

Chrome DevToolsレコーダーでブラウザ操作を記録する

Chrome DevToolsを立ち上げ、「レコーダー」タブを開きます。レコーダータブがない場合は、DevToolsのメニューから「その他のツール」>「レコーダー」を開きます。

「新しい記録を作成」で記録を開始します。

サイトにログインし、保有マイルが表示されているページまで遷移します。操作が終わったら、「記録を終了」をクリックします。

「記録をエクスポート」をクリックし、JSON形式で保存します。

あとはこのJSONファイルを使って、Claudeにブラウザを操作してもらいます。

Claudeで実行する

Claudeでワークフローを実行するためにRunbookを使います。エクスポートしたスクリプトをエディタで開いてパスワード部分を削除し、Runbookのワークフローにアップロードします。パスワードはローカルにテキストファイルで保存します。念のため、チャットにパスワードを表示しないよう指示しておきます。

完成したワークフローはこのようになりました。

プロセスが完了したら結果をメールで送信するよう、メール通知の設定をしておきます。

ではさっそくClaude Coworkで実行してみます。「Runbookから追加」で指定してもよいのですが、Coworkは現状MCPリソースをうまく読み込めないようなので、IDで指定します。

スクリプトファイルとパスワードを取得したのち、ブラウザ操作を許可を求められます。

処理が完了しました‼️

ワークフローも正常終了していますね。メールも送信されています。

ClaudeとChrome DevToolsレコーダーを活用すれば、MCPに対応していないWebサービスをAIから正確かつ高速に操作することが可能になります。RPAの置き換えや、AIの業務利用がより進みますね。

注意点として、Webサービスによっては、event.isTrustやevent.detailを使ってJavaScriptによる入力を無効化している場合があります。今回のデモに使用したのはANAのマイレージサイトでしたが、実は当初使おうとしたANAの予約サイトでは、DOM操作によるログイン画面からのログインボタンクリックがうまくいかず、結局Claudeが試行錯誤したのち、画面をキャプチャしてボタンをクリックしてしまいました。結果的に成功したからOKではありますが、これだとレコーダーを使うメリットが半減してしまいます。このへんのデバッグは、現状それなりにエンジニアリングが要求されるところではあり、将来的にはWebMCPなど、サイトのほうがAIに寄せていく感じになるのではと思っています。