[{"data":1,"prerenderedAt":1887},["ShallowReactive",2],{"content-/agent-browser-setup":3,"all-pages-for-dir":1885,"og-image-/agent-browser-setup":1886},{"id":4,"title":5,"body":6,"category":1867,"description":1868,"extension":1869,"meta":1870,"navigation":246,"path":1871,"project_name":1872,"published":1873,"publishedAt":1874,"seo":1875,"stem":1876,"tags":1877,"todo":1883,"updatedAt":1883,"__hash__":1884},"pages/2026-04/2026-04-05/agent-browser-setup.md","agent-browser導入ガイド - AIエージェント向けブラウザ自動化CLIのセットアップと活用",{"type":7,"value":8,"toc":1842},"minimark",[9,14,18,38,42,47,90,96,102,110,114,132,135,178,181,187,198,207,211,218,221,225,431,434,620,623,776,779,782,816,819,888,892,895,912,915,918,976,979,1020,1026,1030,1196,1199,1358,1362,1365,1369,1483,1486,1491,1509,1518,1522,1535,1542,1546,1549,1553,1568,1572,1669,1672,1689,1693,1726,1729,1838],[10,11,13],"h1",{"id":12},"agent-browser-導入ガイド","agent-browser 導入ガイド",[15,16,17],"p",{},"agent-browser は AI エージェント向けのブラウザ自動化 CLI。Rust 製のネイティブバイナリで、Playwright や Node.js ランタイム不要で Chrome を操作できる。Claude Code から bash 経由で直接呼び出して使う。",[19,20,21,31],"ul",{},[22,23,24,25],"li",{},"リポジトリ: ",[26,27,28],"a",{"href":28,"rel":29},"https://github.com/vercel-labs/agent-browser",[30],"nofollow",[22,32,33,34],{},"ドキュメント: ",[26,35,36],{"href":36,"rel":37},"https://agent-browser.dev",[30],[39,40,41],"h2",{"id":41},"セットアップ手順",[43,44,46],"h3",{"id":45},"_1-インストール","1. インストール",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-bash shiki shiki-themes vitesse-light vitesse-light","pnpm add -g agent-browser\nagent-browser install   # Chrome for Testing をダウンロード（初回のみ）\n","bash","",[55,56,57,77],"code",{"__ignoreMap":53},[58,59,62,66,70,74],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"senZ8","pnpm",[58,67,69],{"class":68},"sdGka"," add",[58,71,73],{"class":72},"snbK4"," -g",[58,75,76],{"class":68}," agent-browser\n",[58,78,80,83,86],{"class":60,"line":79},2,[58,81,82],{"class":64},"agent-browser",[58,84,85],{"class":68}," install",[58,87,89],{"class":88},"sxvE3","   # Chrome for Testing をダウンロード（初回のみ）\n",[15,91,92,95],{},[55,93,94],{},"pnpm approve-builds -g"," のプロンプトが出た場合は、ビルドスクリプトの許可は不要（バイナリは同梱済み）。",[15,97,98,101],{},[55,99,100],{},"agent-browser install"," で Chrome for Testing がダウンロードされる（既存の Chrome とは別管理）:",[48,103,108],{"className":104,"code":106,"language":107},[105],"language-text","Installing Chrome...\n  Downloading Chrome 147.0.7727.50 for win64\n  180/180 MB (100%)\n✓ Chrome 147.0.7727.50 installed successfully\n  Location: C:\\Users\\numbe\\.agent-browser\\browsers\\chrome-147.0.7727.50\n","text",[55,109,106],{"__ignoreMap":53},[43,111,113],{"id":112},"_2-claude-code-スキルの追加グローバル","2. Claude Code スキルの追加（グローバル）",[48,115,117],{"className":50,"code":116,"language":52,"meta":53,"style":53},"npx skills add vercel-labs/agent-browser\n",[55,118,119],{"__ignoreMap":53},[58,120,121,124,127,129],{"class":60,"line":61},[58,122,123],{"class":64},"npx",[58,125,126],{"class":68}," skills",[58,128,69],{"class":68},[58,130,131],{"class":68}," vercel-labs/agent-browser\n",[15,133,134],{},"対話型インストーラーが起動する。以下の順に選択:",[136,137,138,148,154,163,172],"ol",{},[22,139,140,144,145,147],{},[141,142,143],"strong",{},"Select skills to install",": ",[55,146,82],{}," をスペースで選���",[22,149,150,153],{},[141,151,152],{},"Which agents do you want to install to?",": 使用するエージェントを選択（Claude Code 等）",[22,155,156,144,159,162],{},[141,157,158],{},"Installation scope",[141,160,161],{},"Global"," を選択（ホームディレクトリにインストール、全���ロジェクトで利用���能）",[22,164,165,144,168,171],{},[141,166,167],{},"Installation method",[141,169,170],{},"Symlink (Recommended)"," を選択",[22,173,174,177],{},[141,175,176],{},"Proceed with installation?",": Yes",[15,179,180],{},"インストール結果:",[48,182,185],{"className":183,"code":184,"language":107},[105],"Installation Summary\n  ~\\.agents\\skills\\agent-browser\n    universal: Amp, Antigravity, Cline, Codex, Cursor +7 more\n    symlink → Claude Code\n",[55,186,184],{"__ignoreMap":53},[15,188,189,190,193,194,197],{},"スキルは ",[55,191,192],{},"~\\.agents\\skills\\agent-browser"," に配置され、Claude Code の ",[55,195,196],{},".claude/skills/"," にシンボリックリンクが張られる。",[199,200,201],"blockquote",{},[15,202,203,206],{},[141,204,205],{},"Note",": Snyk が \"High Risk\" と表示するが、これは agent-browser がブラウザプロセスを起動・操作するネイティブバイナリであるため。Vercel公式パッケージなので問題ない。",[43,208,210],{"id":209},"_3-グロール-claudemd-への追記任意","3. グロー��ル CLAUDE.md への追記（任意）",[15,212,213,214,217],{},"以下のセクションをグローバルの ",[55,215,216],{},"CLAUDE.md"," に追記する。",[219,220],"hr",{},[39,222,224],{"id":223},"ここから-claudemd-に追記する内容","▼ ここから CLAUDE.md に追記する内容 ▼",[48,226,230],{"className":227,"code":228,"language":229,"meta":53,"style":53},"language-markdown shiki shiki-themes vitesse-light vitesse-light","## Browser Automation (agent-browser)\n\nブラウザの操作・テスト・デバッグには `agent-browser` を使う。\nChrome DevTools を直接操作するのではなく、agent-browser CLI 経由で行うこと。\n\n### 基本ワークフロー\n\n1. `agent-browser open \u003Curl>` — ページを開く\n2. `agent-browser snapshot -i` — インタラクティブ要素のアクセシビリティツリーを取得（ref付き）\n3. `agent-browser click @e1` / `agent-browser fill @e2 \"text\"` — ref を使って操作\n4. ページ遷移・変更後は再度 `snapshot -i` を取得して状態を確認\n\n### Chrome 拡張機能の読み込み\n\nローカルの unpacked extension を読み込む場合：\n\n```bash\nagent-browser --extension \"C:\\path\\to\\extension\\directory\" open https://example.com\n","markdown",[55,231,232,242,248,266,272,277,286,291,308,324,350,369,374,382,387,393,398,407],{"__ignoreMap":53},[58,233,234,238],{"class":60,"line":61},[58,235,237],{"class":236},"sFA8A","##",[58,239,241],{"class":240},"syTZV"," Browser Automation (agent-browser)\n",[58,243,244],{"class":60,"line":79},[58,245,247],{"emptyLinePlaceholder":246},true,"\n",[58,249,251,255,259,261,263],{"class":60,"line":250},3,[58,252,254],{"class":253},"sG7-3","ブラウザの操作・テスト・デバッグには ",[58,256,258],{"class":257},"shFtX","`",[58,260,82],{"class":253},[58,262,258],{"class":257},[58,264,265],{"class":253}," を使う。\n",[58,267,269],{"class":60,"line":268},4,[58,270,271],{"class":253},"Chrome DevTools を直接操作するのではなく、agent-browser CLI 経由で行うこと。\n",[58,273,275],{"class":60,"line":274},5,[58,276,247],{"emptyLinePlaceholder":246},[58,278,280,283],{"class":60,"line":279},6,[58,281,282],{"class":236},"###",[58,284,285],{"class":240}," 基本ワークフロー\n",[58,287,289],{"class":60,"line":288},7,[58,290,247],{"emptyLinePlaceholder":246},[58,292,294,297,300,303,305],{"class":60,"line":293},8,[58,295,296],{"class":72},"1.",[58,298,299],{"class":257}," `",[58,301,302],{"class":253},"agent-browser open \u003Curl>",[58,304,258],{"class":257},[58,306,307],{"class":253}," — ページを開く\n",[58,309,311,314,316,319,321],{"class":60,"line":310},9,[58,312,313],{"class":72},"2.",[58,315,299],{"class":257},[58,317,318],{"class":253},"agent-browser snapshot -i",[58,320,258],{"class":257},[58,322,323],{"class":253}," — インタラクティブ要素のアクセシビリティツリーを取得（ref付き）\n",[58,325,327,330,332,335,337,340,342,345,347],{"class":60,"line":326},10,[58,328,329],{"class":72},"3.",[58,331,299],{"class":257},[58,333,334],{"class":253},"agent-browser click @e1",[58,336,258],{"class":257},[58,338,339],{"class":253}," / ",[58,341,258],{"class":257},[58,343,344],{"class":253},"agent-browser fill @e2 \"text\"",[58,346,258],{"class":257},[58,348,349],{"class":253}," — ref を使って操作\n",[58,351,353,356,359,361,364,366],{"class":60,"line":352},11,[58,354,355],{"class":72},"4.",[58,357,358],{"class":253}," ページ遷移・変更後は再度 ",[58,360,258],{"class":257},[58,362,363],{"class":253},"snapshot -i",[58,365,258],{"class":257},[58,367,368],{"class":253}," を取得して状態を確認\n",[58,370,372],{"class":60,"line":371},12,[58,373,247],{"emptyLinePlaceholder":246},[58,375,377,379],{"class":60,"line":376},13,[58,378,282],{"class":236},[58,380,381],{"class":240}," Chrome 拡張機能の読み込み\n",[58,383,385],{"class":60,"line":384},14,[58,386,247],{"emptyLinePlaceholder":246},[58,388,390],{"class":60,"line":389},15,[58,391,392],{"class":253},"ローカルの unpacked extension を読み込む場合：\n",[58,394,396],{"class":60,"line":395},16,[58,397,247],{"emptyLinePlaceholder":246},[58,399,401,404],{"class":60,"line":400},17,[58,402,403],{"class":257},"```",[58,405,406],{"class":253},"bash\n",[58,408,410,412,415,419,422,425,428],{"class":60,"line":409},18,[58,411,82],{"class":64},[58,413,414],{"class":72}," --extension",[58,416,418],{"class":417},"sMJiu"," \"",[58,420,421],{"class":68},"C:\\path\\to\\extension\\directory",[58,423,424],{"class":417},"\"",[58,426,427],{"class":68}," open",[58,429,430],{"class":68}," https://example.com\n",[43,432,433],{"id":433},"デバッグ用コマンド",[48,435,437],{"className":50,"code":436,"language":52,"meta":53,"style":53},"agent-browser snapshot                    # アクセシビリティツリー全体\nagent-browser snapshot -i                 # インタラクティブ要素のみ（推奨）\nagent-browser snapshot -i -c              # コンパクト表示\nagent-browser snapshot -i --json          # JSON出力（構造化データとして処理する場合）\nagent-browser screenshot                  # スクリーンショット取得\nagent-browser screenshot --annotate       # 要素に番号ラベル付きスクリーンショット\nagent-browser console                     # コンソールメッセージ確認\nagent-browser errors                      # JSエラー確認\nagent-browser eval \"document.title\"       # JavaScript 実行\nagent-browser get text @e1                # 要素のテキスト取得\nagent-browser get html @e1                # 要素のHTML取得\nagent-browser get url                     # 現在のURL取得\nagent-browser network requests            # ネットワークリクエスト一覧\nagent-browser network requests --filter api  # APIリクエストのみフィルタ\n",[55,438,439,449,461,475,489,499,511,521,531,548,564,578,590,603],{"__ignoreMap":53},[58,440,441,443,446],{"class":60,"line":61},[58,442,82],{"class":64},[58,444,445],{"class":68}," snapshot",[58,447,448],{"class":88},"                    # アクセシビリティツリー全体\n",[58,450,451,453,455,458],{"class":60,"line":79},[58,452,82],{"class":64},[58,454,445],{"class":68},[58,456,457],{"class":72}," -i",[58,459,460],{"class":88},"                 # インタラクティブ要素のみ（推奨）\n",[58,462,463,465,467,469,472],{"class":60,"line":250},[58,464,82],{"class":64},[58,466,445],{"class":68},[58,468,457],{"class":72},[58,470,471],{"class":72}," -c",[58,473,474],{"class":88},"              # コンパクト表示\n",[58,476,477,479,481,483,486],{"class":60,"line":268},[58,478,82],{"class":64},[58,480,445],{"class":68},[58,482,457],{"class":72},[58,484,485],{"class":72}," --json",[58,487,488],{"class":88},"          # JSON出力（構造化データとして処理する場合）\n",[58,490,491,493,496],{"class":60,"line":274},[58,492,82],{"class":64},[58,494,495],{"class":68}," screenshot",[58,497,498],{"class":88},"                  # スクリーンショット取得\n",[58,500,501,503,505,508],{"class":60,"line":279},[58,502,82],{"class":64},[58,504,495],{"class":68},[58,506,507],{"class":72}," --annotate",[58,509,510],{"class":88},"       # 要素に番号ラベル付きスクリーンショット\n",[58,512,513,515,518],{"class":60,"line":288},[58,514,82],{"class":64},[58,516,517],{"class":68}," console",[58,519,520],{"class":88},"                     # コンソールメッセージ確認\n",[58,522,523,525,528],{"class":60,"line":293},[58,524,82],{"class":64},[58,526,527],{"class":68}," errors",[58,529,530],{"class":88},"                      # JSエラー確認\n",[58,532,533,535,538,540,543,545],{"class":60,"line":310},[58,534,82],{"class":64},[58,536,537],{"class":68}," eval",[58,539,418],{"class":417},[58,541,542],{"class":68},"document.title",[58,544,424],{"class":417},[58,546,547],{"class":88},"       # JavaScript 実行\n",[58,549,550,552,555,558,561],{"class":60,"line":326},[58,551,82],{"class":64},[58,553,554],{"class":68}," get",[58,556,557],{"class":68}," text",[58,559,560],{"class":68}," @e1",[58,562,563],{"class":88},"                # 要素のテキスト取得\n",[58,565,566,568,570,573,575],{"class":60,"line":352},[58,567,82],{"class":64},[58,569,554],{"class":68},[58,571,572],{"class":68}," html",[58,574,560],{"class":68},[58,576,577],{"class":88},"                # 要素のHTML取得\n",[58,579,580,582,584,587],{"class":60,"line":371},[58,581,82],{"class":64},[58,583,554],{"class":68},[58,585,586],{"class":68}," url",[58,588,589],{"class":88},"                     # 現在のURL取得\n",[58,591,592,594,597,600],{"class":60,"line":376},[58,593,82],{"class":64},[58,595,596],{"class":68}," network",[58,598,599],{"class":68}," requests",[58,601,602],{"class":88},"            # ネットワークリクエスト一覧\n",[58,604,605,607,609,611,614,617],{"class":60,"line":384},[58,606,82],{"class":64},[58,608,596],{"class":68},[58,610,599],{"class":68},[58,612,613],{"class":72}," --filter",[58,615,616],{"class":68}," api",[58,618,619],{"class":88},"  # APIリクエストのみフィルタ\n",[43,621,622],{"id":622},"操作コマンド",[48,624,626],{"className":50,"code":625,"language":52,"meta":53,"style":53},"agent-browser click @e1                   # クリック\nagent-browser fill @e2 \"value\"            # フィールドに入力（クリア→入力）\nagent-browser type @e2 \"value\"            # 追記入力\nagent-browser select @e3 \"option\"         # ドロップダウン選択\nagent-browser check @e4                   # チェックボックスON\nagent-browser press Enter                 # キー入力\nagent-browser scroll down 500             # スクロール\nagent-browser wait --text \"完了\"           # テキスト出現を待機\nagent-browser wait --load networkidle     # ネットワーク待機\n",[55,627,628,640,660,678,698,711,724,741,761],{"__ignoreMap":53},[58,629,630,632,635,637],{"class":60,"line":61},[58,631,82],{"class":64},[58,633,634],{"class":68}," click",[58,636,560],{"class":68},[58,638,639],{"class":88},"                   # クリック\n",[58,641,642,644,647,650,652,655,657],{"class":60,"line":79},[58,643,82],{"class":64},[58,645,646],{"class":68}," fill",[58,648,649],{"class":68}," @e2",[58,651,418],{"class":417},[58,653,654],{"class":68},"value",[58,656,424],{"class":417},[58,658,659],{"class":88},"            # フィールドに入力（クリア→入力）\n",[58,661,662,664,667,669,671,673,675],{"class":60,"line":250},[58,663,82],{"class":64},[58,665,666],{"class":68}," type",[58,668,649],{"class":68},[58,670,418],{"class":417},[58,672,654],{"class":68},[58,674,424],{"class":417},[58,676,677],{"class":88},"            # 追記入力\n",[58,679,680,682,685,688,690,693,695],{"class":60,"line":268},[58,681,82],{"class":64},[58,683,684],{"class":68}," select",[58,686,687],{"class":68}," @e3",[58,689,418],{"class":417},[58,691,692],{"class":68},"option",[58,694,424],{"class":417},[58,696,697],{"class":88},"         # ドロップダウン選択\n",[58,699,700,702,705,708],{"class":60,"line":274},[58,701,82],{"class":64},[58,703,704],{"class":68}," check",[58,706,707],{"class":68}," @e4",[58,709,710],{"class":88},"                   # チェックボックスON\n",[58,712,713,715,718,721],{"class":60,"line":279},[58,714,82],{"class":64},[58,716,717],{"class":68}," press",[58,719,720],{"class":68}," Enter",[58,722,723],{"class":88},"                 # キー入力\n",[58,725,726,728,731,734,738],{"class":60,"line":288},[58,727,82],{"class":64},[58,729,730],{"class":68}," scroll",[58,732,733],{"class":68}," down",[58,735,737],{"class":736},"sM54T"," 500",[58,739,740],{"class":88},"             # スクロール\n",[58,742,743,745,748,751,753,756,758],{"class":60,"line":293},[58,744,82],{"class":64},[58,746,747],{"class":68}," wait",[58,749,750],{"class":72}," --text",[58,752,418],{"class":417},[58,754,755],{"class":68},"完了",[58,757,424],{"class":417},[58,759,760],{"class":88},"           # テキスト出現を待機\n",[58,762,763,765,767,770,773],{"class":60,"line":310},[58,764,82],{"class":64},[58,766,747],{"class":68},[58,768,769],{"class":72}," --load",[58,771,772],{"class":68}," networkidle",[58,774,775],{"class":88},"     # ネットワーク待機\n",[43,777,778],{"id":778},"セッション管理",[15,780,781],{},"複数サイトを並行操作する場合はセッション分離する：",[48,783,785],{"className":50,"code":784,"language":52,"meta":53,"style":53},"agent-browser --session site-a open https://example-a.com\nagent-browser --session site-b open https://example-b.com\n",[55,786,787,802],{"__ignoreMap":53},[58,788,789,791,794,797,799],{"class":60,"line":61},[58,790,82],{"class":64},[58,792,793],{"class":72}," --session",[58,795,796],{"class":68}," site-a",[58,798,427],{"class":68},[58,800,801],{"class":68}," https://example-a.com\n",[58,803,804,806,808,811,813],{"class":60,"line":79},[58,805,82],{"class":64},[58,807,793],{"class":72},[58,809,810],{"class":68}," site-b",[58,812,427],{"class":68},[58,814,815],{"class":68}," https://example-b.com\n",[15,817,818],{},"認証状態の保存と再利用：",[48,820,822],{"className":50,"code":821,"language":52,"meta":53,"style":53},"# 認証状態を保存\nagent-browser state save ./auth-state.json\n\n# 次回以降、認証状態を復元して起動\nagent-browser --state ./auth-state.json open https://example.com\n\n# または session-name で自動永続化\nagent-browser --session-name my-session open https://example.com\n",[55,823,824,829,842,846,851,865,869,874],{"__ignoreMap":53},[58,825,826],{"class":60,"line":61},[58,827,828],{"class":88},"# 認証状態を保存\n",[58,830,831,833,836,839],{"class":60,"line":79},[58,832,82],{"class":64},[58,834,835],{"class":68}," state",[58,837,838],{"class":68}," save",[58,840,841],{"class":68}," ./auth-state.json\n",[58,843,844],{"class":60,"line":250},[58,845,247],{"emptyLinePlaceholder":246},[58,847,848],{"class":60,"line":268},[58,849,850],{"class":88},"# 次回以降、認証状態を復元して起動\n",[58,852,853,855,858,861,863],{"class":60,"line":274},[58,854,82],{"class":64},[58,856,857],{"class":72}," --state",[58,859,860],{"class":68}," ./auth-state.json",[58,862,427],{"class":68},[58,864,430],{"class":68},[58,866,867],{"class":60,"line":279},[58,868,247],{"emptyLinePlaceholder":246},[58,870,871],{"class":60,"line":288},[58,872,873],{"class":88},"# または session-name で自動永続化\n",[58,875,876,878,881,884,886],{"class":60,"line":293},[58,877,82],{"class":64},[58,879,880],{"class":72}," --session-name",[58,882,883],{"class":68}," my-session",[58,885,427],{"class":68},[58,887,430],{"class":68},[43,889,891],{"id":890},"headed-モード画面表示","headed モード（画面表示）",[15,893,894],{},"デバッグ時にブラウザ画面を表示したい場合：",[48,896,898],{"className":50,"code":897,"language":52,"meta":53,"style":53},"agent-browser open https://example.com --headed\n",[55,899,900],{"__ignoreMap":53},[58,901,902,904,906,909],{"class":60,"line":61},[58,903,82],{"class":64},[58,905,427],{"class":68},[58,907,908],{"class":68}," https://example.com",[58,910,911],{"class":72}," --headed\n",[43,913,914],{"id":914},"バッチ実行",[15,916,917],{},"複数コマンドを一括実行してオーバーヘッドを減らす：",[48,919,921],{"className":50,"code":920,"language":52,"meta":53,"style":53},"echo '[\n  [\"open\", \"https://example.com\"],\n  [\"snapshot\", \"-i\"],\n  [\"click\", \"@e1\"],\n  [\"screenshot\", \"result.png\"]\n]' | agent-browser batch --json\n",[55,922,923,935,940,945,950,955],{"__ignoreMap":53},[58,924,925,929,932],{"class":60,"line":61},[58,926,928],{"class":927},"sz8Xr","echo",[58,930,931],{"class":417}," '",[58,933,934],{"class":68},"[\n",[58,936,937],{"class":60,"line":79},[58,938,939],{"class":68},"  [\"open\", \"https://example.com\"],\n",[58,941,942],{"class":60,"line":250},[58,943,944],{"class":68},"  [\"snapshot\", \"-i\"],\n",[58,946,947],{"class":60,"line":268},[58,948,949],{"class":68},"  [\"click\", \"@e1\"],\n",[58,951,952],{"class":60,"line":274},[58,953,954],{"class":68},"  [\"screenshot\", \"result.png\"]\n",[58,956,957,960,963,967,970,973],{"class":60,"line":279},[58,958,959],{"class":68},"]",[58,961,962],{"class":417},"'",[58,964,966],{"class":965},"stQ0i"," |",[58,968,969],{"class":64}," agent-browser",[58,971,972],{"class":68}," batch",[58,974,975],{"class":72}," --json\n",[43,977,978],{"id":978},"注意事項",[19,980,981,986,993,999,1006,1013],{},[22,982,983,985],{},[55,984,363],{}," の結果をパースして ref（@e1, @e2 ...）を特定してから操作すること",[22,987,988,989,992],{},"ページ遷移やDOM変更後は必ず再度 ",[55,990,991],{},"snapshot"," を取ること（ref は snapshot 取得時に生成される）",[22,994,995,998],{},[55,996,997],{},"--json"," フラグで機械可読な出力が得られる",[22,1000,1001,1002,1005],{},"デフォルトタイムアウトは 25 秒。遅いページには ",[55,1003,1004],{},"AGENT_BROWSER_DEFAULT_TIMEOUT=45000"," を設定",[22,1007,1008,1009,1012],{},"拡張機能は ",[55,1010,1011],{},"--extension"," で unpacked ディレクトリのパスを指定する",[22,1014,1015,1016,1019],{},"Windows 環境ではパス区切りに ",[55,1017,1018],{},"\\"," を使用する",[48,1021,1024],{"className":1022,"code":1023,"language":107},[105],"\n## ▲ ここまで CLAUDE.md に追記する内容 ▲\n\n---\n\n## 用途別ユースケース\n\n### Chrome 拡張機能の開発・デバッグ\n\n```bash\n# 拡張を読み込んだ状態でサイトを開く\nagent-browser --extension \"C:\\Users\\numbe\\Git_repo\\chrome-extension-x\" --headed open https://example.com\n\n# 拡張が注入したDOMの変化を確認\nagent-browser snapshot -i\n\n# コンソールログで拡張の動作確認\nagent-browser console\n\n# ネットワークリクエストの確認\nagent-browser network requests --filter api\n",[55,1025,1023],{"__ignoreMap":53},[43,1027,1029],{"id":1028},"クラウド会計への自動操作仕訳登録等","クラウド会計への自動操作（仕訳登録等）",[48,1031,1033],{"className":50,"code":1032,"language":52,"meta":53,"style":53},"# 認証付きで起動\nagent-browser --session-name accounting open https://accounting-app.example.com\n\n# 仕訳入力画面に遷移\nagent-browser snapshot -i\nagent-browser click @e5   # メニューリンク等\n\n# フォーム入力\nagent-browser fill @e10 \"2025-04-01\"   # 日付\nagent-browser select @e11 \"売上高\"      # 勘定科目\nagent-browser fill @e12 \"100000\"        # 金額\nagent-browser click @e20                # 登録ボタン\n\n# 結果確認\nagent-browser wait --text \"登録しました\"\nagent-browser screenshot result.png\n",[55,1034,1035,1040,1054,1058,1063,1072,1084,1088,1093,1112,1131,1150,1162,1166,1171,1187],{"__ignoreMap":53},[58,1036,1037],{"class":60,"line":61},[58,1038,1039],{"class":88},"# 認証付きで起動\n",[58,1041,1042,1044,1046,1049,1051],{"class":60,"line":79},[58,1043,82],{"class":64},[58,1045,880],{"class":72},[58,1047,1048],{"class":68}," accounting",[58,1050,427],{"class":68},[58,1052,1053],{"class":68}," https://accounting-app.example.com\n",[58,1055,1056],{"class":60,"line":250},[58,1057,247],{"emptyLinePlaceholder":246},[58,1059,1060],{"class":60,"line":268},[58,1061,1062],{"class":88},"# 仕訳入力画面に遷移\n",[58,1064,1065,1067,1069],{"class":60,"line":274},[58,1066,82],{"class":64},[58,1068,445],{"class":68},[58,1070,1071],{"class":72}," -i\n",[58,1073,1074,1076,1078,1081],{"class":60,"line":279},[58,1075,82],{"class":64},[58,1077,634],{"class":68},[58,1079,1080],{"class":68}," @e5",[58,1082,1083],{"class":88},"   # メニューリンク等\n",[58,1085,1086],{"class":60,"line":288},[58,1087,247],{"emptyLinePlaceholder":246},[58,1089,1090],{"class":60,"line":293},[58,1091,1092],{"class":88},"# フォーム入力\n",[58,1094,1095,1097,1099,1102,1104,1107,1109],{"class":60,"line":310},[58,1096,82],{"class":64},[58,1098,646],{"class":68},[58,1100,1101],{"class":68}," @e10",[58,1103,418],{"class":417},[58,1105,1106],{"class":68},"2025-04-01",[58,1108,424],{"class":417},[58,1110,1111],{"class":88},"   # 日付\n",[58,1113,1114,1116,1118,1121,1123,1126,1128],{"class":60,"line":326},[58,1115,82],{"class":64},[58,1117,684],{"class":68},[58,1119,1120],{"class":68}," @e11",[58,1122,418],{"class":417},[58,1124,1125],{"class":68},"売上高",[58,1127,424],{"class":417},[58,1129,1130],{"class":88},"      # 勘定科目\n",[58,1132,1133,1135,1137,1140,1142,1145,1147],{"class":60,"line":352},[58,1134,82],{"class":64},[58,1136,646],{"class":68},[58,1138,1139],{"class":68}," @e12",[58,1141,418],{"class":417},[58,1143,1144],{"class":68},"100000",[58,1146,424],{"class":417},[58,1148,1149],{"class":88},"        # 金額\n",[58,1151,1152,1154,1156,1159],{"class":60,"line":371},[58,1153,82],{"class":64},[58,1155,634],{"class":68},[58,1157,1158],{"class":68}," @e20",[58,1160,1161],{"class":88},"                # 登録ボタン\n",[58,1163,1164],{"class":60,"line":376},[58,1165,247],{"emptyLinePlaceholder":246},[58,1167,1168],{"class":60,"line":384},[58,1169,1170],{"class":88},"# 結果確認\n",[58,1172,1173,1175,1177,1179,1181,1184],{"class":60,"line":389},[58,1174,82],{"class":64},[58,1176,747],{"class":68},[58,1178,750],{"class":72},[58,1180,418],{"class":417},[58,1182,1183],{"class":68},"登録しました",[58,1185,1186],{"class":417},"\"\n",[58,1188,1189,1191,1193],{"class":60,"line":395},[58,1190,82],{"class":64},[58,1192,495],{"class":68},[58,1194,1195],{"class":68}," result.png\n",[43,1197,1198],{"id":1198},"ローカル開発サーバーのテスト",[48,1200,1202],{"className":50,"code":1201,"language":52,"meta":53,"style":53},"# ローカル開発サーバーに接続\nagent-browser open http://localhost:3000\n\n# ページの構造確認\nagent-browser snapshot -i -c\n\n# フォームのE2Eテスト\nagent-browser fill @e3 \"test@example.com\"\nagent-browser click @e5\nagent-browser wait --text \"送信完了\"\nagent-browser screenshot test-result.png\n\n# レスポンシブ確認\nagent-browser set viewport 375 812    # iPhone サイズ\nagent-browser screenshot mobile.png\nagent-browser set viewport 1280 720   # デスクトップ\nagent-browser screenshot desktop.png\n",[55,1203,1204,1209,1218,1222,1227,1238,1242,1247,1262,1271,1286,1295,1299,1304,1323,1332,1349],{"__ignoreMap":53},[58,1205,1206],{"class":60,"line":61},[58,1207,1208],{"class":88},"# ローカル開発サーバーに接続\n",[58,1210,1211,1213,1215],{"class":60,"line":79},[58,1212,82],{"class":64},[58,1214,427],{"class":68},[58,1216,1217],{"class":68}," http://localhost:3000\n",[58,1219,1220],{"class":60,"line":250},[58,1221,247],{"emptyLinePlaceholder":246},[58,1223,1224],{"class":60,"line":268},[58,1225,1226],{"class":88},"# ページの構造確認\n",[58,1228,1229,1231,1233,1235],{"class":60,"line":274},[58,1230,82],{"class":64},[58,1232,445],{"class":68},[58,1234,457],{"class":72},[58,1236,1237],{"class":72}," -c\n",[58,1239,1240],{"class":60,"line":279},[58,1241,247],{"emptyLinePlaceholder":246},[58,1243,1244],{"class":60,"line":288},[58,1245,1246],{"class":88},"# フォームのE2Eテスト\n",[58,1248,1249,1251,1253,1255,1257,1260],{"class":60,"line":293},[58,1250,82],{"class":64},[58,1252,646],{"class":68},[58,1254,687],{"class":68},[58,1256,418],{"class":417},[58,1258,1259],{"class":68},"test@example.com",[58,1261,1186],{"class":417},[58,1263,1264,1266,1268],{"class":60,"line":310},[58,1265,82],{"class":64},[58,1267,634],{"class":68},[58,1269,1270],{"class":68}," @e5\n",[58,1272,1273,1275,1277,1279,1281,1284],{"class":60,"line":326},[58,1274,82],{"class":64},[58,1276,747],{"class":68},[58,1278,750],{"class":72},[58,1280,418],{"class":417},[58,1282,1283],{"class":68},"送信完了",[58,1285,1186],{"class":417},[58,1287,1288,1290,1292],{"class":60,"line":352},[58,1289,82],{"class":64},[58,1291,495],{"class":68},[58,1293,1294],{"class":68}," test-result.png\n",[58,1296,1297],{"class":60,"line":371},[58,1298,247],{"emptyLinePlaceholder":246},[58,1300,1301],{"class":60,"line":376},[58,1302,1303],{"class":88},"# レスポンシブ確認\n",[58,1305,1306,1308,1311,1314,1317,1320],{"class":60,"line":384},[58,1307,82],{"class":64},[58,1309,1310],{"class":68}," set",[58,1312,1313],{"class":68}," viewport",[58,1315,1316],{"class":736}," 375",[58,1318,1319],{"class":736}," 812",[58,1321,1322],{"class":88},"    # iPhone サイズ\n",[58,1324,1325,1327,1329],{"class":60,"line":389},[58,1326,82],{"class":64},[58,1328,495],{"class":68},[58,1330,1331],{"class":68}," mobile.png\n",[58,1333,1334,1336,1338,1340,1343,1346],{"class":60,"line":395},[58,1335,82],{"class":64},[58,1337,1310],{"class":68},[58,1339,1313],{"class":68},[58,1341,1342],{"class":736}," 1280",[58,1344,1345],{"class":736}," 720",[58,1347,1348],{"class":88},"   # デスクトップ\n",[58,1350,1351,1353,1355],{"class":60,"line":400},[58,1352,82],{"class":64},[58,1354,495],{"class":68},[58,1356,1357],{"class":68}," desktop.png\n",[39,1359,1361],{"id":1360},"動作検証結果2026-04-06","動作検証結果（2026-04-06）",[15,1363,1364],{},"Windows 11環境で実際に動作検証を行った結果をまとめる。",[43,1366,1368],{"id":1367},"基本機能全て動作ok","基本機能（全て動作OK）",[1370,1371,1372,1388],"table",{},[1373,1374,1375],"thead",{},[1376,1377,1378,1382,1385],"tr",{},[1379,1380,1381],"th",{},"機能",[1379,1383,1384],{},"コマンド",[1379,1386,1387],{},"結果",[1389,1390,1391,1405,1418,1432,1444,1457,1470],"tbody",{},[1376,1392,1393,1397,1402],{},[1394,1395,1396],"td",{},"プロファイル一覧",[1394,1398,1399],{},[55,1400,1401],{},"agent-browser profiles",[1394,1403,1404],{},"18プロファイル検出",[1376,1406,1407,1410,1415],{},[1394,1408,1409],{},"headed起動",[1394,1411,1412],{},[55,1413,1414],{},"--profile Default --headed open \u003Curl>",[1394,1416,1417],{},"ブラウザ画面表示OK",[1376,1419,1420,1423,1429],{},[1394,1421,1422],{},"拡張読み込み",[1394,1424,1425,1428],{},[55,1426,1427],{},"--extension \u003Cpath>","（複数指定可）",[1394,1430,1431],{},"拡張が読み込まれる",[1376,1433,1434,1437,1441],{},[1394,1435,1436],{},"スナップショット",[1394,1438,1439],{},[55,1440,363],{},[1394,1442,1443],{},"インタラクティブ要素を@refで取得",[1376,1445,1446,1449,1454],{},[1394,1447,1448],{},"スクリーンショット",[1394,1450,1451],{},[55,1452,1453],{},"screenshot \u003Cfile>",[1394,1455,1456],{},"PNG保存OK",[1376,1458,1459,1462,1467],{},[1394,1460,1461],{},"JS実行",[1394,1463,1464],{},[55,1465,1466],{},"eval \u003Cscript>",[1394,1468,1469],{},"ページコンテキストで実行OK",[1376,1471,1472,1475,1480],{},[1394,1473,1474],{},"state保存",[1394,1476,1477],{},[55,1478,1479],{},"state save \u003Cfile>",[1394,1481,1482],{},"cookie + localStorage を保存",[43,1484,1485],{"id":1485},"制限事項",[1487,1488,1490],"h4",{"id":1489},"_1-セッションが毎回リセットされる","1. セッションが毎回リセットされる",[15,1492,1493,1496,1497,1500,1501,1504,1505,1508],{},[55,1494,1495],{},"--profile Default"," はChromeプロファイルのcookieを",[141,1498,1499],{},"コピー","して使う。",[55,1502,1503],{},"close --all"," で閉じると次回起動時にリセットされる。ログインが必要なSaaSサイトでは",[141,1506,1507],{},"毎回ログインが必要","になる。",[15,1510,1511,339,1514,1517],{},[55,1512,1513],{},"state save",[55,1515,1516],{},"state load"," でcookieを保存・復元できる可能性はあるが、セッショントークンには有効期限があるため永続的な解決にはならない。",[1487,1519,1521],{"id":1520},"_2-chromestoragelocal-が引き継がれない","2. chrome.storage.local が引き継がれない",[15,1523,1524,1526,1527,1534],{},[55,1525,1495],{}," でChromeプロファイルのcookieはコピーされるが、",[141,1528,1529,1530,1533],{},"拡張機能の ",[55,1531,1532],{},"chrome.storage.local"," は空","の状態で起動する。拡張機能がローカルストレージに設定データを保持している場合、初期状態に戻ってしまう。",[15,1536,1537,1538,1541],{},"対策として、拡張ディレクトリ内の ",[55,1539,1540],{},"defaults.json"," からフォールバック読み込みする仕組みを実装できるが、ログイン問題が先に立ちはだかるため効果は限定的。",[1487,1543,1545],{"id":1544},"_3-プロファイルアイコンのクリックでブラウザが消える","3. プロファイルアイコンのクリックでブラウザが消える",[15,1547,1548],{},"agent-browserが起動したChromeでプロファイルアイコンをクリックすると、プロファイル切替画面に遷移してブラウザが閉じる。プロファイルアイコンは操作しないこと。",[1487,1550,1552],{"id":1551},"_4-デーモンの再起動が必要な場合がある","4. デーモンの再起動が必要な場合がある",[15,1554,1555,1557,1558,1557,1561,1564,1565,1567],{},[55,1556,1011],{},", ",[55,1559,1560],{},"--profile",[55,1562,1563],{},"--headed"," はデーモン起動時のみ有効。既にデーモンが動いている場合は ",[55,1566,1503],{}," してから再起動する必要がある。",[43,1569,1571],{"id":1570},"chrome-devtools-mcp-との使い分け","Chrome DevTools MCP との使い分け",[1370,1573,1574,1586],{},[1373,1575,1576],{},[1376,1577,1578,1581,1583],{},[1379,1579,1580],{},"観点",[1379,1582,82],{},[1379,1584,1585],{},"Chrome DevTools MCP",[1389,1587,1588,1599,1610,1623,1634,1644,1658],{},[1376,1589,1590,1593,1596],{},[1394,1591,1592],{},"ログイン状態",[1394,1594,1595],{},"毎回リセット",[1394,1597,1598],{},"普段のChromeをそのまま利用",[1376,1600,1601,1604,1607],{},[1394,1602,1603],{},"拡張ストレージ",[1394,1605,1606],{},"空で起動（フォールバック必要）",[1394,1608,1609],{},"そのまま利用可能",[1376,1611,1612,1615,1620],{},[1394,1613,1614],{},"拡張機能の読み込み",[1394,1616,1617,1619],{},[55,1618,1011],{}," で明示指定",[1394,1621,1622],{},"普段のChromeの拡張がそのまま",[1376,1624,1625,1628,1631],{},[1394,1626,1627],{},"自動操作",[1394,1629,1630],{},"@ref でクリック・入力等が可能",[1394,1632,1633],{},"evaluate_script + DOM操作",[1376,1635,1636,1638,1641],{},[1394,1637,1436],{},[1394,1639,1640],{},"アクセシビリティツリーで要素一覧",[1394,1642,1643],{},"take_snapshot で同等",[1376,1645,1646,1649,1655],{},[1394,1647,1648],{},"並行セッション",[1394,1650,1651,1654],{},[55,1652,1653],{},"--session"," で複数ブラウザ",[1394,1656,1657],{},"単一Chrome接続",[1376,1659,1660,1663,1666],{},[1394,1661,1662],{},"CI/自動テスト",[1394,1664,1665],{},"headlessで適合",[1394,1667,1668],{},"headed前提",[43,1670,1671],{"id":1671},"結論",[19,1673,1674,1680,1686],{},[22,1675,1676,1679],{},[141,1677,1678],{},"ログイン必須のSaaS操作",": Chrome DevTools MCP が適切（ログイン・拡張ストレージがそのまま使える）",[22,1681,1682,1685],{},[141,1683,1684],{},"agent-browser の適用場面",": 未ログインサイトの自動操作、E2Eテスト、スクレイピング、CI環境",[22,1687,1688],{},"ログイン必須サイトをagent-browserで操作したい場合は、ログイン自動化 + storage フォールバックの組み合わせが必要",[39,1690,1692],{"id":1691},"windows-環境での注意事項","Windows 環境での注意事項",[19,1694,1695,1705,1710,1723],{},[22,1696,1697,1700,1701,1704],{},[55,1698,1699],{},"pnpm add -g"," でインストールした場合、",[55,1702,1703],{},"pnpm bin -g"," の出力パスにPATHが通っているか確認",[22,1706,1707,1709],{},[55,1708,100],{}," がダウンロードする Chrome for Testing は既存の Chrome とは別管理（プロファイルやデータは共有しない）",[22,1711,1712,1713,1715,1716,1719,1720,1722],{},"Git Bash から実行する場合、パスの ",[55,1714,1018],{}," が ",[55,1717,1718],{},"/"," に変換されることがある。",[55,1721,1011],{}," のパスはダブルクォートで囲むこと",[22,1724,1725],{},"Chrome DevTools MCP（ポート9222/9223）と agent-browser は同時に使えない場合がある。ポート競合に注意",[39,1727,1728],{"id":1728},"トラブルシューティング",[1370,1730,1731,1741],{},[1373,1732,1733],{},[1376,1734,1735,1738],{},[1379,1736,1737],{},"問題",[1379,1739,1740],{},"対処",[1389,1742,1743,1753,1762,1772,1786,1797,1808,1819,1827],{},[1376,1744,1745,1748],{},[1394,1746,1747],{},"Chrome が見つからない",[1394,1749,1750,1752],{},[55,1751,100],{}," を再実行",[1376,1754,1755,1758],{},[1394,1756,1757],{},"タイムアウトエラー",[1394,1759,1760,1005],{},[55,1761,1004],{},[1376,1763,1764,1767],{},[1394,1765,1766],{},"拡張が読み込まれない",[1394,1768,1769,1771],{},[55,1770,1011],{}," のパスが unpacked ディレクトリを指しているか確認",[1376,1773,1774,1777],{},[1394,1775,1776],{},"headed で画面が出ない",[1394,1778,1779,1781,1782,1785],{},[55,1780,1563],{}," フラグが ",[55,1783,1784],{},"open"," の前にあるか確認",[1376,1787,1788,1791],{},[1394,1789,1790],{},"セッションが残る",[1394,1792,1793,1796],{},[55,1794,1795],{},"agent-browser close"," で明示的に閉じる",[1376,1798,1799,1802],{},[1394,1800,1801],{},"ref が古い",[1394,1803,1804,1805,1807],{},"ページ変更後に ",[55,1806,363],{}," を再取得",[1376,1809,1810,1813],{},[1394,1811,1812],{},"pnpmグローバルパスが通らない",[1394,1814,1815,1818],{},[55,1816,1817],{},"pnpm setup"," を実行し、シェルを再起動",[1376,1820,1821,1824],{},[1394,1822,1823],{},"chrome.storage.local が空",[1394,1825,1826],{},"拡張にdefaults.jsonフォールバックを実装するか、Chrome DevTools MCPを使用",[1376,1828,1829,1832],{},[1394,1830,1831],{},"デーモンが古い設定で動いている",[1394,1833,1834,1837],{},[55,1835,1836],{},"agent-browser close --all"," で一度全て閉じてから再起動",[1839,1840,1841],"style",{},"html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}html pre.shiki code .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sFA8A, html code.shiki .sFA8A{--shiki-default:#999999;--shiki-default-font-weight:bold;--shiki-dark:#999999;--shiki-dark-font-weight:bold}html pre.shiki code .syTZV, html code.shiki .syTZV{--shiki-default:#1C6B48;--shiki-default-font-weight:bold;--shiki-dark:#1C6B48;--shiki-dark-font-weight:bold}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}",{"title":53,"searchDepth":79,"depth":79,"links":1843},[1844,1849,1859,1865,1866],{"id":41,"depth":79,"text":41,"children":1845},[1846,1847,1848],{"id":45,"depth":250,"text":46},{"id":112,"depth":250,"text":113},{"id":209,"depth":250,"text":210},{"id":223,"depth":79,"text":224,"children":1850},[1851,1852,1853,1854,1855,1856,1857,1858],{"id":433,"depth":250,"text":433},{"id":622,"depth":250,"text":622},{"id":778,"depth":250,"text":778},{"id":890,"depth":250,"text":891},{"id":914,"depth":250,"text":914},{"id":978,"depth":250,"text":978},{"id":1028,"depth":250,"text":1029},{"id":1198,"depth":250,"text":1198},{"id":1360,"depth":79,"text":1361,"children":1860},[1861,1862,1863,1864],{"id":1367,"depth":250,"text":1368},{"id":1485,"depth":250,"text":1485},{"id":1570,"depth":250,"text":1571},{"id":1671,"depth":250,"text":1671},{"id":1691,"depth":79,"text":1692},{"id":1728,"depth":79,"text":1728},"dev","Vercel製のagent-browserをWindows環境にインストールし、Claude Codeからブラウザ操作・テスト・デバッグを行うまでの手順。スナップショットベースの操作フロー、セッション管理、Chrome拡張機能のデバッグ方法を整理。","md",{},"/agent-browser-setup","claude-code-tools",false,"2026-04-05T00:00:00.000Z",{"title":5,"description":1868},"2026-04/2026-04-05/agent-browser-setup",[82,1878,1879,1880,1881,1882],"ブラウザ自動化","Claude Code","Chrome","CLI","Windows",null,"Xm4hhB_oUUBaxU5zQvAo1Acmox4N_mVxxOoXJ51vnnI",[],"https://log.eurekapu.com/favicon.svg",1775511574533]