07/05 ChromeのMCPサーバーが出たので触ってみる
はじめに
Zenn初投稿なのでお手柔らかにお願いします。
最近なにかとザワザワのAI界隈ですが、このような新しいツール紹介系の記事ってこぞってAI生成の記事ですよね。内容が薄いわりにSEOで上に来てしまうものですから、厄介ですね。
なので、反面教師もこめて、この記事は真心こめて書いてきます。
ChromeのMCPが出た
Open-source Chrome MCP Server to let AI control, analyze, and search your browser.
githubはこちら：https://github.com/hangwin/mcp-chrome
なにがすごい？
このツールが今まで違うのは、「自分のブラウザ環境をそのまま使える」という部分かと思います。
既存のツールとの比較で Playwrightが引き合いに出され、ボロクソいわれてるのが面白いですね。
そのほかにもおもしろそうな機能がたくさんあったので、気になる人はREADMEを読んでみてください。
導入
前提
- VScode導入済み
- Nodejs, npm使用可能
- Chromeインストール済み＆普段使い（？）
先述のように、普段使いのChromeに直接アクセスできるのがこのMCPのいいところです。
BraveやOperaとかのchromiumベースのブラウザでも動く可能性はあると思いますが、試してないので分かりません。
では、公式の指南通りに進めていきます。
1. 専用のChrome拡張機能をダウンロード
ここから最新のリリースをダウンロードしてください。
2. ダウンロードした.zipを適当な場所に解凍
どこでもいいです
3. Chromeの拡張機能の管理ページに行く
まずここにアクセス
chrome://extensions/
右上のデベロッパーモードをオンにする
左上の「パッケージ化されてない～」より、解凍先のフォルダーを指定
完了。
4. MCPインストール
グローバル環境にMCPインストール
npm install -g mcp-chrome-bridge
5. VScodeの設定
ctrl + ,で設定を開き、そのノリでsettings.jsonを開いてください。
MCPサーバーを追加します。cursorだとちょっと違うかも。
"mcp": {
"servers": {
"chrome-mcp-server": {
"type": "streamableHttp",
"url": "http://127.0.0.1:12306/mcp"
}
}
},
自分はこれでうまく動かなかったです。ですので解決法を記しておきます。
npm list -g mcp-chrome-bridge
で出てきたパスを開き、そのフォルダーの中にある
mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js
というファイルを探しましょう。
自分の場合
C:/Users/俺のなまえ/AppData/Roaming/npm/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js
ここにありました。
そしたら、そのパスをコピーして最終的に
"mcp": {
"servers": {
"chrome-mcp-stdio": {
"command": "npx",
"args": [
"node",
"C:/Users/俺の名前/AppData/Roaming/npm/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
]
}
}
},
としてOKです。
最後に、MCPを起動してください。（"chrome-mcp-stdio": {の上らへんに「起動」ってあるはず）
試す
Github Copilot Agent Modeでためす
ctrl + shift + iでAgent MOdeを開きましょう。
念のためChromeを再起動するといいかもです。さっき入れた拡張機能もエラーはいてないか確認してください。
#chrome-mcp-stdio
動作確認をお願いします
うまく行けば、自分が見てるタブとかを教えてくれます。
＊不具合でVScodeでスクショ取れなかったので勘弁してください。
メモ
- claudeのモデルだととても相性がいい（？）
→感覚なので参考程度に - 自動操作時はタブが強制的にフォーカスされてしまう
追記
オセロを解かせてみた
Discussion