Firefox DevTools MCP

خادم Model Context Protocol يتيح لوكلاء الذكاء الاصطناعي استخدام Firefox. له حالتان رئيسيتان للاستخدام:

• التصفح الوكيلي: يستخدم الوكيل المتصفح في المهام الاعتيادية، مثل قراءة الصفحات وملء النماذج والتنقل عبر تدفقات متعددة الخطوات على مواقع الويب.
• تطوير الويب بمساعدة الوكيل: يحمّل الوكيل الصفحة التي تعمل عليها ويفحصها باستخدام أدوات المطوّر، مثل الطرفية (console) وطلبات الشبكة والمنقّح (debugger) ومحلّل الأداء (profiler).

يتحكم في Firefox عبر WebDriver BiDi (من خلال Selenium WebDriver) ويعمل مع Claude Code وClaude Desktop وCursor وCline وغيرها من عملاء MCP.

المستودع: https://github.com/mozilla/firefox-devtools-mcp

ملاحظة: يتطلب خادم MCP هذا تثبيت متصفح Firefox محليًا ولا يمكن تشغيله على خدمات الاستضافة السحابية مثل glama.ai. استخدم npx @mozilla/firefox-devtools-mcp@latest للتشغيل محليًا، أو استخدم Docker مع ملف Dockerfile المرفق.

الأمان

تحمل خوادم MCP الخاصة بالمتصفحات مخاطر متأصلة. فيما يلي بعض الممارسات الأساسية:

• استخدم ملف تعريف Firefox مخصصًا. لا تشغّل الخادم أبدًا باستخدام ملفك الشخصي المعتاد — فالوكيل يملك صلاحية الوصول إلى كل ما يستطيع المتصفح الوصول إليه، بما في ذلك ملفات تعريف الارتباط والجلسات المحفوظة.
• كن حذرًا بشأن المواقع التي تزورها. قد تُرجع الصفحات محتوى مصممًا للتلاعب بالوكيل (حقن التعليمات). التزم بالمواقع التي تتحكم بها أو تثق بها.
• فعّل وحدات الأدوات التي تحتاجها فقط. تتضمن الإعداد المسبق الافتراضي 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.

الخيار أ — 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

الخيار ب — تحرير ملف الإعدادات

Claude Code

أضف إلى ملف mcp_settings.json الخاص بـ Claude Code:

{
  "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_pages، select_page، navigate_page
• take_snapshot ثم click_by_uid / fill_by_uid
• list_network_requests (التقاط دائم التشغيل)، get_network_request
• list_downloads (التقاط دائم التشغيل)، set_download_behavior
• screenshot_page، list_console_messages

خيارات CLI

يمكنك تمرير أعلام أو متغيرات بيئة (الأسماء على اليمين):