firefox-devtools-mcp

公式

Firefox DevTools 用の Model Context Protocol サーバー。リモートデバッグプロトコルを通じて、AIアシスタントがFirefoxブラウザを検査・制御できるようにします。

GitHub

307

Firefox DevTools MCPで何ができますか？

ブラウザタブの操作と管理 — navigate_page、select_page、list_pages を使用して、タブの開閉、切り替え、ページ間の移動を行います。
ページコンテンツの調査と操作 — take_snapshot でテキストスナップショットを取得し、click_by_uid や fill_by_uid で一意のIDを指定してフォームフィールドをクリックまたは入力します。
ネットワークアクティビティの監視 — list_network_requests でキャプチャしたすべてのネットワークリクエストを一覧表示し、get_network_request で個々のリクエスト詳細を確認します。
スクリーンショットの取得 — screenshot_page でページ全体のスクリーンショットを撮影するか、screenshot_by_uid で特定の要素を対象に、必要に応じてディスクに保存します。
ページ内でのJavaScriptの実行 — --enable-script フラグが有効な場合、evaluate_script を使用してページコンテキスト内で任意のスクリプトを実行します。
既存のFirefoxセッションの制御 — --connect-existing で実行中のFirefoxインスタンスにアタッチし、現在のタブ、クッキー、ログイン情報を自動化します。

ドキュメント

Firefox DevTools MCP

WebDriver BiDi（Selenium WebDriver経由）を使用してFirefoxを自動化するためのModel Context Protocolサーバーです。Claude Code、Claude Desktop、Cursor、Cline、その他のMCPクライアントと連携します。

リポジトリ: https://github.com/mozilla/firefox-devtools-mcp

注記: このMCPサーバーはローカルのFirefoxブラウザのインストールが必要であり、glama.aiのようなクラウドホスティングサービスでは実行できません。ローカルで実行するにはnpx @mozilla/firefox-devtools-mcp@latestを使用するか、提供されているDockerfileでDockerを使用してください。

セキュリティ

ブラウザMCPサーバーには固有のリスクが伴います。いくつかの重要な対策:

専用のFirefoxプロファイルを使用してください。 通常のプロファイルに対してサーバーを実行しないでください。エージェントは、Cookieや保存されたセッションを含め、ブラウザがアクセスできるものすべてにアクセスできます。
アクセスするサイトに注意してください。 ページはエージェントを操作するように設計されたコンテンツ（プロンプトインジェクション）を返す可能性があります。自分が管理している、または信頼できるサイトに限定してください。
必要のない限り、追加のフラグを有効にしないでください。 --enable-script と --enable-privileged-context は、エージェントが実行できることを大幅に拡張します。

リスクの詳細と脆弱性の報告方法については、SECURITY.md を参照してください。

要件

Node.js ≥ 20.19.0
Firefox 100+ がインストールされていること（自動検出、または --firefox-path を渡す）

Claude Codeでのインストールと使用 (npx)

推奨: npxを使用して、npmから常に最新の公開バージョンを実行します。

オプション A — Claude Code CLI

claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest

オプションは引数または環境変数として渡します。例:

# Headless + viewport via args
claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest -- --headless --viewport 1280x720

# Or via environment variables
claude mcp add firefox-devtools npx @mozilla/firefox-devtools-mcp@latest \
  --env START_URL=https://example.com \
  --env FIREFOX_HEADLESS=true

オプション B — Claude Code設定JSONを編集

Claude Code設定ファイルに追加します:

macOS: ~/Library/Application Support/Claude/Code/mcp_settings.json
Linux: ~/.config/claude/code/mcp_settings.json
Windows: %APPDATA%\Claude\Code\mcp_settings.json

{
  "mcpServers": {
    "firefox-devtools": {
      "command": "npx",
      "args": ["-y", "@mozilla/firefox-devtools-mcp@latest", "--headless", "--viewport", "1280x720"],
      "env": {
        "START_URL": "about:blank"
      }
    }
  }
}

オプション C — ヘルパースクリプト (ローカル開発ビルド)

npm run setup
# Choose Claude Code; the script saves JSON to the right path

MCP Inspectorで試す

npx @modelcontextprotocol/inspector npx @mozilla/firefox-devtools-mcp@latest --start-url https://example.com --headless

次に、以下のようなツールを呼び出します:

list_pages, select_page, navigate_page
take_snapshot の後に click_by_uid / fill_by_uid
list_network_requests (常時キャプチャ), get_network_request
screenshot_page, list_console_messages

CLIオプション

フラグまたは環境変数（右側の名前）を渡すことができます:

--firefox-path — Firefoxバイナリへの絶対パス
--headless — UIなしで実行 (FIREFOX_HEADLESS=true)
--viewport 1280x720 — 初期ウィンドウサイズ
--profile-path — 特定のFirefoxプロファイルを使用
--firefox-arg — 追加のFirefox引数 (繰り返し可能)
--start-url — 起動時にこのURLを開く (START_URL)
--accept-insecure-certs — TLSエラーを無視 (ACCEPT_INSECURE_CERTS=true)
--connect-existing — 新しいFirefoxを起動する代わりに、既に実行中のFirefoxに接続 (CONNECT_EXISTING=true)
--marionette-port — connect-existingモードのMarionetteポート、デフォルト2828 (MARIONETTE_PORT)
--pref name=value — 起動時にmoz:firefoxOptions経由でFirefoxの設定をセット (繰り返し可能)
--enable-script — evaluate_script ツール（ページコンテキストで任意のJavaScriptを実行）とデバッグツール（スクリプトの一覧表示、ソースの検査、ログポイントの設定）を有効にします。デバッグツールにはFirefox 153+が必要です。(ENABLE_SCRIPT=true)
--enable-privileged-context — 特権コンテキストツールを有効にします: 特権コンテキストの一覧表示/選択、特権スクリプトの評価、Firefox設定の取得/設定、拡張機能の一覧表示。MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1 が必要です (ENABLE_PRIVILEGED_CONTEXT=true)
--android-device — Firefox for Androidモードを有効にします。値はADBデバイスシリアルです (例: emulator-5554)。接続されているデバイスを一覧表示するには adb devices を実行します。値を省略するか auto を使用すると、単一の接続デバイスを自動的に選択します。
--android-package — Androidアプリのパッケージ名、デフォルト org.mozilla.firefox。その他のパッケージ: Firefox Beta用 org.mozilla.firefox_beta、Firefox Nightly用 org.mozilla.fenix、Firefox Nightly Debug用 org.mozilla.fenix.debug、geckoview用 org.mozilla.geckoview_example (ANDROID_PACKAGE)
--log-file — MCPサーバーログをstderrではなくファイルに書き込みます。サーバー出力を隠すMCPクライアントでのセッションのデバッグに役立ちます。詳細なデバッグログを含めるには DEBUG=* を設定します。例: --log-file /tmp/firefox-mcp.log

便利な設定 (`--pref`)

remote.prefs.recommended=false。Firefoxが自動化モードで実行される場合、テスト用にブラウザの動作を変更するRecommendedPreferencesが適用されます。remote.prefs.recommendedをfalseに設定すると、それをスキップし、通常のFirefoxインスタンスに近い設定になります。
remote.log.level=Trace。Firefoxで詳細なWebDriverプロトコルログを有効にします。MCPサーバーは自動的に一致するログレベルをgeckodriverに渡すため、両側が同じ詳細度でログを記録します。
app.update.disabledForTesting=false。Firefoxが自動的にアップデートをダウンロードして適用することを許可します。アップデートによりセッションが中断される可能性があることに注意してください。remote.prefs.recommended=falseも設定する必要があります。

Firefox for Android

--android-device を使用して、Androidデバイス上で実行されているFirefoxを自動化します。PATH上に adb と、自動的に管理されるgeckodriverが必要です。

# List connected devices
adb devices

# Launch Firefox for Android on the single connected device
npx @mozilla/firefox-devtools-mcp --android-device auto

# Target a specific device
npx @mozilla/firefox-devtools-mcp --android-device <serial>

# Use Firefox Nightly instead
npx @mozilla/firefox-devtools-mcp --android-device <serial> --android-package org.mozilla.fenix

ホストとデバイス間のポート転送はgeckodriverによって自動的に処理されます。

既存のFirefoxに接続

--connect-existing を使用して、Cookie、ログイン情報、開いているタブをそのままに、実際のブラウジングセッションを自動化します:

# Start Firefox with Marionette enabled
firefox --marionette

# Run the MCP server
npx @mozilla/firefox-devtools-mcp --connect-existing --marionette-port 2828

または、about:config (または user.js) で marionette.enabled を true に設定して、起動のたびにMarionetteを有効にします。

BiDi依存の機能（コンソールイベント、ネットワークイベント）はconnect-existingモードでは利用できません。その他の機能はすべて正常に動作します。

警告: 通常のブラウジング中にMarionetteを有効のままにしないでください。 navigator.webdriver = true が設定され、他のブラウザフィンガープリントシグナルが変更されるため、 CloudflareやAkamaiなどで保護されているサイトでボット検出がトリガーされる可能性があります。 MCP自動化が必要な場合にのみMarionetteを有効にし、その後は通常通りFirefoxを再起動してください。

ツール概要

ページ: 一覧表示/新規作成/移動/選択/閉じる
スナップショット/UID: 取得/解決/クリア
入力: クリック/ホバー/入力/ドラッグ/アップロード/フォーム入力
ネットワーク: 一覧表示/取得 (ID優先、フィルター、常時キャプチャ)
コンソール: 一覧表示/クリア
スクリーンショット: ページ/UID指定 (CLI環境用のオプション saveTo 付き)
スクリプト: evaluate_script
特権コンテキスト: 特権（"chrome"）コンテキストの一覧表示/選択、evaluate_privileged_script (MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1 が必要)
WebExtension: install_extension, uninstall_extension, list_extensions (listには MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1 が必要)
Firefox管理: get_firefox_info, get_firefox_output, restart_firefox, set_firefox_prefs, get_firefox_prefs
プロファイラ: profiler_is_active, profiler_start (プリセットまたは明示的な設定), profiler_stop (プロファイルをダウンロードディレクトリに保存)
ユーティリティ: ダイアログの承諾/拒否、履歴の戻る/進む、ビューポートの設定

Claude Code向けスクリーンショット最適化

Claude Code CLIでスクリーンショットを使用する場合、base64画像データが大量のコンテキストを消費する可能性があります。 saveTo パラメータを使用して、スクリーンショットをディスクに保存します:

screenshot_page({ saveTo: "/tmp/page.png" })
screenshot_by_uid({ uid: "abc123", saveTo: "/tmp/element.png" })

その後、Claude Codeの Read ツールを使用して、コンテキストサイズに影響を与えずにファイルを表示できます。

ローカル開発

npm install
npm run build

# Run with Inspector against local build
npx @modelcontextprotocol/inspector node dist/index.js --headless --viewport 1280x720

# Or run in dev with hot reload
npm run inspector:dev

ローカル開発、テスト、CIの詳細については、CONTRIBUTING.md を参照してください。

トラブルシューティング

Firefoxが見つからない場合: --firefox-path "/Applications/Firefox.app/Contents/MacOS/firefox" (macOS) またはOS上の正しいパスを渡してください。
初回実行が遅い: SeleniumがBiDiセッションをセットアップします。以降の実行は高速です。
ナビゲーション後のUIDが古い: UIDツールを使用する前に、新しいスナップショットを取得してください (take_snapshot)。
Windows 10: MCPサーバー 'firefox-devtools' の検出中にエラーが発生しました: MCP error -32000: Connection closed
- 解決策1 cmd /c でラップする (詳細):
```
"mcpServers": {
  "firefox-devtools": {
    "command": "cmd",
    "args": ["/c", "npx", "-y", "@mozilla/firefox-devtools-mcp@latest"]
  }
}
```
- 解決策2 npx への絶対パスを使用する（拡張子 — .cmd, .bat, .exe, または .ps1 — をセットアップに合わせて調整してください）:
```
"mcpServers": {
  "firefox-devtools": {
    "command": "C:\\nvm4w\\nodejs\\npx.ps1",
    "args": ["-y", "@mozilla/firefox-devtools-mcp@latest"]
  }
}
```

バージョニング

1.0以前のAPI: バージョンは 0.x から始まります。最新リリースを使用するには、npxで @latest を使用してください。

貢献

問題の報告、テストの実行、プロジェクトでのローカル作業の方法については、CONTRIBUTING.md を参照してください。

作者

Mozilla によってメンテナンスされています。

ライセンス

MIT または Apache 2.0 のいずれかを選択してライセンスされます。