ChromeのMCP拡張をいれてCursorのAgentにChromeのコンソールログやネットワークログを確認して回してもらう

![Screen Recording 2025-04-08 at 9.56.32_720.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/6718906f-da84-4a42-bb6d-203ef10e8b8d.gif)


# はじめに
CusorのAgent便利ですね！すごく活躍してくれています。

主にウェブ系の開発に使っていますが
1. 自分「〇〇してください」　Agent「できました」
1. 自分「動きません。エラーはこれです」　Agent「コードを修正しました。」
1. 自分「動きません。エラーはこれです」　Agent「コードを修正しました。」
1. 自分「動きません。エラーはこれです」　Agent「コードを修正しました。」
.....
1. できました！

みたいな流れがあって、このブラウザのエラーを拾ってAgentに投げる、というのが大変面倒でした。このあたりも自立的に行ってもらえないかということでブラウザ拡張のMCPを導入しました。（ アンディくんに教えてもらいました、ありがとう！）

## MCP
すでに説明が不要かと思いますが、ざっくりいうとAIエージェントが外部のリソースに参照するための取り決めです。
すでにいろんなサービスなどでMCPが提供されています。多くのMCPは「MCPサーバ」というものを立ててエージェントからのリクエストを待ちます。MCPのリクエストを受け入れてやり取りをすることでAIエージェントが外部のリソースの情報を取得したり、命令したりすることができます。


## AgentDeskAI
今回は下記の「AgentDeskAI」を利用しました。Chrome拡張の形でChromeを監視させることができます。

https://github.com/AgentDeskAI/browser-tools-mcp

Quickstartに沿って進めていけば動くのですが、いくつかつまづいてしまうポイントがあったのでまとめてみます。

まず全体の構成として、公式ドキュメントにあるように下記のような構成となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/10ef35f2-e398-491d-80b1-248943603dd8.png)

向きが逆ですが、今回のCursorで使う場合にはこんな感じの構成になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/b0212c66-53c5-410b-911c-4d31cec3505c.png)


それで行うことは下記の通りです。

1. Chrome拡張をインストールする
1. macOS上でミドルウェアを起動する
1. CursorにMCPの設定をする
1. 動作確認


### 1. Chrome拡張のインストール

まずはChromeに拡張をインストールします。

Chromeの公式ストアには登録されていないのでZipなどで直接インストールします。

自分の場合にはリポジトリをクローンしてChromeの設定画面から `Extentions` を開き、 `Load unpacked` から追加しました。


![Screenshot 2025-04-07 at 21.17.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/a389a553-836a-46da-975b-74271309dd24.png)

追加はクローンしたリポジトリの `browser-tools-mcp` を選択すればよいです。

![Screenshot 2025-04-07 at 21.17.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/d645dfb8-a440-490a-8fa3-81de08a868a1.png)

完了すると下記のように `BrowserTools MCP` というエクステンションが追加されます。

![Screenshot 2025-04-07 at 21.18.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/3918a224-82ff-42f9-add5-f2433900adb2.png)


公式サイトのREADMEなどにもある通りZipでも配布されています。

[v1.2.0 BrowserToolsMCP Chrome Extension](https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip)

この場合には恐らく `Load packed` を選べばインストールできると思います。

## macOS上でミドルウェアを起動する

続いてmacOS上（ホスト上）でミドルウェアを起動します。
推測を含んでいますが、Chrome拡張を使ってChromeの情報を取得するHTTPサーバです。

起動方法は色々ありますが、今回は `npm` でグローバルインストールしてターミナルのコマンドで起動する、という方法を取りました。

```bash
npm install -g @agentdeskai/browser-tools-mcp
```

上記でインストールが完了してパスが通っていればすぐに起動できる（ `browser-tools-server start` ができる）のですが、自分の環境ではNodeのバージョン管理システム、 `nodenv` を入れていたため、 nodenv 用に rehash （Node.jsのバージョンに合わせた実行ファイルの場所の更新）が必要でした。

```bash
nodenv rehash
```

これで「ミドルウェア」と呼んでいるChromeエクステンションを監視して情報提供するサーバが起動します。

```bash
browser-tools-server start
```

下記は起動ログです。

```
browser-tools-server start
Starting Browser Tools Server...
Requested port: 3025
Found available port: 3025

=== Browser Tools Server Started ===
Aggregator listening on http://0.0.0.0:3025

Available on the following network addresses:
  - http://100.112.184.23:3025
  - http://192.168.64.1:3025

For local access use: http://localhost:3025
^C
Received SIGINT signal. Starting graceful shutdown...
Shutting down WebSocket server...
WebSocket server closed gracefully
HTTP server closed successfully
Wiping all logs...
All logs have been wiped
```

止めるときは `Ctrl-C` で止めました。

この状態でChromeを操作するとログが流れてきます。

![Screen Recording 2025-04-08 at 9.38.39.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/87fff4be-276b-407c-891b-c58372f45393.gif)


ここまでできれば動作OKです。

ちなみにExtentionの方で何を監視するかを指定することが出来ます。

![Screenshot 2025-04-08 at 9.41.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/dabf3c36-a454-41c1-9fef-cc5b593473bf.png)

## 3. CursorにMCPの設定をする

まず先立ってMCPをインストールしておきます。

```bash
npx @agentdeskai/browser-tools-mcp
```

続いてCursorにMCPを設定していきます。
Cursor右上の歯車マークから MCP を選び、 「Add new global MCP server」を選択します。

![Screenshot 2025-04-08 at 9.42.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/1b6b48ca-c865-4340-ad81-52e9c0ee676a.png)

エディタが開くので、下記のように `chrome` （Cursorで呼び分けるMCPサーバの名前で、好きなもので良いです） を作成し、 `command` に `npx @agentdeskai/browser-tools-mcp@latest` を指定します。

```json
{
  "mcpServers": {
    "chrome": {
      "command": "npx @agentdeskai/browser-tools-mcp@latest"
    }
  }
}
```

場合によってはバージョン番号を指定したほうが良いかもしれませんが、今は `latest` にしています。


インストールが完了するとこんな画面になります。

![Screenshot 2025-04-08 at 9.51.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/5dbd08e9-3868-4671-83e4-7ab739686564.png)


## 4. 動作確認

実際にAgentでChromeのログを取らせてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/910445e9-a1b5-49ee-86d6-334919c9d1b7.png)

としてうまく確認できているようでした。


## 使ってみて
実は…、残念ながら思ったより確認してくれませんでした。
主にConsoleログやNetworkのログを見て動作に問題がないかを確認してもらうものですが、人の目でログが出ていることをみて指示を出してもAgentはログが見当たらないからと別の箇所を修正しようとすることが多々ありました。

これはもしかするとMCPの履歴などの長さに制限があり、取得しきれないのかもしれません。
そのためリロード事にNetworkの履歴をクリアするなどしたほうが良いなど、使い方を改善すれば良くなるかもしれません。

## デバッグ
設定がうまくいっていないとMCPサーバ（MCP tool）から空の配列が帰ってきているようにみえるようです。

![Screenshot 2025-04-08 at 9.48.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/a1fe5617-2c56-4aad-bc5c-54328d38a60e.png)

コマンドに失敗していても空配列だったりして、あれ、起動はしてるのかなとか思ったのですが単にエラーでも空配列のようです。