# agent にクロスオリジン iframe をクリックさせる：chrome-use がこの難題を攻略

AI agent にブラウザをつなぐと、出だだしはたいてい順調じゅんちょうです。ページを開ひらく、内容ないようを読よむ、検索けんさくボックスに入力にゅうりょくする。本当ほんとうに人ひとを詰つまらせるのは、あのクロスオリジン iframe の中なかに隠かくれたフォームです。Google Payments の受取うけとり情報じょうほう、さまざまな決済けっさいコンポーネント、KYC コントロール。agent はその中なかの文字もじを読よめるし、値あたいも入力にゅうりょくできる。それなのに、あの「保存ほぞん」ボタンだけはクリックできない。読よめるのに、完了かんりょうできない。

この記事では、この壁かべを攻略こうりゃくした過程かていを記録きろくします。主役しゅやくは chrome-use——Rust で書かかれた、agent 向むけのブラウザ自動化じどうか CLI です。Playwright も headless も使つかわず、あなたが**実際じっさいにログインしている**その Chrome を直接ちょくせつ操作そうさします。

なぜクロスオリジン iframe はこんなに難むずかしいのか

普通ふつうのページなら簡単かんたんです。アクセシビリティツリーを取得しゅとくし、要素ようその参照さんしょうを取とり、クリックすれば終おわりです。ところがクロスオリジン iframe、たとえば adsense.google.com のページに payments.google.com の iframe が埋うめ込こまれているようなケースでは、一度いちどに三みっつの地雷じらいを踏ふみます。

1. セレクタが中なかに入はいれない。同一どういつオリジンポリシーのもとでは、外側そとがわのドキュメントで実行じっこうする CSS セレクタや eval は、iframe 内部ないぶの DOM にまったく触ふれられません。ここでは document.querySelector は役やくに立たちません。
2. スクロールが空振からぶりする。ページをスクロールしているつもりでも、実際じっさいにスクロールすべきなのは iframe 内部ないぶのスクロールコンテナです。wheel イベントは外側そとがわのドキュメントに送おくられ、中なかはまったく動うごきません。目的もくてきの行ぎょうはいつまでも「画面がめんの外そと」で、見みることすらできません。
3. 座標ざひょうを勘かんでクリックするしかない。前まえの二ふたつのせいで、「スクリーンショット + ピクセル座標ざひょうの推測すいそく」に戻もどらざるを得えません。しかしこれはもっとも不正確ふせいかくで、隣となりのフィールドを誤あやまってクリックしやすい方法ほうほうです。しかも変更へんこうするのが**全体ぜんたいの支払しはらい情報じょうほう**であるフォームなら、クリック一回いっかいの間違まちがいの代償だいしょうは小ちいさくありません。

chrome-use の土台どだい：agent に渡わたすのは HTML ではなく「参照さんしょう」

突破とっぱ方法ほうほうの前まえに、まず基本きほんの仕組しくみを説明せつめいします。ここが「HTML をモデルに食くわせる」方式ほうしきとの根本的こんぽんてきな違ちがいでもあります。

chrome-use はページソースを agent に投なげません。かわりにアクセシビリティツリーのスナップショットを取得しゅとくし、各かくインタラクティブ要素ようそに短みじかい参照さんしょうを付つけます。

- textbox "メール" [ref=e2]
- listbox "<ruby>国<rt>くに</rt></ruby>/<ruby>地域<rt>ちいき</rt></ruby>" [ref=e60]
- button "<ruby>保存<rt>ほぞん</rt></ruby>" [ref=e41]

agent はその参照さんしょうを直接ちょくせつ操作そうさします。fill @e2 "..."、click @e41 のように。一いちページあたりおよそ 200–400 token で、DOM ノイズだらけの画面がめん全体ぜんたいではありません。この参照さんしょうの仕組しくみこそが、あとで iframe を貫通かんつうできる前提ぜんていになります。スナップショットが iframe 内ないのノードを「見みられる」なら、参照さんしょうも取とれるからです。

三みっつの壁かべを、一ひとつずつ越こえる

第一だいいちの壁かべ: スナップショットに iframe 内ないのものを見みせる。 アクセシビリティツリーがクロスオリジン iframe を貫通かんつうし、中なかのノードにも参照さんしょうを付つけて持もってこられるようにします。修正後しゅうせいご、snapshot は直接ちょくせつこう列挙れっきょします。

- textbox "<ruby>電話番号<rt>でんわばんごう</rt></ruby> (<ruby>任意<rt>にんい</rt></ruby>)" [ref=e59]
- listbox "<ruby>国<rt>くに</rt></ruby>/<ruby>地域<rt>ちいき</rt></ruby>コード：<ruby>日本<rt>にほん</rt></ruby> (+81)" [ref=e60]

——セレクタが入はいれない場所ばしょにも、参照さんしょうなら入はいれます。

第二だいにの壁かべ: スクロールを iframe のスクロールコンテナに効きかせる。 wheel を外側そとがわのドキュメントへまとめて送おくるのをやめ、本当にスクロールすべきコンテナをスクロールします。これで下したのフォーム行ぎょうがようやく視野しやに入はいり、参照さんしょうも取得しゅとくできるようになります。

第三だいさんの壁かべ（もっとも硬かたい）: クロスオリジン iframe 内ないの「有効ゆうこう」な送信そうしんボタンを押おしても反応はんのうしない。 この段階だんかいがいちばん苦くるしいところです。なぜなら、見みた目めにはすべて正ただしいからです。

• 実際じっさいのキー入力にゅうりょくで番号ばんごうを入力にゅうりょくできている。get value で読よむと、たしかに入はいっている。
• 「保存ほぞん」ボタンは点灯てんとうすべきタイミングで点灯てんとうしている（正ただしい値あたいを入いれる前まえは disabled で、入力後にゅうりょくごに現あらわれる）。
• そして click @e41——フォームはまったく動うごかない。find text "<ruby>保存<rt>ほぞん</rt></ruby>"？クロスオリジンなので取とれない。フォーカスして Enter / スペースを押おす？それでも反応はんのうしない。

合あっているのに、どこもかしこも合あっていない。根本原因こんぽんげんいんは、クロスオリジン iframe 内ないにある Material / フレームワーク系けいのボタンが、合成ごうせいクリックを受うけ付つけないことでした。さらに fill は入力にゅうりょくボックスの値あたいだけを変更へんこうし、フレームワークが必要ひつようとする input / change イベントを発火はっかしません。そのためフォーム自身じしんは「変化へんかしていない」と思おもい、保存ほぞんボタンが無効むこうのままだったり、クリックしてもクリックしていないのと同おなじになったりします。

解決策かいけつさくは二ふたつに分わかれます。値あたいの入力にゅうりょくは**実際じっさいのキー入力にゅうりょくに切きり替かえること（各かく文字もじが本物ほんもののイベントを発生はっせいさせて、フレームワークが認識にんしきします）。クリックについては、iframe 内ないのコンテンツノードに対たいして、click() を雑ざつに投なげるのではなく、本物ほんもののマウス / キーボード起動きどう**を一式いっしき送おくることです。

仕上しあげ: 中なかまでクリックし、保存ほぞんする

三みっつの壁かべを越こえると、一連いちれんの流ながれがつながります。開ひらく → 目的もくてきの行ぎょうまでスクロールする → スナップショットで参照さんしょうを取とる → 実際じっさいのキー入力にゅうりょくで値あたいを入いれる → 保存ほぞんを押おす。あの「読よめるのに、完了かんりょうできない」という行いき止どまりは、ここで終おわりです。

同おなじように agent のブラウザ自動化じどうかをしている人ひとへ、痛いたみから得えた経験けいけん

• まずアクセシビリティ参照さんしょうを使つかい、デフォルトでスクリーンショットの座標ざひょうクリックに頼たよらない。スナップショットが iframe を見みられるようになったら、参照さんしょうはピクセルの推測すいそくよりずっと安定あんていします。スクリーンショットは canvas / WebGL のような、本当に構造こうぞうがない場面ばめんに残のこしましょう。
• クロスオリジン iframe は明確めいかくな境界きょうかいです。セレクタと eval はここで終おわりです。ツールに a11y ツリーを貫通かんつうさせるか、さもなければ盲目的もうもくてきなクリックしか残のこりません。
• 「入力にゅうりょくできるか」だけでなく、「送信そうしんできるか」を検証けんしょうする。値あたいが入はいったこと ≠ フレームワークが受うけ取とったこと、です。fill がイベントを発火はっかしないという落おとし穴あなは、実際じっさいに保存ほぞんをクリックしてはじめて露呈ろていします。
• 実際じっさいにログインしているブラウザを使つかえるなら、headless は避さける。ログイン状態じょうたい、cookie、拡張機能かくちょうきのうがすべてそのままあり、自動化じどうかのフィンガープリントもありません。これが chrome-use が「あなた自身じしんの Chrome を操作そうさする」道みちを選えらんでいる理由りゆうでもあります。

試ためす

curl -fsSL https://raw.githubusercontent.com/leeguooooo/chrome-use/main/install.sh | sh

リポジトリは github.com/leeguooooo/chrome-use にあります。私はずっと、このような「あなた自身じしんのサブスクリプションを使つかい、agent を実際じっさいのブラウザ / デバイスにつなぐ」ツールを作つくっており、進捗しんちょくは X @leeguooooo に投稿とうこうしています。