CDP入門 03 PowerShellでChrome DevTools Protocol（CDP）に接続する方法｜WebSocket通信の基本

概要

前回の記事では、EdgeをChrome DevTools Protocol(CDP)モード（remote-debugging-port） で起動し、/json/list からブラウザのタブ情報を取得する方法を確認しました。

CDPでは、タブ情報に含まれている webSocketDebuggerUrl に接続することで、そのブラウザタブを外部から操作できるようになります。

今回はその次のステップとして、CDPに接続し、実際にコマンドを送信する方法を確認します。

また、今回はWindows11端末に何も追加しないでブラウザ自動化を行いたいと言う前提なので、Windows端末ではデフォルトで入っているPowerShellからCDPを操作します。

この記事では次の内容を解説します。

• CDP通信の基本構造
• PowerShellからWebSocket接続する方法
• CDPコマンドを送信する方法
• コマンドの実行結果を受信する方法

---

CDP通信の基本構造

CDP（Chrome DevTools Protocol）は前回に説明した通り、実際の処理部分は WebSocket通信を使ってブラウザとやり取りを行います。

基本的な流れは次の3ステップです。

1. WebSocket接続を確立
2. JSONコマンドを送信
3. 実行結果をJSONで受信

例えば、ブラウザ上でJavaScriptを実行する場合は次のようなJSONを送信します。

{
 "id": 1,
 "method": "Runtime.evaluate",
 "params": {
   "expression": "document.title"
 }
}

このJSONを送信すると、ブラウザがコマンドを実行して結果を返します。

ここで重要な項目は次の3つです。

項目	意味
id	リクエスト識別子
method	実行するCDPコマンド
params	コマンドのパラメータ

CDPでは、このJSONコマンドを送ることでブラウザを操作します。

---

PowerShellからWebSocket接続する

PowerShellでは .NET の ClientWebSocket クラスを使うことでWebSocket接続が可能です。

次のコードでCDPのWebSocketに接続できます。

Add-Type -AssemblyName System.Net.WebSockets$ws = [System.Net.WebSockets.ClientWebSocket]::new()$uri = "ws://localhost:9222/devtools/page/XXXX"$ws.ConnectAsync(
 $uri,
 [Threading.CancellationToken]::None
).Wait()

XXXX の部分には、前回の記事で取得した
webSocketDebuggerUrl に含まれるタブIDを指定します。

---

CDPコマンドを送信する

次にCDPコマンドを送信します。

PowerShellではJSON文字列を UTF-8バイト配列に変換して送信します。

$command = @{
 id = 1
 method = "Runtime.evaluate"
 params = @{
   expression = "document.title"
 }
} | ConvertTo-Json -Depth 10$bytes = [System.Text.Encoding]::UTF8.GetBytes($command)$segment = [ArraySegment[byte]]::new($bytes)$ws.SendAsync(
 $segment,
 [System.Net.WebSockets.WebSocketMessageType]::Text,
 $true,
 [Threading.CancellationToken]::None
).Wait()

このコードでは Runtime.evaluate コマンドを使って、ページタイトルを取得しています。

---

実行結果を受信する

CDPではコマンドの実行結果も JSON形式で返ってきます。

PowerShellでは ReceiveAsync() を使って受信します。

$buffer = New-Object byte[] 4096$segment = [ArraySegment[byte]]::new($buffer)$result = $ws.ReceiveAsync(
 $segment,
 [Threading.CancellationToken]::None
).Result$json = [System.Text.Encoding]::UTF8.GetString(
 $buffer,
 0,
 $result.Count
)

成功すると、次のようなレスポンスが返ってきます。

{
 "id": 1,
 "result": {
   "result": {
     "type": "string",
     "value": "ページタイトル"
   }
 }
}

value に JavaScriptの実行結果が入っています。

---

CDP通信のイメージ

CDP通信の流れを整理すると次のようになります。

PowerShell
   │
   │ WebSocket
   ↓
CDP (ブラウザ)
   │
   │ JSONコマンド
   ↓
Runtime.evaluate
   │
   │ JSONレスポンス
   ↓
PowerShell

つまりCDPは

「WebSocketでJSONコマンドを送るだけのシンプルなプロトコル」

とも言えます。

---

まとめ

今回はPowerShellからCDPに接続し、コマンドを送信する基本的な方法を確認しました。

CDP通信は次の3ステップで動作します。

1. WebSocket接続
2. JSONコマンド送信
3. JSONレスポンス受信

この基本構造を理解しておくと、ブラウザ操作の自動化を比較的自由に実装できるようになります。

次回は、CDPでよく使う操作の一つである

JavaScriptの実行（Runtime.evaluate）とDOM操作

について整理していきます。

---

このシリーズ

次の記事

前の記事