要約
本記事ではChromeDevToolsMCPでChrome拡張機能を操作するための手順を紹介します。
- ChromeDevToolsMCP が「自前で起動するブラウザ」では拡張機能は使えない
https://github.com/ChromeDevTools/chrome-devtools-mcp/issues/96 - 代わりに、自分で
--remote-debugging-portを付けて起動した Chrome に
ChromeDevToolsMCP を--browserUrl=http://127.0.0.1:9222で接続すると、そのブラウザ上の拡張機能を AI エージェント経由で操作できる
一人アドベントカレンダー2日目です（夜中滑り込み🌝）
背景 🏃
業務でChrome拡張機能のプロダクトを開発しています。
ClaudeCodeでChromeDevToolsMCPに接続し、開発しているChrome拡張機能を操作する必要がありました。
ChromeDevToolsMCP経由でブラウザを開き拡張機能を読み込ませますが、拡張機能が表示されません（拡張機能を読み込ませるところまではうまくいきますがなぜか表示されないです）。
なぜだろうと思い調査しました。
ChromeDevtoolsMCPで直接制御するブラウザではChrome拡張機能は使えない
以下のissueが起票されていました。
このissueでも議論されているとおり、
- ChromeDevToolsMCP が 自分で起動するブラウザ では、拡張機能は利用できない
（拡張機能が有効化されない制約がある）
という前提があるようです。
ただし同じissue内で、リモートデバッグによりChromeDevtoolsMCPがChrome拡張機能を操作できることが分かりました。
using "chrome --remote-debugging-port=9222" with "--browser-url=http://127.0.0.1:9222" mcp server argument did the trick for me - I can use extensions now
https://github.com/ChromeDevTools/chrome-devtools-mcp/issues/96#issuecomment-3566339575
つまり、
- MCP にブラウザを起動させるのではなく、
- 自分で
--remote-debugging-port付きのChromeを立ち上げ、 - MCPからそのChromeに接続する
という構成にすればChrome拡張機能を利用できるということです。
リモートデバッグの設定 ⚙️
以下の構成で動作確認しました。
- Mac / Chrome
- ChromeDevToolsMCPをClaudeCodeから利用
以下を参考にしました。
ChromeDevToolsMCPの設定
以下のargsに"--browserUrl","http://127.0.0.1:9222"を追加します。
これにより、ChromeDevToolsMCPは「自前でブラウザを起動する」のではなく、
http://127.0.0.1:9222で待ち受けている既存のChromeに接続します。
"chrome-devtools": {
"type": "stdio",
"command": "npx",
"args": [
"chrome-devtools-mcp@latest",
"--browserUrl",
"http://127.0.0.1:9222"
],
Chromeをリモートデバッグモードで起動
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
--remote-debugging-port=9222 \
--user-data-dir=~/chrome-debug-profile
※--user-data-dir を分けているのは、普段使いのプロファイルを汚さないためです。
※ 9222 ポートを別のプロセスが使っている場合は、ポート番号を変更してください。
その後Chromeで拡張機能を読み込むことができます。
読みこんだChrome拡張機能をClaudeCode経由で指示を出すとChrome拡張機能を操作してくれます✨
参考 📚