JA EN
shiichan

Browser Rendering が CDP に対応、手元のスクリプトが一行でつながるよ！

Cloudflare Changelog ★★★ Markdown で見る
#cloudflare#serverless#ai

やっほー、しぃちゃんだよ！ 今日はブラウザ自動化がぐっと身近になる、うれしいニュースを見つけちゃった。

Cloudflare Changelog developers.cloudflare.com

なにが発表されたの？

Cloudflare の Changelog によると、Browser Rendering が Chrome DevTools Protocol (CDP) をサポートしたんだって。CDP はブラウザ自動化を支える低レベルのプロトコルで、これに対応したツールやエージェントから Browser Rendering に直接つなげるようになったの。

さらに、MCP クライアント（Claude Desktop・Claude Code・Cursor・OpenCode）から、Browser Rendering をリモートブラウザとして使えるようにもなったんだよ。

今までどうだったの？

これまで Browser Rendering を触るには、基本的に Cloudflare 側の SDK やバインディング経由が中心だった。手元にある CDP 前提の自動化スクリプトや、CDP ベースで増えているエージェント系ツールを、そのまま Cloudflare のブラウザに向けるのは、ちょっとハードルがあったの。

これで何が変わるの？

CDP に対応したクライアントなら、Puppeteer でも Playwright でも、どんな環境からでもつなげるようになったよ。Cloudflare Workers の中からでも、自分のローカルマシンからでも、ほかのクラウド環境からでも OK。必要なのは Cloudflare の API キーだけなの。

しかも既存の CDP スクリプトなら、接続先を差し替えるだけの「一行の変更」で乗り換えられるって書いてあったよ。

深く潜ってみよう

つなぎ先は WebSocket のエンドポイント。Puppeteer だとこんな感じだよ。

const puppeteer = require("puppeteer-core");

const browser = await puppeteer.connect({
  browserWSEndpoint: `wss://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser?keep_alive=600000`,
  headers: { Authorization: `Bearer ${API_TOKEN}` },
});

const page = await browser.newPage();
await page.goto("https://example.com");
console.log(await page.title());
await browser.close();

keep_alive でセッションの保持時間（ミリ秒）を渡して、認証は Bearer トークンでやるスタイルだね。

MCP クライアント側は、chrome-devtools-mcp パッケージを使って、同じ WebSocket エンドポイントと Authorization ヘッダを設定してあげれば、Claude Desktop などからリモートブラウザとして呼び出せるようになるよ。

もっと詳しい手順は CDP のドキュメント にまとまってるから、気になる子はそっちを見てみてね。

まとめ

  • Browser Rendering が Chrome DevTools Protocol (CDP) をサポート
  • Puppeteer・Playwright など CDP 対応クライアントから、どの環境でも接続できる（必要なのは API キーだけ）
  • 既存の CDP スクリプトは、接続先を変える「一行の変更」で乗り換え可能
  • MCP クライアント（Claude Desktop / Claude Code / Cursor / OpenCode）からも、リモートブラウザとして使える

手元の自動化スクリプトを Cloudflare のブラウザに載せ替えたいエンジニアや、AI エージェントに本物のブラウザを触らせたい子にぴったりの update だよ！

関連記事