[{"data":1,"prerenderedAt":587},["ShallowReactive",2],{"content-/chrome-devtools-mcp-auto-connect":3,"all-pages-for-dir":585,"og-image-/chrome-devtools-mcp-auto-connect":586},{"id":4,"title":5,"body":6,"category":566,"description":567,"extension":568,"meta":569,"navigation":570,"ogImage":571,"path":572,"project_name":573,"published":574,"publishedAt":575,"seo":576,"stem":577,"tags":578,"todo":583,"unpublished":574,"updatedAt":571,"__hash__":584},"pages/2026-03/2026-03-31/chrome-devtools-mcp-auto-connect.md","Chrome DevTools MCP の autoConnect で、自分のブラウザセッションをそのままAIに渡せるようになった",{"type":7,"value":8,"toc":552},"minimark",[9,13,21,24,28,31,38,42,47,50,66,69,74,79,83,90,231,238,242,249,252,325,328,331,440,444,447,459,462,470,473,484,487,491,500,521,527,530,548],[10,11,12],"p",{},"自作のChrome拡張機能を、Claude Codeに操作させられる。これが一番の衝撃だった。",[10,14,15,16,20],{},"Chrome DevTools MCPの ",[17,18,19],"code",{},"--autoConnect"," モードを使えば、普段使っているブラウザにそのまま接続できる。ログイン状態もCookieも拡張機能も、全部そのまま。つまり、自分が作ったChrome拡張機能がページに注入するDOM要素を、Claude Codeがクリックしたりテキストを入力したりできる。",[10,22,23],{},"実際に試してみた。マネーフォワードのホーム画面で、自作のスプレッドシート連携拡張（SSボタン）をClaude Codeにクリックさせたところ、サイドパネルが展開され、エクスポート・インポートのUIが全て操作可能な状態になった。",[25,26,27],"h2",{"id":27},"いつから使えるのか",[10,29,30],{},"2025年12月11日にChrome公式ブログで発表された。Chrome M144（当時Beta）で追加された機能で、現在はStableチャネルで利用可能。",[10,32,33,34,37],{},"従来のChrome DevTools MCPは、専用プロファイルでChromeを起動するか、",[17,35,36],{},"--remote-debugging-port"," を指定して起動する必要があった。どちらも普段使いのブラウザとは別のセッションになるため、ログインし直したり、拡張機能が入っていなかったりと、実用上の制約が大きかった。",[25,39,41],{"id":40},"autoconnect-の仕組み","autoConnect の仕組み",[10,43,44,46],{},[17,45,19],{}," を指定すると、MCP サーバーが実行中のChromeインスタンスに接続し、リモートデバッグセッションを要求する。",[10,48,49],{},"セキュリティ対策として:",[51,52,53,57,60],"ul",{},[54,55,56],"li",{},"接続時にChrome側で許可ダイアログが表示される（ユーザーが明示的に許可する必要がある）",[54,58,59],{},"デバッグセッション中は「Chrome は自動テストソフトウェアによって制御されています」というバナーが表示される",[54,61,62,65],{},[17,63,64],{},"chrome://inspect/#remote-debugging"," で事前にリモートデバッグを有効化しておく必要がある",[25,67,68],{"id":68},"セットアップ",[70,71,73],"h3",{"id":72},"_1-chromeでリモートデバッグを有効化","1. Chromeでリモートデバッグを有効化",[10,75,76,78],{},[17,77,64],{}," にアクセスし、リモートデバッグを有効にする。",[70,80,82],{"id":81},"_2-mcp設定","2. MCP設定",[10,84,85,86,89],{},"Claude Codeの場合、",[17,87,88],{},".mcp.json"," に以下を追加:",[91,92,97],"pre",{"className":93,"code":94,"language":95,"meta":96,"style":96},"language-json shiki shiki-themes vitesse-light vitesse-light","{\n  \"mcpServers\": {\n    \"chrome-devtools\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"chrome-devtools-mcp@latest\",\n        \"--autoConnect\"\n      ]\n    }\n  }\n}\n","json","",[17,98,99,108,128,143,169,184,197,207,213,219,225],{"__ignoreMap":96},[100,101,104],"span",{"class":102,"line":103},"line",1,[100,105,107],{"class":106},"shFtX","{\n",[100,109,111,115,119,122,125],{"class":102,"line":110},2,[100,112,114],{"class":113},"sqvqQ","  \"",[100,116,118],{"class":117},"sz8Xr","mcpServers",[100,120,121],{"class":113},"\"",[100,123,124],{"class":106},":",[100,126,127],{"class":106}," {\n",[100,129,131,134,137,139,141],{"class":102,"line":130},3,[100,132,133],{"class":113},"    \"",[100,135,136],{"class":117},"chrome-devtools",[100,138,121],{"class":113},[100,140,124],{"class":106},[100,142,127],{"class":106},[100,144,146,149,152,154,156,160,164,166],{"class":102,"line":145},4,[100,147,148],{"class":113},"      \"",[100,150,151],{"class":117},"command",[100,153,121],{"class":113},[100,155,124],{"class":106},[100,157,159],{"class":158},"sMJiu"," \"",[100,161,163],{"class":162},"sdGka","npx",[100,165,121],{"class":158},[100,167,168],{"class":106},",\n",[100,170,172,174,177,179,181],{"class":102,"line":171},5,[100,173,148],{"class":113},[100,175,176],{"class":117},"args",[100,178,121],{"class":113},[100,180,124],{"class":106},[100,182,183],{"class":106}," [\n",[100,185,187,190,193,195],{"class":102,"line":186},6,[100,188,189],{"class":158},"        \"",[100,191,192],{"class":162},"chrome-devtools-mcp@latest",[100,194,121],{"class":158},[100,196,168],{"class":106},[100,198,200,202,204],{"class":102,"line":199},7,[100,201,189],{"class":158},[100,203,19],{"class":162},[100,205,206],{"class":158},"\"\n",[100,208,210],{"class":102,"line":209},8,[100,211,212],{"class":106},"      ]\n",[100,214,216],{"class":102,"line":215},9,[100,217,218],{"class":106},"    }\n",[100,220,222],{"class":102,"line":221},10,[100,223,224],{"class":106},"  }\n",[100,226,228],{"class":102,"line":227},11,[100,229,230],{"class":106},"}\n",[10,232,233,234,237],{},"Chrome M144がStableに到達済みなので、",[17,235,236],{},"--channel=beta"," の指定は不要。",[70,239,241],{"id":240},"_3-接続テスト","3. 接続テスト",[10,243,244,245,248],{},"Claude Codeで ",[17,246,247],{},"list_pages"," ツールを呼ぶと、開いているタブの一覧が返ってくる。初回接続時はChrome側で許可ダイアログが出るので承認する。",[25,250,251],{"id":251},"従来方式との比較",[253,254,255,275],"table",{},[256,257,258],"thead",{},[259,260,261,265,269,272],"tr",{},[262,263,264],"th",{},"方式",[262,266,268],{"align":267},"center","ログイン状態",[262,270,271],{"align":267},"拡張機能",[262,273,274],{},"設定の手間",[276,277,278,292,307],"tbody",{},[259,279,280,284,287,289],{},[281,282,283],"td",{},"専用プロファイル（デフォルト）",[281,285,286],{"align":267},"なし",[281,288,286],{"align":267},[281,290,291],{},"低い",[259,293,294,298,301,304],{},[281,295,296],{},[17,297,36],{},[281,299,300],{"align":267},"あり（同プロファイルなら）",[281,302,303],{"align":267},"あり",[281,305,306],{},"中（起動オプション指定が必要）",[259,308,309,314,316,318],{},[281,310,311,313],{},[17,312,19],{},"（M144以降）",[281,315,303],{"align":267},[281,317,303],{"align":267},[281,319,320,321,324],{},"低い（初回のみ ",[17,322,323],{},"chrome://inspect"," で有効化）",[25,326,327],{"id":327},"何ができるか",[10,329,330],{},"Chrome DevTools MCPが提供するツール:",[51,332,333,355,364,387,395,406,417,431],{},[54,334,335,339,340,342,343,342,346,342,349,342,352],{},[336,337,338],"strong",{},"ページ操作",": ",[17,341,247],{},", ",[17,344,345],{},"new_page",[17,347,348],{},"navigate_page",[17,350,351],{},"select_page",[17,353,354],{},"close_page",[54,356,357,339,360,363],{},[336,358,359],{},"スクリーンショット",[17,361,362],{},"take_screenshot","（ページ全体・要素単位）",[54,365,366,339,369,342,372,342,375,342,378,342,381,342,384],{},[336,367,368],{},"DOM操作",[17,370,371],{},"take_snapshot",[17,373,374],{},"click",[17,376,377],{},"fill",[17,379,380],{},"type_text",[17,382,383],{},"hover",[17,385,386],{},"drag",[54,388,389,339,392],{},[336,390,391],{},"JavaScript実行",[17,393,394],{},"evaluate_script",[54,396,397,339,400,342,403],{},[336,398,399],{},"ネットワーク",[17,401,402],{},"list_network_requests",[17,404,405],{},"get_network_request",[54,407,408,339,411,342,414],{},[336,409,410],{},"コンソール",[17,412,413],{},"list_console_messages",[17,415,416],{},"get_console_message",[54,418,419,339,422,342,425,342,428],{},[336,420,421],{},"パフォーマンス",[17,423,424],{},"performance_start_trace",[17,426,427],{},"performance_stop_trace",[17,429,430],{},"lighthouse_audit",[54,432,433,339,436,439],{},[336,434,435],{},"エミュレーション",[17,437,438],{},"emulate","（ビューポート、ダークモード、ネットワーク速度など）",[25,441,443],{"id":442},"chrome拡張機能の操作で広がる可能性","Chrome拡張機能の操作で広がる可能性",[10,445,446],{},"autoConnectの真価は、拡張機能との連携にある。",[10,448,449,450,452,453,455,456,458],{},"拡張機能がページに注入するDOM要素（ボタン、パネル、フォームなど）は、通常のページ要素と同じように ",[17,451,371],{}," でuid を取得し、",[17,454,374],{}," や ",[17,457,377],{}," で操作できる。",[10,460,461],{},"操作できるもの:",[51,463,464,467],{},[54,465,466],{},"拡張機能がページに注入するUI要素（content script由来）",[54,468,469],{},"ページ上のオーバーレイ、サイドパネル、フローティングボタン",[10,471,472],{},"操作できないもの:",[51,474,475,478],{},[54,476,477],{},"ツールバーアイコンクリックで開くポップアップウィンドウ",[54,479,480,483],{},[17,481,482],{},"chrome-extension://"," で始まる拡張の設定ページ",[10,485,486],{},"つまり、業務で使っている拡張機能の操作を自動化したり、自作の拡張機能をClaude Codeに操作させてテストしたりできる。",[25,488,490],{"id":489},"スクリーンショットとdomスナップショットの違い","スクリーンショットとDOMスナップショットの違い",[10,492,493,494,496,497,499],{},"Chrome DevTools MCPには ",[17,495,362],{}," と ",[17,498,371],{}," の2つがある。",[51,501,502,509],{},[54,503,504,508],{},[336,505,506],{},[17,507,362],{},": ビジュアルな画像を返す。レイアウトの確認、ユーザーへの報告に使う",[54,510,511,515,516,455,518,520],{},[336,512,513],{},[17,514,371],{},": DOMのアクセシビリティツリーをテキストで返す。各要素にuidが振られ、",[17,517,374],{},[17,519,377],{}," の対象を特定するのに使う",[10,522,523,524,526],{},"自動操作が目的なら ",[17,525,371],{}," だけで十分なケースが多い。スクリーンショットは「人間が見て確認する」ための機能。",[25,528,529],{"id":529},"参考",[51,531,532,541],{},[54,533,534],{},[535,536,540],"a",{"href":537,"rel":538},"https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session?hl=ja",[539],"nofollow","Chrome DevTools MCP でブラウザセッションをデバッグ（Chrome公式ブログ）",[54,542,543],{},[535,544,547],{"href":545,"rel":546},"https://github.com/anthropics/chrome-devtools-mcp",[539],"chrome-devtools-mcp（GitHub）",[549,550,551],"style",{},"html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .sqvqQ, html code.shiki .sqvqQ{--shiki-default:#99841877;--shiki-dark:#99841877}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}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);}",{"title":96,"searchDepth":110,"depth":110,"links":553},[554,555,556,561,562,563,564,565],{"id":27,"depth":110,"text":27},{"id":40,"depth":110,"text":41},{"id":68,"depth":110,"text":68,"children":557},[558,559,560],{"id":72,"depth":130,"text":73},{"id":81,"depth":130,"text":82},{"id":240,"depth":130,"text":241},{"id":251,"depth":110,"text":251},{"id":327,"depth":110,"text":327},{"id":442,"depth":110,"text":443},{"id":489,"depth":110,"text":490},{"id":529,"depth":110,"text":529},"dev","Chrome 144から追加されたautoConnectモードにより、ログイン済みのブラウザセッションにClaude CodeなどのコーディングエージェントがMCP経由で直接接続できるようになった。Chrome拡張機能のUI操作まで可能になる点が大きい。","md",{},true,null,"/chrome-devtools-mcp-auto-connect","claude-code-tools",false,"2026-03-31T00:00:00.000Z",{"title":5,"description":567},"2026-03/2026-03-31/chrome-devtools-mcp-auto-connect",[136,579,580,581,582],"mcp","claude-code","chrome-extension","automation","memo","x3V6Gt24MmX1G-XixIYuzNgTY0Uvh7OZTFYmLkOkDUo",[],"https://log.eurekapu.com/og/blog/chrome-devtools-mcp-auto-connect.png?v=2026-03-31T00%3A00%3A00.000Z&title=Chrome%20DevTools%20MCP%20%E3%81%AE%20autoConnect%20%E3%81%A7%E3%80%81%E8%87%AA%E5%88%86%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%BB%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%9D%E3%81%AE%E3%81%BE%E3%81%BEAI%E3%81%AB%E6%B8%A1%E3%81%9B%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%9F&author=Kei%20Komatsu&sig=7c88a9933bda6df9",1782528822512]