← すべての記事

Chrome拡張機能(Beta): あらゆるページリクエストをAPI呼び出しに変換

ベータ版のChrome拡張機能は、ページデータを運ぶリクエストを特定し、headerやcookieを含めたFourA呼び出し(cURL、Python、Node、MCP対応)としてコピーします。

新機能

おなじみの作業です。DevToolsを開き、リロードし、目的の価格データが含まれるリクエストが見つかるまで何十ものリクエストをスクロールして右クリックし、Copy as cURLを実行します。そこから本格的な作業が始まります。Chrome内部でのみ意味を持つheaderを削除し、自前のクライアント用に書き直し、ブラウザ以外からのリクエストにも応答するかどうかを確認します。

現在ベータ版のFourA Chrome拡張機能は、その作業を数回のクリックに短縮します。Networkの隣にFourAタブを追加し、ページのrequestを一覧表示して、画面上で確認できるテキストを含むリクエストを検出します。そして、Single、Proxy Finder、Browser向けの呼び出しコードとして、curl、Python、Node、MCP形式ですぐにコピーできます。また、同じ拡張機能のポップアップから、Chrome自体の通信をproxy portユーザー経由にルーティングすることも可能です。

本拡張機能は現在Chrome Web Storeには未掲載です。DashboardのToolsからダウンロードし、デベロッパーモードで読み込んで使用します(Chrome バージョン116以降)。拡張機能自体は無料です。トンネル経由のトラフィックはプランのproxy使用量としてカウントされ、DevToolsから実行する呼び出しには通常のAPI料金が適用されます。

仕組み

データ収集対象のページでDevToolsを開き、FourAタブを選択します。リロードすると、Networkタブと同様にrequestが一覧表示されます。広告やアナリティクスはデフォルトで非表示になり、そのページ自体のrequestのみを抽出するThis site onlyスイッチも備えています。Find in responsesに価格、商品名、その他の画面上のテキストを入力すると、その文字列を含むresponseを返したrequestが特定されます。多くの場合、この段階でページが直接呼び出し可能なJSON endpointからレンダリングされていることに気付きます。

該当のrequestを選択し、FourA callで使用するエンジンを選んでコピーします。以下は、ショップページのJSON requestに対するcurl形式の例です(簡略化版。実際のコピー内容にはページが送信したすべてのheaderが含まれます)。

curl https://api.foura.ai/api/single \
  -H 'X-API-Key: YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
  "method": "GET",
  "url": "https://shop.example.com/api/products?category=coffee&page=2",
  "headers": [
    ["accept", "application/json"],
    ["referer", "https://shop.example.com/coffee"],
    ["accept-language", "en-GB,en;q=0.9"]
  ],
  "browser": "Chrome",
  "os": "macOS",
  "unblocker": true
}'

この呼び出しには、意図的に設計された3つの点があります。headerはページが送信した順序通りのペアのリストとして渡され、これはSingleが受け付ける形式です。Chromeが自身の接続用に書き込むもの(host、content-length、accept-encoding、connectionなど)は除外されます。これらをコピーすると、次に呼び出しを送信するクライアント側でエラーが発生するためです。そしてbrowserとosは、現在使用しているChromeと一致するbrowser profileを要求します。バージョンは意図的に除外されています。未対応のバージョンとして拒否されるのを防ぎ、システムが提供する最新のものが適用されます。

MCP形式はツール名(foura_single)の後に同じJSONが続く構成で、弊社のMCP serverと連携するエージェントですぐに使用できます。

続いて2つのボタンがあります。Open in the playgroundは呼び出しをDashboard Playgroundに読み込み、対象が自身のものであれば同じkeyが選択されます。Run through FourAはリクエストを送信し、「The browser got」と「FourA got」を並べて表示します。コードを1行も書くことなく、弊社のレスポンスがページのデータと一致しているか確認できます。

Impact

手動の手順については広く知られています。ScrapingBeeのチュートリアルでは、ChromeからcURLを取得するだけで5つの手順を踏んでおり、コピーにはブラウザが送信したすべてのheaderとcookieが含まれると記載されています。多くのスクレイパーはそこから作業を始めます。しかし、そのコピーは自身のブラウザからリクエストが動作することしか証明できないため、作業の半分にすぎません。

FourAタブはその両方の工程を1箇所でカバーします。URLから推測する代わりにレスポンス内容からリクエストを特定し、APIが要求する形式の呼び出しを取得し、ワンクリックで弊社側から正常に動作するか検証できます。これは、URLから内容が判別できないリクエスト経由でデータが送られてくるページで特に威力を発揮します。

削減できた時間についてのデータはまだありません。ベータ版であるため、実際の効果は次のタスクでご判断ください。

For Power Users

エンジンをProxy Finderに切り替えると、パネルが同じリクエストをラップし、Exit countryを選択できるようになります。

{
  "request": {
    "method": "GET",
    "url": "https://shop.example.com/api/products?category=coffee&page=2",
    "headers": [["accept", "application/json"]],
    "unblocker": true
  },
  "exitCountries": ["DE"]
}

exitCountries は厳格な許可リストです。リクエストが他の国にフォールバックすることはなく、処理を行った国が exitCountry として返されます。これはプラン固有の機能であるため、国ターゲティングを含まないプランではその旨を示すエラーが返されます。

Browser は、リクエストを送信するのではなくページを開くため、異なる構造をとります。ヘッダーをオブジェクトとして受け取り、ページの Cookie ヘッダーをホストにスコープされた cookie リストに変換します。また、エンジン自体が独自に送信するため、user-agent および Client Hints ヘッダーは除外されます(プロファイルオプションが有効な場合、このウィンドウの User-Agent が代わりに送信されます)。ボディなしの GET のみをリプレイします。検索フォームからの POST は Single で処理すべきであり、JSON ボディはオブジェクトとして、それ以外はページが送信した文字列そのままとして渡されます。

任意のリクエストを右クリックすると、同様のコピー操作に加え、「Copy URL」と「Copy response」が利用できます。実行用の API キーはタブの Settings に保持され、Keep the key on this computer にチェックを入れない限り、Chrome が閉じるまで保持されます。

1点、重要な警告があります。cookie を含めてコピーした呼び出しは、サインイン中のセッションをそのままリプレイします。パスワードと同等に扱い、チケットやチャット、パブリックリポジトリには含めないでください。

ポップアップ側についても触れておきます。設定から読み取るのではなく、サイトがトンネル越しに認識しているアドレスを実際に測定し、そのアドレスが自身のアドレスと一致する場合は Not routed と表示します。アイコンが赤くなり数字が表示されている場合、プロキシが直近1分間にその回数だけ接続を拒絶したことを示し、ポップアップにその理由が表示されます。Location ページの背後にある ユーザー名オプション は、プロキシポートのドキュメントに記載されているものと同じです。

What's Next

この拡張機能は完成と判断するまでベータ版のままであり、Dashboard からインストールします。Chrome Web Store への掲載時期は定めていません。ビルドおよびテストの対象ブラウザは Chrome のみです。セットアップガイド には現在提供されている機能が記載されています。今後の変更は、FourA タブを実際のワークロードに適用した際に得られるフィードバックに応じて決定されます。

次にページがパーサーを拒絶したときは、HTML を開く前に DevTools を開いてみてください。最も低コストなスクレイパーとは、多くの場合、ページがすでに実行したリクエストを再利用するものです。