HyperBrowserで任意のCAPTCHAを解く方法: CapSolverを使用したフルセットアップガイド

npm install @hyperbrowser/sdk playwright-core

mkdir -p capsolver-extension
unzip CapSolver.Browser.Extension-chrome-v*.zip -d capsolver-extension/

export const defaultConfig = {
  apiKey: 'CAP-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',  // ここにあなたのキーを入力
  useCapsolver: true,
  // ... その他の設定
};

ls capsolver-extension/manifest.json
# 存在する必要があります

cd capsolver-extension && zip -r ../capsolver-extension.zip . && cd ..

import { Hyperbrowser } from "@hyperbrowser/sdk";

const client = new Hyperbrowser({
  apiKey: process.env.HYPERBROWSER_API_KEY,
});

// 拡張機能をアップロード (一度限りの操作)
const ext = await client.extensions.create({
  filePath: "capsolver-extension.zip",
});

console.log("拡張機能ID:", ext.id);
// このIDを保存してください -- すべてのセッションで再利用します

const session = await client.sessions.create({
  extensionIds: [ext.id],
  useProxy: true, // プレミアムプランが必要 — フリーレベルでは省略
  solveCaptchas: false, // CapSolverを使用するためネイティブ解決を無効
});

console.log("セッションID:", session.id);
console.log("WebSocket URL:", session.wsEndpoint);

import { chromium } from "playwright-core";

const browser = await chromium.connectOverCDP(session.wsEndpoint);
const context = browser.contexts()[0];
const page = context.pages()[0] || await context.newPage();

// CAPTCHA保護ページに移動
await page.goto("https://www.google.com/recaptcha/api2/demo");

// CapSolver拡張機能がCAPTCHAを検出・解決するのを待つ
await page.waitForTimeout(30000);

// フォームを送信
await page.click("#recaptcha-demo-submit");
await page.waitForLoadState("networkidle");

// 成功を確認
const result = await page.textContent("body");
console.log("結果:", result);
// 期待される: "Verification Success"を含む

await browser.close();
await client.sessions.stop(session.id);

import { Hyperbrowser } from "@hyperbrowser/sdk";
import { chromium } from "playwright-core";

const HYPERBROWSER_API_KEY = process.env.HYPERBROWSER_API_KEY!;
const CAPSOLVER_EXTENSION_ID = process.env.CAPSOLVER_EXTENSION_ID; // オプション: 既存のIDを再利用

async function main() {
  const client = new Hyperbrowser({ apiKey: HYPERBROWSER_API_KEY });

  // ステップ1: 拡張機能をアップロード (または既存のIDを再利用)
  let extensionId = CAPSOLVER_EXTENSION_ID;

  if (!extensionId) {
    const ext = await client.extensions.create({
      filePath: "capsolver-extension.zip",
    });
    extensionId = ext.id;
    console.log("アップロード済み拡張機能:", extensionId);
  }

  // ステップ2: CapSolver拡張機能付きのセッションを作成
  const session = await client.sessions.create({
    extensionIds: [extensionId],
    useProxy: true, // プレミアムプランが必要 — フリーレベルでは省略
    solveCaptchas: false,
  });

  console.log("セッション開始:", session.id);

  // ステップ3: Playwrightに接続
  const browser = await chromium.connectOverCDP(session.wsEndpoint);
  const context = browser.contexts()[0];
  const page = context.pages()[0] || await context.newPage();

  try {
    // ステップ4: reCAPTCHAデモに移動
    console.log("reCAPTCHAデモに移動中...");
    await page.goto("https://www.google.com/recaptcha/api2/demo");

    // ステップ5: CapSolverがCAPTCHAを解決するのを待つ
    console.log("CapSolverがCAPTCHAを解決するのを待っています...");
    await page.waitForTimeout(30000);

    // ステップ6: フォームを送信
    console.log("フォームを送信中...");
    await page.click("#recaptcha-demo-submit");
    await page.waitForLoadState("networkidle");

    // ステップ7: 結果を確認
    const bodyText = await page.textContent("body");

    if (bodyText?.includes("Verification Success")) {
      console.log("CAPTCHAが正常に解決されました！");
    } else {
      console.log("検証結果:", bodyText?.slice(0, 200));
    }
  } finally {
    await browser.close();
    await client.sessions.stop(session.id);
    console.log("セッションを停止しました。");
  }
}

main().catch(console.error);

HYPERBROWSER_API_KEY=your_key npx tsx captcha-test.ts

  一時的なセットアップ
  ═══════════════════════════════════════════════════════

  capsolver-extension/           HyperBrowserクラウド
  ├── manifest.json    ──ZIP──►  POST /extensions
  ├── assets/config.js           │
  └── background.js              ▼
                                 extensionId: "ext_abc123"
                                 (保存され、再利用可能)

  セッションごとのフロー
  ═══════════════════════════════════════════════════════

  あなたのスクリプト                    HyperBrowserクラウド
  ─────────────────────────────────────────────────────
  sessions.create({       ──►    クラウドChromiumを起動
    extensionIds: [id],          │
    useProxy: true               ├── 拡張機能をロード
  })                             ├── プロキシ + ステルスを適用
                                 ▼
                          ◄──    wsEndpoint (WebSocket URL)

  playwright.connectOverCDP()    クラウドブラウザに接続
       │
       ▼
  page.goto(target_url)   ──►   Chromiumがページを読み込み
                                 ┌─────────────────────────────┐
                                 │  CAPTCHAウィジェットのあるページ    │
                                 │                              │
                                 │  CapSolver拡張機能:        │
                                 │  1. コンテンツスクリプトがページ上のCAPTCHAタイプを検出 │
                                 │  2. サービスワーカーがCapSolver APIを呼び出す │
                                 │  3. ソリューショントークンを受信 │
                                 │  4. トークンを非表示フォームフィールドにインジェクト │
                                 └─────────────────────────────┘
                                      │
  page.waitForTimeout(30s)            │ (解決がここです)
       │                              │
       ▼                              ▼
  page.click("Submit")    ──►   有効なトークンを含むフォームを送信
                                      │
                          ◄──         ▼
                                 Googleデモ: "Verification Success!"

// 包括的: CapSolver拡張機能
const session = await client.sessions.create({
  extensionIds: [capsolverExtId],
  solveCaptchas: false,
  useProxy: true, // プレミアムプランが必要 — フリーレベルでは省略
});

// ベルトとサスペンダー: 両方を有効
const session = await client.sessions.create({
  extensionIds: [capsolverExtId],
  solveCaptchas: true, // ネイティブがTurnstile/reCAPTCHAを処理
  useProxy: true, // プレミアムプランが必要 — フリーレベルでは省略
  // CapSolver拡張機能がAWS WAF、GeeTestなども処理
});

import { Hyperbrowser } from "@hyperbrowser/sdk";
import { chromium } from "playwright-core";
const HYPERBROWSER_API_KEY = process.env.HYPERBROWSER_API_KEY!;
const CAPSOLVER_API_KEY = process.env.CAPSOLVER_API_KEY!;

async function solveCaptchaViaAPI(
  pageUrl: string,
  siteKey: string
): Promise<string> {
  // タスクの作成
  const createRes = await fetch("https://api.capsolver.com/createTask", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      clientKey: CAPSOLVER_API_KEY,
      task: {
        type: "ReCaptchaV2TaskProxyLess",
        websiteURL: pageUrl,
        websiteKey: siteKey,
      },
    }),
  });
  const { taskId, errorDescription } = await createRes.json();
  if (!taskId) throw new Error(`createTaskに失敗しました: ${errorDescription}`);

  // 結果をポーリング
  for (let i = 0; i < 40; i++) {
    await new Promise((r) => setTimeout(r, 3000));
    const resultRes = await fetch("https://api.capsolver.com/getTaskResult", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ clientKey: CAPSOLVER_API_KEY, taskId }),
    });
    const result = await resultRes.json();
    if (result.status === "ready") {
      return result.solution.gRecaptchaResponse;
    }
  }
  throw new Error("解決タイムアウト");
}

async function main() {
  const client = new Hyperbrowser({ apiKey: HYPERBROWSER_API_KEY });

  // 拡張機能は不要です — 通常のセッションを使用してください
  const session = await client.sessions.create({
    solveCaptchas: false,
  });

  const browser = await chromium.connectOverCDP(session.wsEndpoint);
  const context = browser.contexts()[0];
  const page = context.pages()[0] || await context.newPage();

  try {
    await page.goto("https://www.google.com/recaptcha/api2/demo");

    // DOMからsitekeyを検出
    const siteKey = await page.evaluate(() => {
      const el = document.querySelector(".g-recaptcha[data-sitekey]");
      return el?.getAttribute("data-sitekey") ?? "";
    });
    console.log("sitekey:", siteKey);

    // CapSolver APIで解決
    const token = await solveCaptchaViaAPI(page.url(), siteKey);
    console.log("トークンを取得しました、長さ:", token.length);

    // トークンを注入
    await page.evaluate((t) => {
      const textarea = document.querySelector(
        'textarea[name="g-recaptcha-response"]'
      );
      if (textarea) (textarea as HTMLTextAreaElement).value = t;
    }, token);

    // 送信
    await page.click("#recaptcha-demo-submit");
    await page.waitForLoadState("networkidle");

    const body = await page.textContent("body");
    console.log(
      body?.includes("Verification Success")
        ? "API経由でCAPTCHAを解決しました！"
        : body?.slice(0, 200)
    );
  } finally {
    await browser.close();
    await client.sessions.stop(session.id);
  }
}

main().catch(console.error);

# ZIP構造を確認 — manifest.jsonがルートに存在する必要があります
unzip -l capsolver-extension.zip | head -20
# 期待される出力: manifest.json (NOT capsolver-extension/manifest.json)

try {
  const browser = await chromium.connectOverCDP(session.wsEndpoint);
} catch (err) {
  console.log("セッションが期限切れです。新しいセッションを作成します...");
  const newSession = await client.sessions.create({
    extensionIds: [extensionId],
    useProxy: true, // プレミアムプランが必要 — フリーレベルでは省略してください
  });
  const browser = await chromium.connectOverCDP(newSession.wsEndpoint);
}

// 一度だけアップロード
const ext = await client.extensions.create({ filePath: "capsolver-extension.zip" });
const CAPSOLVER_EXT_ID = ext.id;

// すべてのセッションで再利用
for (const url of targetUrls) {
  const session = await client.sessions.create({
    extensionIds: [CAPSOLVER_EXT_ID],
    useProxy: true, // プレミアムプランが必要 — フリーレベルでは省略してください
  });
  // ... 自動化
  await client.sessions.stop(session.id);
}

const session = await client.sessions.create({
  extensionIds: [extensionId],
  useProxy: true, // プレミアムプランが必要 — フリーレベルでは省略してください。住宅用プロキシでCAPTCHAの頻度を減らすことができます
});

import axios from "axios";

async function checkBalance(apiKey: string): Promise<number> {
  const response = await axios.post("https://api.capsolver.com/getBalance", {
    clientKey: apiKey,
  });
  return response.data.balance || 0;
}

const balance = await checkBalance(process.env.CAPSOLVER_API_KEY!);
if (balance < 1) {
  console.warn("CapSolverの残高が少ないです！capsolver.comでチャージしてください");
}

try {
  // ... あなたの自動化コード
} finally {
  await browser.close();
  await client.sessions.stop(session.id);
}

# config.jsにキーを更新し、次のように実行してください:
cd capsolver-extension && zip -r ../capsolver-extension.zip . && cd ..

import puppeteer from "puppeteer-core";

const browser = await puppeteer.connect({
  browserWSEndpoint: session.wsEndpoint,
});