Claude にあなたのブラウザを直接操作させる:フォーム入力、投稿、スライダーキャプチャのドラッグまで

大多数の人はAIを「聞いたら答える」程度でしか使っていない。PandaNpcのChrome拡張機能は、あなたのClaude Codeを実際にブラウザに介入させ、代わりにクリックし、入力し、ページをめくる——さらにはスライダー認証コードをドラッグして通過させることさえできる。Chrome DevTools Protocolを利用してカーネルレベルでisTrusted=trueの実際の入力と、バックエンドで計算された人間らしいドラッグ軌跡を注入し、反スクレイピングを回避し、クロスドメインのiframeに入る。43の操作ツールに加え、承認カード、ドメインブラックリスト、一時停止スイッチ、操作の痕跡を残す安全ゲートの一式を備えている。

PandaNpc初公開日
Claude にあなたのブラウザを直接操作させる:フォーム入力、投稿、スライダーキャプチャのドラッグまで

ほとんどの人はAIを「質問すれば答えが返ってくる」ものとして使っています。しかし、本当に面倒な作業の多くは「答えが思いつかない」ことではなく、Webページ上で一歩一歩手を動かさなければならないことです——フォームの各フィールドに1つずつ入力したり、整理した内容を何らかのWebエディタに貼り付けて投稿したり、十数ページをめくって情報を書き写したり、ログイン時にスライダーキャプチャを手動でドラッグしたり。こうした作業は本来AIが最も代わりにやってくれるべきですが、AIはあなたのブラウザにアクセスできません。

PandaNpc の Chrome 拡張機能がこの「アクセスできない」壁を打ち破ります:あなたの Claude Code が実際にあなたのブラウザに手を伸ばし、あなたの代わりにクリックし、入力し、ページをめくり、さらにはキャプチャをドラッグまでしてくれます。 スクリーンショットを見せて、それに対して「ここをクリック」と指示するのではなく——AI自身が操作します。

それは何か

一言で言えば:Chrome 拡張機能であり、Claude をあなたのブラウザの「オペレーター」にします。

連鎖はシンプルです:

你的 Claude Code  →  cc-relay 中转  →  浏览器插件  →  操作你当前看的网页

あなたが会話の中で「この内容を投稿して」「このフォームを入力して」「このサイトにログインして」と言うと、Claude は拡張機能を呼び出し、あなたが今見ているタブで操作を実行します。拡張機能が Claude の「手」となり、あなたはその様子をずっと見ることができます。

何ができるか

拡張機能は Claude に 43 のブラウザ操作ツール を提供し、人間がマウスとキーボードでできるほぼすべてのことをカバーしています:

  • 見る:ページの本文を読む、スクリーンショットを撮る、特定の要素の構造を取得する、ページの背後にあるネットワークリクエストデータを取得する。
  • クリックと入力:ボタン/リンクをクリック、入力欄にテキストを入力、チェックボックス、ドロップダウン選択、キー入力(Ctrl/Enter などのコンビネーションキーを含む)、スクロール、ホバー、ドラッグ。
  • ページ遷移とジャンプ:タブを開く/閉じる/切り替える、進む/戻る、URL にジャンプ、特定の要素が読み込まれるのを待つ。
  • 転送:画像(例:カバー画像)を URL 経由で Web ページのアップロードボックスに直接送信。画像のバイトデータが会話を経由する必要はありません。
  • キャプチャ突破:スライダーの隙間を認識、スライダーをドラッグ、テキスト/画像キャプチャをクリック選択(後述)。

重要なのは「ツールの数」ではなく、あなたがこれらのツールを覚える必要がないことです。あなたが自然言語で指示すれば、Claude がそれを一連の操作に分解して実行します。Claude が代わりにできる作業を抽象的に言えば:

  • 面倒で繰り返しの Web 操作を一言で任せる——フォーム入力、一括処理、複数ページ間の情報移動。
  • 整理した内容を一度に Web エディタに流し込んで公開する。
  • ログインやキャプチャ突破が必要なフローを処理する。

どの Web サイトに対して、何をするかはあなたが決めます。

特長:キャプチャをどのように「ドラッグ」するか

これこそが拡張機能の真骨頂であり、通常の Web スクリプトや Greasemonkey スクリプトでは実現できません。

まず、なぜ通常の自動化ではキャプチャを突破できないかを説明します。ブラウザは各イベントに isTrusted という「真偽スタンプ」を押します。人間がマウスでクリックしたイベントは isTrusted=true です。JavaScript コードで生成されたクリック(element.click()dispatchEvent)は isTrusted=false です。キャプチャやアンチスクレイピングシステムはこのスタンプをチェックするため、生成されたイベントはすぐにバレます。そのため、Greasemonkey スクリプトでクリックをシミュレートしても、キャプチャは認識しません。

この拡張機能は別の方法を取ります——Chrome DevTools Protocol (CDP) を介してブラウザのカーネルレベルで入力イベントを注入し、isTrusted=true の本物のスタンプを押します。アンチスクレイピングはこれが人間かどうか区別できません。これが real_click / real_drag / real_type といった「リアル入力」ツールの根拠です。

「本物」であるだけでは不十分で、人間らしくドラッグする必要があります。スライダーのドラッグ軌跡は、特別に計算された人間らしい曲線であり、直線で瞬間移動するわけではありません:

  • 速度変化:スタートは遅く、中間は速く、ギャップの近くで再び減速(人間が手でドラッグするときの加速減速を模倣)。一定速度ではありません。
  • 弧を描く:途中でわずかに上に膨らんでから戻る。人間の手は完全な直線を描かないことを模倣。
  • 微振動を含む:各ステップにピクセルレベルのランダムな微振動を重ねる。
  • ポーズを含む:押した直後に一瞬止まる(開始時のためらい)、離す前にも一瞬止まる。各ステップ間もランダムなミリ秒間隔。

スライダーのギャップ位置も拡張機能自身が認識します:キャプチャ画像を取得し、グレースケールに変換し、列ごとに垂直エッジの「エネルギー」を計算——パズルピースとギャップの左右の垂直エッジが最もエネルギーが強く、ペアリングしてギャップ位置を特定します。Claude が座標を受け取り、ドラッグ距離を計算し、人間らしい軌跡でドラッグします。ドラッグ後にスクリーンショットを確認し、ずれていれば微調整します。

  • パズルスライダー:ギャップを認識 → ドラッグ。
  • 「一番右まで」直線スライダー:ハンドルとトラックの右端を測定 → 一気に端までドラッグ。
  • テキスト/画像クリックキャプチャ:スクリーンショットで要求されたクリック順序と各文字の位置を確認 → 座標に従って順にクリック。

もう一つの隠れた難しさ:多くの Web サイトのログインボックスやキャプチャはクロスオリジン iframe 内にあり、通常のスクリプトのセレクタではアクセスできません。しかし、この座標レベルのリアル入力はレンダリングレイヤーを通じて動作するため、同一オリジンポリシーの制限を受けず、クロスオリジン iframe 内の操作も直接可能です。

一言で比較:

通常の Web スクリプト / Greasemonkey PandaNpc 拡張機能
イベントの真偽 isTrusted=false(生成) isTrusted=true(カーネル注入)
アンチスクレイピング認識 チェックで即バレ 人間と区別できない
ドラッグ軌跡 直線で瞬間移動 人間らしい速度変化 + 弧 + 微振動
クロスオリジン iframe 内のキャプチャ アクセス不可 座標レベルで進入可能
何をどうクリック/ドラッグするかの判断 自分でルールを書く Claude が画像認識 + 判断

注:キャプチャ突破は、あなた自身が権限を持つ操作(例:自分のアカウントにログインする)を完了するためのものであり、他人のサイトを一括でクラックしたり攻撃したりするためのものではありません。

セキュリティ:あなたに内緒で勝手なことをしない

AI にブラウザを操作させる際の最大の懸念は、「勝手に悪さをしないか」です。拡張機能はこれに対して複数の防御層を備えています:

  • すべての操作に承認が必要:Claude がクリック/入力しようとする前に、サイドバーにカードが表示され、「どのページで何をしようとしているか」が通知されます。あなたは許可 / 常に許可(このサイト・この操作) / 拒否 を選択できます。
  • 危険なサイトは直接ブロック:ネットバンキング、決済、メール、アカウントログインページ(工行/建行/招行、PayPal/Alipay/WeChat Pay、Gmail/QQ メール/Outlook、Google/Microsoft ログインなど)はすべてブラックリストに登録されており、一切の操作を拒否します。確認すら求めません。
  • 現在のタブだけを操作:バックグラウンドで開いている他の Web ページには触れません。
  • ワンタッチ一時停止のマスタースイッチ:いつでも押せば、すべての自動化が即座に停止します。
  • 操作の痕跡を残す:最近の 100 件の操作(いつ、どのページで、何をしたか、成功したか)が記録され、確認可能です。
  • 複数ブラウザ間で混同しない:同じアカウントを複数のブラウザにインストールしても、各セッションの指示はそのブラウザにのみ送られ、ブロードキャストされたり誤送信されたりしません。

言い換えれば:何ができるかは、あなたがカードごとに承認する;何をしたかは、いつでも確認できる

3ステップで使い始める

  1. 拡張機能をインストール:Chrome ストアからワンクリックインストール 👉 PandaNpc — Remote Control for Claude Code

  2. Claude Code とペアリング:開発マシンで pandapaw をインストールして実行します。

    bash
    # macOS / Linux
    curl -fsSL https://cos.pandanpc.com/pandapaw/install.sh | sh
    # Windows(PowerShell)
    iwr -useb https://cos.pandanpc.com/pandapaw/install.ps1 | iex

    その後、pandapaw qr を実行すると2分間有効な一回限りのペアリングコードが生成されるので、それを拡張機能のサイドバーに貼り付けて「接続」を押します。

  3. 作業を任せる:操作したい Web ページを開き、会話の中で自然言語で指示します——「このフォームを入力して」「ログインして、キャプチャはあなたがドラッグして」「この内容を投稿して」。残りは Claude が自分で実行し、承認が必要な場合はカードで尋ねます。

まとめ

AI が最も役立つ瞬間は、あなたの代わりに考えるときではなく、あなたの代わりに手を動かすときです。この Chrome 拡張機能は、Claude を「チャットボックスの中のアドバイザー」から「あなたのブラウザの中のオペレーター」に変えます:43 の操作ツール、スライダーやクリックキャプチャの突破、クロスオリジン iframe へのアクセス、そして完全な承認・ブラックリスト・一時停止・痕跡のセキュリティ機構を備えています。

AI に本当に Web 上であなたの代わりに作業をさせたいなら、今すぐ拡張機能をインストールして、あなたの Claude Code に接続してみてください。