Chrome MCP Server

Chrome MCP Server

Chrome DevTools 拡張機能と連携して、Cursor AI にデバッグとモニタリング機能を提供する Node.js サーバーです。

機能

このサーバーは Chrome DevTools 拡張機能と Cursor AI の間のブリッジとして機能し、次のことができます。

• コンソールログの取得
• コンソールエラーの取得
• ネットワークリクエストのモニタリング（成功とエラー）
• スクリーンショットの取得
• 選択した要素の検査
• ログの消去

インストールと使用方法

サーバーを実行する方法はいくつかあります。

オプション 1：GitHub から直接実行

# Windows
cmd /c npx github:adejaimejr/chrome-mcp-server

# Linux/Mac
npx github:adejaimejr/chrome-mcp-server

オプション 2：グローバルにインストール

# Instalar globalmente
npm install -g github:adejaimejr/chrome-mcp-server

# Executar
chrome-mcp-server

オプション 3：npm に公開

npx @scope/package 形式のコマンドを使用する場合は、このパッケージを npm に公開できます。

スコープなしで公開する場合：

npm login
npm publish

その後、次のように使用できます：npx chrome-mcp-server

スコープありで公開する場合：

# Modifique o nome no package.json para "@adejaimejr/chrome-mcp-server"
npm publish --access public

その後、次のように使用できます：npx @adejaimejr/chrome-mcp-server

Cursor での設定

Cursor で MCP サーバーを設定するには、次の手順に従います。

1. Cursor を開きます
2. 設定（歯車アイコン）に移動します
3. 「拡張機能」>「MCP」に進みます
4. 次のコマンドを使用して、新しい MCP サーバーを追加します。

# Windows
cmd /c npx github:adejaimejr/chrome-mcp-server

# Linux/Mac
npx github:adejaimejr/chrome-mcp-server

注：最新バージョンでは、サーバーが Cursor によって実行されていることを自動的に検出するため、--mcp パラメーターは不要になりました。

ローカルインストール専用の解決方法

コードがすでにコンピューター上にある場合（C:\Users\Adejaime\Desktop\2025-dev\chrome-mcp-server など）は、実行可能ファイルへの直接パスを使用します。

node C:\Users\Adejaime\Desktop\2025-dev\chrome-mcp-server\dist\mcp-server.js

重要：Windows では、パスにバックスラッシュ（\）とスラッシュ（/）のどちらも使用できます。

ローカルインストールの手順

リポジトリをクローンしてローカルで使用する場合は、次の手順に従います。

# 1. Clone o repositório
git clone https://github.com/adejaimejr/chrome-mcp-server.git

# 2. Entre no diretório
cd chrome-mcp-server

# 3. Instale as dependências
npm install

# 4. Construa o executável
npm run build

# 5. Configure o Cursor com o caminho absoluto para o arquivo mcp-server.js
# Exemplo no Windows:
# node C:\caminho\completo\para\chrome-mcp-server\dist\mcp-server.js

# Exemplo no Linux/Mac:
# node /caminho/completo/para/chrome-mcp-server/dist/mcp-server.js

最新バージョンの新機能（v1.2.0）

1. JSON 形式の出力を徹底的に解決

バージョン 1.2.0 では、サーバーからのあらゆる出力が有効な JSON 形式になることを徹底的に保証する解決策を実装し、Unexpected token 'A', "Aguardando"... is not valid JSON エラーを完全に解消しました。

この解決策では、次のことを行います。

• 出力ストリーム stdout と stderr を可能な限り低いレベルでインターセプトします
• アプリケーションの初期化前に生成されたログも含め、すべての出力が JSON 形式になることを保証します
• JSON 形式ではない出力を、有効な JSON 形式に自動的に変換します
• サーバーが JSON 形式以外の出力を行えないようにします

2. ポートの自動処理

サーバーは、デフォルトのポート（3000）が使用中の場合に自動的に検出し、使用可能なポートが見つかるまで代替ポート（3001、3002 など）を試します。これにより、別のサービスがすでにポート 3000 を使用している場合に発生する EADDRINUSE: address already in use エラーを解消します。

メリット：

• ポート 3000 を使用している他のサービスを終了する必要がありません
• サーバーは使用中のポートを Cursor に自動的に通知します
• 起動を断念するまでに、最大 10 個の異なるポートを試します

3. Windows 対応のビルドスクリプト

ビルドスクリプトは Windows と Linux/Mac に対応し、OS 固有のコマンドの代わりに ES6 モジュールを使用してディレクトリの作成とファイルのコピーを行うようになりました。これにより、Windows で npm run build を実行した際に発生していた mkdir -p エラーを解消します。

トラブルシューティング

エラー：「JSON 応答の解析に失敗しました」または「Unexpected token... is not valid JSON」

このエラーはバージョン 1.2.0 で完全に解消されているはずです。それでもエラーが発生する場合は、次の手順を実行してください。

1. バージョン 1.2.0 以降を使用していることを確認します
2. git pull でローカルリポジトリを更新し、npm run build で再ビルドします
3. mcp-server.js ファイルへの正しいパスを使用していることを確認します

エラー：「EADDRINUSE: address already in use」

このエラーは、ポート 3000 が別のプロセスによってすでに使用されている場合に発生します。新しいバージョンのサーバーでは、代替ポートを自動的に試すことでこの問題を解決します。

それでも問題が発生する場合：

1. 最新バージョンのサーバーを使用していることを確認してください
2. ポート 3000 を使用しているプロセスを手動で終了してみてください
3. 環境変数 PORT を使って特定のポートを設定してください：

   # Windows
   set PORT=3001 && node C:\caminho\para\mcp-server.js
   
   # Linux/Mac
   PORT=3001 node /caminho/para/mcp-server.js
   

エラー：「mkdir -p」または「chmod +x」を Windows で実行した場合

Windows で npm run build を実行した際に、Unix コマンドに関連するエラーが発生した場合：

1. Windows に対応したビルドスクリプトを含む、リポジトリの最新バージョンを使用していることを確認してください
2. git pull を実行して、最新の更新を取得してください
3. 問題が解決しない場合は、ファイルを手動で作成できます：
   • src/index.js の内容を新しいファイル dist/mcp-server.js にコピーしてください
   • ファイルの先頭に #!/usr/bin/env node を追加してください

エラー：「require is not defined in ES module scope」

npm run build の実行時にこのエラーが発生した場合：

1. ビルドスクリプトで ES6 モジュール構文を使用する、リポジトリの最新バージョンを使用していることを確認してください
2. git pull を実行して、最新の更新を取得してください
3. 問題が解決しない場合は、ファイルを手動で作成できます：

   # 1. Crie a pasta dist se não existir
   mkdir -p dist
   
   # 2. Copie o arquivo src/index.js para dist/mcp-server.js
   # No Windows:
   copy src\index.js dist\mcp-server.js
   
   # No Linux/Mac:
   cp src/index.js dist/mcp-server.js
   
   # 3. Edite o arquivo dist/mcp-server.js e adicione #!/usr/bin/env node no início
   

仕組み

1. Chrome DevTools 拡張機能がブラウザーの情報を収集します
2. 拡張機能がそのデータをローカル MCP サーバーに送信します
3. サーバーがデータを保存し、RESTful API 経由で利用できるようにします
4. Cursor 内の Claude AI が MCP ツールを通じてこのデータにアクセスします

利用可能な MCP ツール

• getConsoleLogs：コンソールログを取得します
• getConsoleErrors：コンソールエラーを取得します
• getNetworkErrorLogs：ネットワークエラーログを取得します
• getNetworkSuccessLogs：ネットワーク成功ログを取得します
• takeScreenshot：ページのスクリーンショットを撮影します
• getSelectedElement：選択した要素の情報を取得します
• wipeLogs：保存されているすべてのログを消去します

要件

• Node.js 14+
• Chrome 88+
• MCP をサポートする Cursor

セキュリティに関する注意事項

このサーバーは、開発中のローカル利用のみを目的としています。追加のセキュリティ対策なしに、このサーバーをパブリックインターネットに公開しないでください。