firefox-devtools-mcp

公式

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

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

  • ページの移動と検査 — URLを開く、開いているタブを一覧表示する、ページを切り替える、またはnavigate_pagelist_pagesget_page_textを使用してページのテキストを抽出するよう要求します。
  • ページ要素との操作take_snapshotでアクセシビリティスナップショットを取得し、その後click_by_uidfill_by_uidを使用してUIDで要素をクリック、入力、またはホバーします。
  • ネットワークとコンソールアクティビティの監視list_network_requests/get_network_requestでキャプチャされたネットワークリクエストを取得するか、list_console_messagesでコンソールメッセージを読み取ります。
  • スクリーンショットと録画のキャプチャscreenshot_pageでページのスクリーンショットを保存するか、screencast_start/screencast_stopを使用してビューポートをビデオに録画します。
  • カスタムJavaScriptの実行evaluate_scriptを使用してページコンテキストで任意のスクリプトを実行し、必要に応じて分離されたsandboxレルムで実行します。
  • ダウンロードとブラウザ状態の管理list_downloads/clear_downloadsでダウンロードを一覧表示またはクリアし、set_download_behaviorでダウンロード動作を制御するか、restart_firefoxでFirefoxを再起動します。

ドキュメント

Firefox DevTools MCP

npm version CI codecov License: MIT License: Apache 2.0

Glama

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や保存されたセッションを含む)にアクセスできます。
  • 訪問するサイトには注意してください。 ページはエージェントを操作するように設計されたコンテンツ(プロンプトインジェクション)を返すことがあります。自分が管理または信頼するサイトに限定してください。
  • 必要なツールモジュールのみを有効にしてください。 デフォルトのbasicプリセットにはすでにevaluate_scriptが含まれています。--tool-preset slimはそれを除外します。--tool-preset developer(デバッグ、ネットワーク、コンソール、プロファイラー)や--tool-preset mozilla(特権コンテキスト)などのより高いプリセットは、エージェントができることをさらに拡張します。

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

要件

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

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

推奨: npxを使用して、npmから最新の公開バージョンを実行してください。

オプションA — CLI

Claude Code

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

Codex

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

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

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

オプションB — 設定ファイルを編集

Claude Code

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"
      }
    }
  }
}

Codex

~/.codex/config.tomlに追加:

[mcp_servers.firefox-devtools]
command = "npx"
args = ["-y", "@mozilla/firefox-devtools-mcp@latest", "--headless", "--viewport", "1280x720"]

[mcp_servers.firefox-devtools.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_pagesselect_pagenavigate_page
  • take_snapshot、次にclick_by_uid / fill_by_uid
  • list_network_requests(常時キャプチャ)、get_network_request
  • list_downloads(常時キャプチャ)、set_download_behavior
  • screenshot_pagelist_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 — 既存接続モード用のMarionetteポート、デフォルト2828(MARIONETTE_PORT
  • --pref name=value — 起動時にmoz:firefoxOptions経由でFirefox設定を設定(繰り返し可能)
  • --tool-preset — 有効にするツールモジュールを選択: slimbasic(デフォルト)、developermozilla、またはallツールモジュールとプリセットを参照。(TOOL_PRESET
  • --tools — 有効にするツールモジュールの明示的なリスト。--tool-presetを完全に上書きします(例: --tools pages network script)。ツールモジュールとプリセットを参照。
  • --enable-script非推奨。--tool-preset developerまたは--tools ... script debuggingを使用してください。 developerツールプリセットを選択します。(ENABLE_SCRIPT=true
  • --enable-privileged-context非推奨。--tool-preset mozillaまたは--tools ... privileged prefsを使用してください。 mozillaツールプリセットを選択します。MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1が必要です(ENABLE_PRIVILEGED_CONTEXT=true
  • --android-device — Firefox for Androidモードを有効化。値はADBデバイスシリアルです(例: emulator-5554)。接続されているデバイスを一覧表示するにはadb devicesを実行します。値を省略するかautoを使用すると、接続されている単一のデバイスを自動的に選択します。
  • --android-wipe-app-data — Androidモードがターゲットアプリのすべてのデータを消去することを確認します。--android-deviceと一緒に必須です。(ANDROID_WIPE_APP_DATA=true
  • --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_exampleANDROID_PACKAGE
  • --unrestricted-save-pathssaveToパラメータがデフォルトのルートの代わりにディスク上の任意の場所に書き込めるようにします。大きな出力をディスクに保存するSECURITY.mdのセキュリティに関する注記を参照してください。(UNRESTRICTED_SAVE_PATHS=true
  • --log-file — MCPサーバーログをstderrの代わりにファイルに書き込みます。サーバー出力を隠すMCPクライアントでのデバッグセッションに役立ちます。DEBUG=*を設定すると、詳細なデバッグログも含まれます。例: --log-file /tmp/firefox-mcp.log

ツールモジュールとプリセット

ツールはモジュールにグループ化されています。名前付きプリセット(--tool-preset)または明示的なリスト(--tools)のいずれかで公開するモジュールを選択します。両方が指定された場合、--toolsが優先され、プリセットは無視されます。

モジュール: pagessnapshotinputnetworkconsolescreenshotdownloadsutilitiesmanagementwebextensionprofilerscreencastscriptdebuggingprefsprivileged

プリセット(それぞれが前のもののスーパーセット):

  • slimpagessnapshotinputscreenshot
  • basic(デフォルト) — slimに加えてdownloadsscriptutilitiesmanagementwebextensionscreencast
  • developerbasicに加えてdebuggingnetworkconsoleprofiler
  • mozilladeveloperに加えてprefsprivileged
  • all — すべてのモジュール

デフォルトのbasicにはscriptが含まれ、したがってevaluate_scriptツールが含まれることに注意してください。 攻撃面に対するその意味についてはSECURITY.mdを参照し、それを除外するには--tool-preset slimまたは明示的な--toolsリストを使用してください。

# Use the developer preset (adds network, console, debugging and profiler tools)
npx @mozilla/firefox-devtools-mcp --tool-preset developer

# Enable only the modules you need
npx @mozilla/firefox-devtools-mcp --tools pages network console

prefsおよびprivilegedモジュールはMOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1を必要とし、Mozilla内部ビルドでのみ利用可能です。公開パッケージは要求されてもそれらをスキップし、除外したモジュールの名前をログに警告として記録します。

便利な設定(--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が必要です。

警告: Androidモードは、セッションの前にターゲットアプリのすべてのデータを消去します。 タブ、履歴、ブックマーク、パスワード、Cookie、設定はすべて失われます。geckodriverは セッション作成時にadb shell pm clear <package>を実行し、それをスキップする方法はありません。 その後、セッションは独自の一時プロファイルで実行され、後で削除されます。 このため、--android-deviceには--android-wipe-app-dataが必要であり、 使用しているブラウザを自動化するのではなく、自動化専用のビルドをインストールする必要があります。 既存のアプリデータを保持するオプションをgeckodriverに追加する作業は Bug 2064088で追跡されています。

# List connected devices
adb devices

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

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

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

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

既存のFirefoxに接続

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

# Start Firefox with Marionette and the Remote Agent (BiDi)
firefox --marionette --remote-debugging-port

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

MCPはWebDriver Classic(--marionette)とWebDriver BiDi(--remote-debugging-port)の両方を使用するため、両方のフラグが必要です。Firefoxが--marionetteのみで起動された場合、MCPサーバーは接続に失敗し、両方のフラグでFirefoxを再起動するよう求めます。

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

ツール概要

モジュール別の全ツールリスト、説明、パラメータについてはdocs/tools.mdを参照してください(ソースから生成)。

  • ページ: list/new/navigate/select/close/get_page_text(get_page_textはオプションのsaveToをサポート)
  • スナップショット/UID: take/resolve/clear(takeはオプションのsaveToをサポート)
  • 入力: click/hover/fill/drag/upload/form fill
  • ネットワーク: list/get(ID優先、フィルター、常時キャプチャ。両方ともオプションのsaveToをサポート)
  • ダウンロード: list_downloads/clear_downloads(常時キャプチャ)、set_download_behavior(allow/deny/default)
  • コンソール: list/clear(listはオプションのsaveToをサポート)
  • スクリーンショット: page/by uid(CLI環境用のオプションのsaveTo付き)
  • スクリプト: evaluate_script(分離されたレルム用のオプションのsandbox。大きな結果用のオプションのsaveTo
  • 特権コンテキスト: list/select特権("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
  • Firefox設定: get_firefox_prefs、set_firefox_prefs(MOZ_REMOTE_ALLOW_SYSTEM_ACCESS=1が必要)
  • プロファイラー: profiler_is_active、profiler_start(プリセットまたは明示的な設定)、profiler_stop(プロファイルをダウンロードディレクトリに保存)
  • スクリーンキャスト: screencast_start(ページのビューポートをダウンロードディレクトリのビデオファイルに記録)、screencast_stop(Firefox 154+が必要)
  • ユーティリティ: accept/dismissダイアログ、履歴の戻る/進む、ビューポート設定

大きな出力をディスクに保存

大きなツール出力は、Claude CodeなどのCLIクライアントでかなりのコンテキストを消費する可能性があります。 screenshot_pagescreenshot_by_uidtake_snapshotlist_console_messageslist_network_requestsget_network_requestget_page_textevaluate_script、および evaluate_privileged_scriptツールは、オプションのsaveToパラメータを受け入れ、結果をインラインで返す代わりにファイルに書き込みます。saveToは次の3つの形式のいずれかを取ります:

  • ファイルパス(現在の作業ディレクトリからの相対パス、または~/.firefox-devtools-mcp内の絶対パス。親ディレクトリは作成されます)
  • 既存のディレクトリ(その中にタイムスタンプ付きファイルが生成されます)
  • true~/.firefox-devtools-mcp/output/の下にタイムスタンプ付きファイルが生成されます)

レスポンスはパスとバイトサイズを返します。保存されたファイルは常に完全で切り詰められていないデータを保持します。インラインサイズの保護(コンソールメッセージの上限、ネットワークヘッダーの切り詰め、スナップショット行の上限)はそれには適用されません。

テキスト生成ツール(スクリーンショット以外のすべて)は、previewも受け入れます。これは、保存された出力のうちインラインで短い抜粋としてエコーバックする文字数です。スクリーンショットにはプレビューがありません。

screenshot_page({ saveTo: "page.png" })
take_snapshot({ saveTo: true })
list_network_requests({ urlContains: "api", saveTo: "network.json" })
evaluate_script({ function: "() => performance.getEntries()", saveTo: true, preview: 2000 })

デフォルトでは、保存パスは制限されています。相対パスは現在の作業ディレクトリに対して解決され、絶対パスは ~/.firefox-devtools-mcp 内でのみ許可されます。これらの場所から外れるパスは拒否されます。そのディレクトリ外の絶対パスを含む任意の場所に書き込むには、--unrestricted-save-paths を指定してサーバーを起動してください。

保存されたファイルは、例えば 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 は、その要素が削除されるかページが移動するまで有効です。UID ツールが存在しないと報告した場合は、新しいスナップショット(take_snapshot)を取得してください。
  • Windows 10: MCP サーバー 'firefox-devtools' の検出中にエラーが発生しました: MCP エラー -32000: 接続が閉じられました
    • 解決策 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 のいずれかを選択してライセンスされています。