firefox-devtools-mcp

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 प्रोफ़ाइल का उपयोग करें। अपनी नियमित प्रोफ़ाइल के विरुद्ध सर्वर कभी न चलाएँ — एजेंट के पास वह सब कुछ एक्सेस है जो ब्राउज़र देख सकता है, जिसमें कुकीज़ और सहेजे गए सत्र शामिल हैं।
• आप किन साइटों पर जाते हैं, इस बारे में सावधान रहें। पृष्ठ एजेंट को हेरफेर करने के लिए डिज़ाइन की गई सामग्री लौटा सकते हैं (प्रॉम्प्ट इंजेक्शन)। केवल उन्हीं साइटों पर जाएँ जिन्हें आप नियंत्रित करते हैं या जिन पर भरोसा करते हैं।
• जब तक आवश्यक न हो, अतिरिक्त फ़्लैग सक्षम करने से बचें। --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

विकल्पों को args या env vars के रूप में पास करें। उदाहरण:

# 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 — सहायक स्क्रिप्ट (स्थानीय dev बिल्ड)

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 से अटैच करें (CONNECT_EXISTING=true)
• --marionette-port — कनेक्ट-मौजूदा मोड के लिए 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 — Android मोड के लिए Firefox सक्षम करें; मान 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 लागू करता है जो परीक्षण के लिए ब्राउज़र व्यवहार को संशोधित करता है। इन्हें छोड़ने और एक नियमित Firefox इंस्टेंस के करीब कॉन्फ़िगरेशन रखने के लिए remote.prefs.recommended को false पर सेट करें।
• remote.log.level=Trace. Firefox में विस्तृत WebDriver प्रोटोकॉल लॉग सक्षम करें। MCP सर्वर स्वचालित रूप से मिलान लॉग स्तर geckodriver को पास करेगा ताकि दोनों पक्ष समान वर्बोसिटी पर लॉग करें।
• app.update.disabledForTesting=false. Firefox को स्वचालित रूप से अपडेट डाउनलोड और लागू करने दें। ध्यान दें कि अपडेट आपके सत्र को बाधित कर सकते हैं। इसके लिए remote.prefs.recommended=false भी सेट करना आवश्यक है।

Android के लिए Firefox

Android डिवाइस पर चल रहे Firefox को स्वचालित करने के लिए --android-device का उपयोग करें। आपके 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 का उपयोग करें — कुकीज़, लॉगिन और खुले टैब के साथ:

# Start Firefox with Marionette enabled
firefox --marionette

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

या प्रत्येक लॉन्च पर Marionette सक्षम करने के लिए about:config (या user.js) में marionette.enabled को true पर सेट करें।

BiDi-निर्भर सुविधाएँ (कंसोल ईवेंट, नेटवर्क ईवेंट) कनेक्ट-मौजूदा मोड में उपलब्ध नहीं हैं; अन्य सभी सुविधाएँ सामान्य रूप से काम करती हैं।

चेतावनी: सामान्य ब्राउज़िंग के दौरान Marionette सक्षम न छोड़ें। यह navigator.webdriver = true सेट करता है और अन्य ब्राउज़र फ़िंगरप्रिंट सिग्नल बदलता है, जो Cloudflare, Akamai, आदि द्वारा संरक्षित साइटों पर बॉट डिटेक्शन को ट्रिगर कर सकता है। केवल तभी Marionette सक्षम करें जब आपको MCP स्वचालन की आवश्यकता हो, फिर बाद में 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 (सूची के लिए 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 के अंतर्गत लाइसेंस प्राप्त।