Chrome: دعه يتحكم في المتصفح
📚 دليل السلسلة: الدرس السابق 39 البدء العملي قام بجمع الأجزاء التي تعلمتها سابقاً لأول مرة في مسار عمل كامل. هذا الدرس يفتح باباً جديداً لـ Claude Code — وهو السماح له بالتحكم المباشر في متصفح Chrome الخاص بك: فتح صفحات الويب، قراءة أخطاء وحدة التحكم (console)، ملء النماذج، وجلب البيانات من الصفحات، كل ذلك دون الحاجة لمغادرة الطرفية والضغط يدوياً.
⚠️ ميزة تجريبية، قد تتغير مع الإصدارات. تكامل Chrome المشروح في هذا الدرس يمر حالياً بمرحلة تجريبية (beta)، وتعتمد الأوامر، المتطلبات المسبقة للإصدار، والمتصفحات المدعومة على الوثائق الرسمية، وقد يتم تعديلها في الإصدارات اللاحقة.
يا رفاق، سنتحدث اليوم عن ميزة تجعل لـ Claude Code "يداً ممتدة" — وهي التحكم في المتصفح.
في الدروس التسعة والثلاثين السابقة، كان عمل Claude محصوراً في نطاق "الملفات + سطر الأوامر": قراءة كودك، تعديل ملفاتك، وتشغيل سيناريوهاتك. ولكن في التطوير الحقيقي، هناك الكثير من المهام التي لا يمكن الاستغناء عن المتصفح فيها — فبعد تعديل نموذج تسجيل الدخول، يجب فتح الصفحة وتجربتها يدوياً، وعند حدوث خطأ (bug)، يجب إلقاء نظرة على الأخطاء الحمراء في وحدة تحكم المتصفح (console)، ولمطابقة التصاميم بدقة، يجب مقارنة المتصفح بالبكسل. هذه المهام كان عليك سابقاً القيام بها يدوياً بالتبديل إلى Chrome، ثم نسخ ما تراه لتلقينه لـ Claude.
الآن لم تعد بحاجة لذلك. بمجرد تفعيل تكامل Chrome، يمكنك كتابة جملة في الطرفية مثل "افتح localhost:3000، وأرسل النموذج ببيانات خاطئة، وتأكد من صحة رسالة الخطأ"، ليقوم Claude بفتح المتصفح وملء النموذج وقراءة رسالة الخطأ بنفسه، ثم يعود ليخبرك بالنتيجة. لأول مرة، تصبح عمليتا "تعديل الكود" و"التحقق من الكود في المتصفح" قابلتين للتنفيذ بالكامل داخل نفس المحادثة دون الحاجة للتبديل بين النوافذ.
في المرة الأولى التي قمت فيها بتفعيله، جلست أراقب علامة التبويب الجديدة وهي تفتح تلقائياً في متصفح Chrome الخاص بي، والماوس يضغط على صندوق البحث، والكلام يُكتب حرفاً بحرف — وظللت أشاهد ذلك لبعض الوقت؛ فشعور "أنه يضغط بالنيابة عني حقاً" يختلف تماماً عن تشغيل الأوامر داخل بيئة افتراضية معزولة (sandbox).
ببساطة: استخدام MCP (راجع الدرس 22 بالتفصيل) يوصله بقواعد البيانات و Jira وغيرها من مصادر البيانات؛ أما تكامل Chrome فيوصله بالمتصفح الذي تستخدمه يومياً — مع الاحتفاظ بجميع جلسات تسجيل الدخول الخاصة بك. يشرح هذا الدرس ما يمكنه فعله، وكيفية توصيله، وأبرز المصائد، والحدود الأمنية للتحكم في "متصفحك الحقيقي".
بعد قراءة هذا الدرس، ستحصل على:
- شرح مبسط لتكامل Chrome، وكيف يوزع المهام بينه وبين MCP و computer use
- خطوات الربط الكاملة (تثبيت الإضافة، التشغيل باستخدام
--chrome، متطلبات الإصدار والاشتراك)، والمستندات والبيئات غير المدعومة - ست حالات استخدام شائعة (تصحيح الأخطاء الفوري، التحقق من التصميم، ملء النماذج، جلب البيانات...)، مع مثال حقيقي لكيفية استخدام كل منها
- المخاطر المترتبة على التحكم في "متصفح حقيقي" مقارنة بالبيئة المعزولة، والحدود الأمنية الرسمية، والقواعد التي يجب عليك الالتزام بها
- تطبيق عملي مصغر مع خطوات تشغيل ونتائج متوقعة: ربط Chrome لجعله يقرأ صفحة مرة واحدة
01 افهم أولاً: ما هو وماذا يمكنه أن يفعل
الخلاصة أولاً: تكامل Chrome = السماح لـ Claude Code باستعارة متصفح Chrome الذي سجلت فيه كل شيء بالفعل، لفتح الصفحات، والضغط على الأزرار، وملء النماذج، وقراءة محتوى الصفحات بالنيابة عنك.
الكلمة المفتاحية هي "الذي سجلت فيه كل شيء بالفعل". الوثائق الرسمية واضحة جداً في هذا الشأن:
يفتح Claude علامات تبويب جديدة لمهام المتصفح، ويشارك حالة تسجيل دخول متصفحك، بحيث يمكنه الوصول إلى أي موقع قمت بتسجيل الدخول إليه بالفعل. تعمل عمليات المتصفح في نافذة Chrome مرئية في الوقت الفعلي.
عند تفكيك هذه الجملة، نجد ثلاثة نقاط مهمة جداً للمبتدئين:
- يفتح علامات تبويب جديدة، ولا ينشئ متصفحاً غريباً آخر — فهو يعمل داخل متصفح Chrome الذي تراه أمامك.
- يشارك حالة تسجيل دخولك — فإذا كنت مسجلاً في Gmail و Notion ولوحة تحكم الشركة، فإنه يدخل إليها مباشرة دون الحاجة لتهيئة API أو لصق token.
- النافذة مرئية في الوقت الفعلي — ترى تماماً أين يضغط وماذا يملأ، وليس في الخلفية بشكل خفي.
تشبيه: استدعاء سائق بديل. إذا شربت قليلاً الليلة، يمكنك استدعاء سائق بديل ليوصلك إلى المنزل. السائق لا يقود سيارته الخاصة، بل يقود سيارتك أنت — التي تحتوي على بطاقة المرور السريع، وبطاقة مواقف السيارات في صندوق التخزين، وعنوان منزلك المخزن في نظام الملاحة. يمكنه استخدام كل هذا مباشرة دون الحاجة لإصدار بطاقة جديدة له. ولكن يمكنك استعادة عجلة القيادة في أي وقت: عند الوصول إلى بوابة المجمع التي تتطلب التعرف على الوجه (والتي لا يمكن للسائق تجاوزها)، يتوقف لتدعك تتولى الأمر. تحكم Claude في المتصفح هو بمثابة هذا "السائق البديل" — يقود متصفحك الذي سجل الدخول في كل شيء، ويقوم بالمهام المطلوبة منه، وعند مواجهة صفحة تسجيل دخول أو رمز تحقق (CAPTCHA) لا يستطيع تجاوزه، يتوقف ليناديك.
ما هي المهام المحددة التي يمكنه القيام بها؟ تذكر الوثائق الرسمية قائمة طويلة، اخترت منها ما يهم المبتدئين مع أمثلة للاستخدام الحقيقي:
- تصحيح الأخطاء الفوري: قراءة أخطاء وحدة تحكم المتصفح وحالة DOM مباشرة، ثم العودة لتعديل الكود المسبب للخطأ — وهذا هو الفارق الأكبر بينه وبين MCP، حيث يستطيع "رؤية" ما يحدث في المتصفح.
- التحقق من التصميم: بعد كتابة واجهة المستخدم بناءً على تصميم Figma، افتح المتصفح لمقارنتها والتأكد من مطابقتها (امتداداً لما شرح في الدرس 17 حول مطابقة التصاميم).
- اختبار تطبيقات الويب: اختبار التحقق من صحة النماذج، والتأكد من عدم تشوه المظهر البصري، والتحقق من سلاسة تدفق المستخدم.
- التحكم في التطبيقات المسجل الدخول إليها: الكتابة والتعديل مباشرة في Gmail و Notion و Google Docs دون الحاجة لموصلات API.
- جلب البيانات: استخراج القوائم الموجودة في الصفحة (الأسماء، الأسعار، المخزون) وتحويلها إلى بيانات منظمة وحفظها في ملف CSV محلي.
- تسجيل GIF: تسجيل سلسلة من عمليات المتصفح في ملف GIF، لتوثيق أو مشاركة "كيف حدث هذا الأمر".
أكثر السيناريوهات التي علقت في ذهني: كان هناك خطأ غريب في واجهة أمامية، حيث تعرض وحدة التحكم قيمة undefined عند تحميل الصفحة، وجلست أنظر إلى الكود لنصف ساعة دون معرفة الخطأ. بمجرد ربط Chrome، كتبت جملة واحدة "افتح صفحة dashboard، واقرأ لي الخطأ في وحدة التحكم عند التحميل، ثم حدد الكود المسبب له" — فقرأ الخطأ وتتبع سلسلة الاستدعاءات ليجد مكاناً لم يتم التحقق فيه من القيم الفارغة، كل ذلك في أقل من دقيقتين. في السابق، كان علي فتح F12 بنفسي، ونسخ الخطأ، ولصقه في الطرفية لشرحه، وهو ما يستغرق وقتاً أطول بكثير بمجرد التبديل واللصق.
💡 خلاصة القول في جملة واحدة: يتيح تكامل Chrome لـ Claude استعارة متصفحك الذي سجل الدخول في كل شيء لفتح الصفحات، وقراءة وحدة التحكم، وملء النماذج، وجلب البيانات — لأول مرة، تصبح عمليتا "تعديل الكود" و"التحقق في المتصفح" قابلتين للتنفيذ بالكامل داخل نفس المحادثة.
02 كيف يوزع المهام بينه وبين MCP و computer use
قبل عملية الربط، دعنا نوضح أمراً يسهل الخلط فيه: هناك عدة طرق يلمس بها Claude "العالم الخارجي"، وتكامل Chrome هو مجرد أحدها. لا تخلط بين الطرق الثلاث، وإلا ستحتار في اختيار الأداة المناسبة للمهمة.
تذكر الوثائق الرسمية في صفحة computer use ترتيب الأولويات — فعندما يتعامل Claude مع مهام خارجية، يبدأ من الأداة الأكثر دقة إلى الأداة الأكثر شمولاً:
إذا كان لديك MCP server لتلك الخدمة، فسيستخدمه Claude. وإذا كانت المهمة أمر shell، فسيستخدم Claude أداة Bash. وإذا كانت المهمة عملاً في المتصفح وكنت قد هيأت Claude in Chrome، فسيستخدمه Claude. وإذا لم ينطبق أي مما سبق، فسيستخدم Claude خاصية computer use.
تشبيه: لا تذهب بنفسك لقضاء أمر يمكن إنجازه بمكالمة هاتفية. في نفس الأمر، إذا كان بإمكانك إرسال رسالة لتوضيحه فافعل (الأسرع)، وإذا لم ينفع فأجرِ مكالمة (أبطأ قليلاً)، وإذا لم تنجح المكالمة فاذهب بنفسك (الأبطأ والأكثر جهداً). يتعامل Claude بنفس الترتيب — يجرب الحل الأسهل أولاً، وإذا لم ينفع ينتقل لوسائل أكثر وزناً.
انظر إلى المقارنة بين الطرق الثلاث لتتعرف على مجال عمل كل منها:
| الوسيلة | ماذا تفعل | متى يأتي دورها | هل هذا موضوعنا اليوم |
|---|---|---|---|
| MCP (الدرس 22) | الاتصال بقواعد البيانات و Jira و Slack وغيرها من الخدمات ذات الواجهات | عندما توفر الخدمة MCP server جاهزاً، وهو الأكثر دقة وله الأولوية | لا |
| تكامل Chrome | التحكم في صفحات المتصفح: الضغط، الملء، قراءة وحدة التحكم، وجلب البيانات | عندما تكون المهمة عملية في المتصفح وكنت قد فعلت تكامل Chrome | نعم |
| computer use | التحكم في تطبيقات الكمبيوتر الأصلية: الضغط على تطبيقات macOS، رؤية الشاشة، والتقاط الصور | عندما لا تتوفر الوسائل السابقة (التطبيقات الأصلية، المحاكيات، الأدوات بدون API) | لا، انظر أدناه |
سأذكر computer use (السماح لـ Claude باستخدام كمبيوترك) هنا سريعاً لتكون على علم به. هو أكثر شمولاً ولكنه أبطأ من تكامل Chrome — فتكامل Chrome يتحكم في المتصفح فقط، بينما يستطيع computer use التحكم في سطح مكتب macOS بالكامل: فتح التطبيقات الأصلية، الضغط على أي زر، والتقاط صور لشاشتك. وتقول الوثائق الرسمية:
تم الاحتفاظ بالتحكم في الشاشة للأشياء التي لا يمكن للأدوات الأخرى الوصول إليها: التطبيقات الأصلية، المحاكيات، والأدوات التي لا تملك واجهات API.
يكفي تذكر الفروق الجوهرية التالية (بناءً على الوثائق الرسمية):
- تتوفر خاصية computer use حالياً كنسخة تجريبية بحثية فقط على واجهة سطر الأوامر (CLI) لنظام macOS (يستخدم نظام Windows خط تطبيق سطح المكتب، راجع الدرس 10)، وتتطلب اشتراك Pro / Max، ولا تدعم وضع التفاعل غير المباشر
-p. - تظهر في قائمة
/mcpكـ server مدمج باسمcomputer-use، وتكون مغلقة افتراضياً وتتطلب تفعيلها يدوياً. - تعمل على سطح مكتبك الحقيقي، وتتطلب إعطاء صلاحيات "إمكانية الوصول" و "تسجيل الشاشة" لنظام macOS.
توزيع المهام باختصار: إذا توفرت واجهة استخدم MCP، وللمهام داخل صفحات الويب استخدم Chrome، وإذا تطلب الأمر لمس سطح المكتب الأصلي فاستخدم computer use. ويركز هذا الدرس على الطريق الأوسط — Chrome.
💡 خلاصة القول في جملة واحدة: يلمس Claude العالم الخارجي عبر ثلاثة طرق من الدقة إلى الشمول — MCP (خدمات ذات واجهات) ← Chrome (صفحات ويب) ← computer use (سطح مكتب macOS بالكامل)؛ ويركز هذا الدرس على طريق Chrome المخصص لـ العمليات داخل المتصفح.
03 كيف يتم التوصيل: تثبيت الإضافة، والتشغيل باستخدام --chrome
توصيل تكامل Chrome أسهل من ربط MCP server عادي — حيث يتكون من خطوتين أساسيتين: تثبيت إضافة لـ Chrome، وإضافة المعامل --chrome عند التشغيل. ولكن إذا لم تتوفر الشروط المسبقة، فلن تتمكن من الربط، وسأوضح هذه الشروط أولاً.
مراجعة الشروط المسبقة الأربعة
تذكر الوثائق الرسمية أربعة متطلبات صارمة، وإذا غاب أحدها فلن تتمكن من الاتصال، فراجعها واحدة تلو الأخرى:
| الشرط المسبق | المتطلب المحدد | كيفية التحقق |
|---|---|---|
| المتصفح | Google Chrome أو Microsoft Edge | لا تدعم المتصفحات الأخرى، انظر "قائمة غير المدعومين" أدناه |
| إضافة Chrome | إضافة "Claude in Chrome" بإصدار v1.0.36 أو أعلى | تحقق في chrome://extensions |
| إصدار Claude Code | v2.0.73 أو أعلى | شغّل claude --version في الطرفية |
| الاشتراك | خطة Anthropic المباشرة (Pro / Max / Team / Enterprise) | تحقق من اشتراكك عبر /status |
الشرط الأخير المتعلق بـ الاشتراك هو الأكثر عرضة للوقوع فيه، وسأؤكد عليه بشكل خاص. توضح الوثائق الرسمية:
لا يتوفر تكامل Chrome عبر موفري الخدمات الخارجيين مثل Amazon Bedrock أو Google Cloud Vertex AI أو Microsoft Foundry. إذا كنت تصل إلى Claude عبر موفر خارجي فقط، فستحتاج إلى حساب claude.ai منفصل لاستخدام هذه الميزة.
بالمصطلحات البسيطة: إذا كنت تستخدم واجهات خارجية مثل Bedrock / Vertex / Foundry (المشروحة في الدرس 05)، أو تستخدم مفتاح API فقط، فلن تتمكن من استخدام هذه الميزة — فهي لا تعترف إلا باشتراكات Anthropic المباشرة. وهي تتطابق في هذا مع تطبيق سطح المكتب و computer use.
المتصفحات والبيئات غير المدعومة
لقد أفردت هذه "قائمة غير المدعومين" بشكل خاص، لأن الوقوع فيها قد يسبب حيرة كبيرة:
- المتصفح: يدعم حالياً Chrome و Edge فقط. ولا يدعم Brave و Arc وغيرها من المتصفحات المبنية على Chromium — لا تظن أنها مدعومة لمجرد أنها تستخدم نفس المحرك.
- البيئة: لا يدعم بيئة WSL (Windows Subsystem for Linux). إذا قمت بتشغيل Claude Code داخل WSL وأردت ربطه بمتصفح Chrome على نظام Windows، فإن هذا الطريق غير مدعوم حالياً.
لقد وقعت في هذا الفخ بنفسي. متصفحي اليومي هو Arc (وهو مبني على Chromium أيضاً)، وظننت أنه يمكن استخدامه بمجرد تثبيت الإضافة، ولكن أمر /chrome رفض الاتصال تماماً بالرغم من تثبيت الإضافة وصحة الإصدار. وبعد البحث لنصف ساعة في الوثائق، وجدت ذلك السطر الصغير "لا يدعم حالياً Brave أو Arc أو غيرها من المتصفحات المبنية على Chromium" — ضاع جهدي سدى. بعد ذلك، قمت بتثبيت Chrome بشكل منفصل وخصصته لهذا الغرض، واتصل في ثوانٍ.
تثبيت الإضافة + التشغيل
بمجرد استيفاء الشروط المسبقة، ابدأ بالربط:
الخطوة الأولى: تثبيت إضافة "Claude in Chrome". اذهب إلى متجر سوق Chrome الإلكتروني وابحث عن "Claude" لتثبيتها (يتم تثبيتها من نفس المتجر لمتصفح Edge أيضاً).
يتطلب تثبيت الإضافة والوصول إلى سوق Chrome الإلكتروني عادة استخدام شبكة إنترنت تدعم الوصول للمواقع المحجوبة؛ وتتطلب الإضافة الاتصال بـ Anthropic، لذا لن تعمل إذا كانت الشبكة مقطوعة.
الخطوة الثانية: تشغيل Claude Code باستخدام --chrome. في الطرفية:
claude --chromeأو إذا كنت داخل محادثة بالفعل، اكتب /chrome لتفعيلها دون الحاجة للخروج وإعادة التشغيل.
هاتان هما الخطوتان فقط. بعد الربط، يمكنك كتابة /chrome في أي وقت من أجل: التحقق من حالة الاتصال، إدارة الأذونات، إعادة الاتصال بالإضافة، واختيار المتصفح المتصل للعمل. وإذا كنت قد ربطت متصفحات متعددة في نفس الوقت، فسيقوم Claude بسؤالك عن المتصفح الذي تريد استخدامه في البداية.
لا تريد كتابة --chrome في كل مرة؟
إذا شعرت بالملل من كتابة --chrome في كل جلسة، يمكنك ضبطها كإعداد افتراضي: شغّل /chrome واختر "تفعيل افتراضياً" (Enable by default).
ولكن تذكر التنبيه الرسمي حول التكلفة، وفكر جيداً قبل تفعيله:
يؤدي تمكين Chrome افتراضياً في CLI إلى زيادة استهلاك السياق، لأن أدوات المتصفح يتم تحميلها دائماً. إذا لاحظت زيادة في استهلاك السياق، فقم بتعطيل هذا الإعداد واستخدم
--chromeعند الحاجة فقط.
ببساطة: التفعيل الافتراضي = بقاء أدوات المتصفح محملة في كل محادثة، مما يستهلك جزءاً من سياق المحادثة (كما شرح الدرس 19 أن امتلاء مساحة العمل يجعله بطيئاً). وبشكل عام، الأسلوب الأكثر أماناً هو عدم تفعيله افتراضياً، واستخدام --chrome بشكل مؤقت في المحادثات التي تتطلب استخدام المتصفح فقط — فمعظم مهام تعديل الكود البسيطة لا تحتاج للمتصفح، ولا داعي لجعله يستهلك المساحة طوال الوقت.
وتجدر الإشارة إلى أنه: إذا كنت تعمل بشكل أساسي داخل إضافة VS Code (الدرس 08)، فبمجرد تثبيت إضافة Chrome، ستكون أتمتة المتصفح متاحة للاستخدام مباشرة دون الحاجة لإضافة أي معاملات — وهذا أسهل من واجهة CLI.
من أين تتم إدارة أذونات المواقع
هناك تفصيل آخر: المواقع التي يستطيع Claude تصفحها والضغط عليها والكتابة فيها يتم وراثتها من أذونات إضافة Chrome. وتقول الوثائق الرسمية:
يتم وراثة أذونات مستوى الموقع من إضافة Chrome. قم بإدارة الأذونات في إعدادات إضافة Chrome للتحكم في المواقع التي يستطيع Claude تصفحها والضغط عليها والكتابة فيها.
وهذا يعني أن التحكم في المواقع التي يستطيع لمسها يتم عبر إعدادات إضافة Chrome، وليس من جانب Claude Code. وتعتبر هذه بوابتك الأمنية الأولى، وسنتحدث عن الأمان في القسم التالي.
💡 خلاصة القول في جملة واحدة: يتكون ربط Chrome من خطوتين — تثبيت إضافة "Claude in Chrome" + التشغيل باستخدام
--chrome(أو كتابة/chromeفي المحادثة)؛ ولكن تأكد أولاً من تلبية الشروط الأربعة (المتصفح، إصدار الإضافة، إصدار CC، واشتراك Anthropic)، وتذكر أن متصفحات Brave / Arc وغيرها وبيئات WSL غير مدعومة.
04 حالات استخدام نموذجية: ست فئات من المهام للاقتباس
الربط هو مجرد البداية، والاستخدام الصحيح هو ما يصنع الفارق. توفر الوثائق الرسمية مجموعة من أمثلة سير العمل، وسأختار أهم ست فئات بناءً على احتمال مواجهتك لها، مع تقديم جملة توجيهية يمكنك تعديلها واستخدامها مباشرة. هذه الجمل مكتوبة بلغة طبيعية، ويمكنك تطبيقها على سيناريوهاتك الخاصة.
الحالة الأولى: اختبار تطبيقات الويب المحلية
بعد تعديل ميزة أثناء التطوير، دعه يتحقق منها مباشرة في المتصفح:
我刚改了登录表单的校验逻辑。打开 localhost:3000，
用一组无效数据提交表单，看看错误提示有没有正确出现。سيتوجه إلى خادمك المحلي، ويتفاعل مع النموذج، وينقل لك النتائج التي يلاحظها. وهذا هو الاستخدام الأكثر شيوعاً غالباً — فبعد تعديل الواجهة الأمامية، لا تحتاج للتبديل للضغط يدوياً، بل يختبر هو تدفق التحقق بالنيابة عنك.
الحالة الثانية: تصحيح الأخطاء باستخدام سجلات وحدة التحكم
دعه يقرأ وحدة تحكم المتصفح لمساعدتك في تحديد المشكلة. وهنا نصيحة ذهبية من الوثائق الرسمية: لا تطلب منه "إعطائي كل مخرجات وحدة التحكم" لأن السجلات الطويلة ستملأ الشاشة — بل أخبره بنمط الخطأ الذي تبحث عنه:
打开 dashboard 页面，检查页面加载时控制台里有没有报错。سيقرأ رسائل وحدة التحكم، ويقوم بتصفيتها بناءً على النمط أو نوع الخطأ الذي حددته، دون أن يعرض لك كمية هائلة من السجلات غير المهمة.
الحالة الثالثة: ملء النماذج بشكل جماعي
المهام التكرارية لإدخال البيانات هي الأنسب لإسنادها إليه:
我有一个客户联系人表格在 contacts.csv 里。对每一行，
打开 crm.example.com 的 CRM，点「添加联系人」，
把姓名、邮箱、电话填进去。سيقرأ ملفك المحلي، ويتفاعل مع واجهة الويب، ويدخل البيانات سطراً بسطر. بصراحة، هذه المهام "التكرارية الآلية" هي أفضل مكان يستعرض فيه قوته — فما عليك سوى تجهيز البيانات، ويتولى هو عملية الملء.
الحالة الرابعة: الكتابة مباشرة داخل التطبيقات المسجل الدخول إليها
هذه الحالة توضح ميزة "مشاركة حالة تسجيل الدخول" بشكل رائع:
根据最近的几个 commit 起草一份项目进展更新，
加到我那份 Google Doc（docs.google.com/document/d/abc123）里。سيفتح المستند، ويضغط على المحرر، ويكتب المحتوى هناك. وتعمل هذه الطريقة مع Gmail و Notion و Sheets — وأي تطبيق ويب قمت بتسجيل الدخول إليه بالفعل، دون الحاجة لتهيئة أي واجهات API.
الحالة الخامسة: استخراج البيانات المنظمة من صفحات الويب
تحويل المعلومات المبعثرة في الصفحة إلى بيانات مرتبة ومنظمة:
打开商品列表页，把每件商品的名称、价格、库存状态抽出来，
存成一个 CSV 文件。سيتوجه إلى الصفحة، ويقرأ المحتوى، ويقوم بتجميعه في ملف منظم وحفظه محلياً.
الحالة السادسة: تسجيل GIF للعمليات
إذا أردت أن تشرح لزملائك "كيف تعمل هذه الميزة"، دعه يسجلها:
录一个 GIF，展示怎么走完整个结账流程，
从把商品加进购物车一直到确认页。سيقوم بتسجيل سلسلة التفاعلات وحفظها في ملف GIF. فإرفاق صورة متحركة عند كتابة التوثيق أو فتح issue يوضح الأمر أفضل بكثير من كتابة سطور طويلة من الوصف.
قارن بين هذه الحالات الست وطريقة إنجازها سابقاً لتتعرف على ما توفره من جهد:
| السيناريو | ❌ بدون تكامل Chrome | ✅ مع تكامل Chrome |
|---|---|---|
| التحقق من تعديلات الواجهة | التبديل للمتصفح والضغط يدوياً ورؤية النتيجة ثم العودة للوصف | اطلب منه بجملة واحدة فتح الصفحة وتشغيل التحقق ونقل النتيجة |
| تصحيح أخطاء وحدة التحكم | فتح F12 ونسخ الخطأ ولصقه في الطرفية لشرحه | دعه يقرأ وحدة التحكم مباشرة ويقوم بتصفية الأخطاء |
| إدخال البيانات جماعياً | نسخ ولصق البيانات يدوياً سطراً بسطر داخل المتصفح | إعطاؤه ملف CSV ليتولى هو عملية الملء سطراً بسطر |
| الكتابة في Notion / Docs | صياغة الكلام يدوياً ثم نسخه ولصقه في المستند | دعه يدخل المستند ويكتب مباشرة (بمشاركة حالة تسجيل الدخول) |
تنبيه: يمكنك اختيار claude-in-chrome من قائمة /mcp لرؤية القائمة الكاملة لأدوات المتصفح، وإذا أردت معرفة الحركات المتاحة له في المتصفح فابحث هناك. وتذكر الوثائق الرسمية حالات استخدام أخرى مثل "سير العمل متعدد المواقع"، والتي سنتجاوزها هنا، ويمكنك استكشافها في /mcp ← claude-in-chrome.
💡 خلاصة القول في جملة واحدة: ست حالات استخدام نموذجية — اختبار التطبيقات المحلية، قراءة وحدة التحكم لإصلاح الأخطاء، ملء النماذج جماعياً، الكتابة في التطبيقات المسجلة، استخراج بيانات الصفحات، وتسجيل ملفات GIF توضيحية، وكلها تعمل بجملة توجيهية بسيطة، وجوهرها هو توفير عملية التبديل اليدوي إلى المتصفح.
05 الأمان: أين تكمن مخاطر التحكم في "متصفح حقيقي"
لا يمكن تخطي هذا القسم — لأنه يتحكم في متصفحك الحقيقي المسجل الدخول في كل شيء، وليس في بيئة معزولة تتلاشى بعد الاستخدام. وهذا يمثل حدود ثقة مختلفة تماماً عن تشغيل الأوامر داخل البيئة المعزولة (الدرس 21).
أين تكمن المخاطر بالتحديد
نعود لتشبيه "السائق البديل": السائق يقود سيارتك التي تحتوي على بطاقة المرور السريع وبطاقة المواقف. السهولة والراحة متوفرة بلا شك، ولكن المخاطر حقيقية أيضاً — فهو يقف داخل سيارتك ويستخدم جميع بطاقاتك. وينطبق نفس الأمر على تكامل Chrome: مشاركة حالة تسجيل دخولك تعني أن المواقع التي يستطيع دخولها هي جميع المواقع التي سجلت الدخول فيها — بريدك الإلكتروني، لوحة تحكم الشركة، وصفحات البنك (طالما كنت مسجلاً فيها).
يجب أن تكون على دراية بنوعين من المخاطر بالتحديد:
- حالة تسجيل الدخول بمثابة سلسلة مفاتيح: يستطيع الوصول للمواقع دون الحاجة لإعادة المصادقة، فكل ما سجلت الدخول فيه يمكنه الوصول إليه. عندما تطلب منه الذهاب لصفحة معينة، يجب أن تتذكر الحسابات الحساسة المسجلة في هذا المتصفح.
- حقن التوجيهات (prompt injection): تحدثنا عن هذا بالتفصيل في الدرس 21 — فمحتوى صفحات الويب قد يحتوي على تعليمات خبيثة "مكتوبة للذكاء الاصطناعي". عندما يقرأ صفحة ويب، قد يحتوي النص فيها على تعليمات خفية توجهه للقيام بأمور أخرى. وتعتبر هذه المخاطر حقيقية جداً عند التعامل مع المتصفح، لأنه يقرأ محتويات صفحات خارجية لا تملك السيطرة عليها.
ما هي الحدود الأمنية الرسمية
لحسن الحظ، لا يترك تكامل Chrome الباب مفتوحاً له ليفعل ما يشاء، بل يضع بعض البوابات الأمنية:
- يتوقف ويناديك عند مواجهة تسجيل الدخول أو رمز التحقق: عند الوصول لصفحة تسجيل دخول أو CAPTCHA، فإنه يتوقف مؤقتاً ويطلب منك التدخل يدوياً، ولن يحاول التخمين أو الضغط عشوائياً لتجاوزها.
- العمليات مرئية في الوقت الفعلي: يعمل داخل نافذة Chrome تستطيع رؤيتها، وترى أين يضغط وماذا يكتب طوال الوقت، ويمكنك إيقافه فوراً إذا لاحظت شيئاً غريباً.
- التحكم في أذونات المواقع: كما ذكرنا في القسم السابق، يمكنك تحديد المواقع التي يستطيع لمسها من إعدادات إضافة Chrome — وتعتبر هذه البوابة الأمنية الأهم التي يجب عليك استخدامها لتضييق نطاق عمله.
القواعد التي يجب عليك الالتزام بها
بالإضافة للحدود الأمنية الرسمية، هناك بعض القواعد العملية التي يجدر بك حفظها عند التعامل مع المتصفح الحقيقي:
| السيناريو | ماذا تفعل |
|---|---|
| قبل السماح له بالتحكم في المتصفح | فكر أولاً في الحسابات الحساسة المسجلة داخل متصفح Chrome هذا |
| العمليات المتعلقة بالمال أو العمليات غير القابلة للتراجع (الشراء، التحويل، حذف البيانات) | ⚠️ قم بها بنفسك ولا تسندها إليه، أو راقب كل خطوة بدقة تامة |
| تحديد المواقع المسموح له بلمسها | ✅ قم بتضييقها في إعدادات الإضافة لتشمل المواقع التي يحتاجها فعلاً فقط |
| تصفح صفحات ويب مجهولة أو غير موثوقة | ⚠️ احذر من حقن التوجيهات، ولا تدعه ينفذ "التعليمات" الموجودة في المحتوى بشكل أعمى |
القاعدة العامة هي: كل ضغطة يقوم بها في المتصفح هي ضغطة "حقيقية" — بخلاف البيئة المعزولة حيث يمكنك مسح الحاوية وإعادة تشغيلها عند حدوث خطأ، فالضغط على "تأكيد الدفع" في المتصفح يعني إتمام عملية الدفع فعلياً. لذلك كلما كانت العملية غير قابلة للتراجع أو تتعلق بالمال، يجب عليك إمساك عجلة القيادة بنفسك، واترك له المهام التي يسهل تدارك عواقبها إذا أخطأ فيها.
وهذا يتماشى مع خط الأمان الأساسي في جميع الدروس السابقة: السهولة والراحة تتناسب طردياً مع المخاطر. تكامل Chrome يمنحك سهولة قصوى بمشاركة حالة تسجيل الدخول، ومقابل ذلك يجب عليك إغلاق بوابة "المواقع التي يمكنه لمسها" بإحكام.
💡 خلاصة القول في جملة واحدة: يتحكم تكامل Chrome في متصفحك الحقيقي المسجل الدخول في كل شيء وليس في بيئة معزولة — وتكمن المخاطر في "كون حالة تسجيل الدخول بمثابة مفتاح" وفي "حقن التوجيهات داخل الصفحات"؛ وتشمل الحدود الأمنية الرسمية "التوقف عند مواجهة تسجيل الدخول أو رمز التحقق، ورؤية العمليات، والتحكم في أذونات المواقع"، بينما يجب عليك تضييق نطاق المواقع المسموح بها، وإبقاء العمليات المالية وغير القابلة للتراجع في يدك.
06 العمل: ربط Chrome وجعله يقرأ صفحة مرة واحدة
الكلام بدون تطبيق لا يفيد. سنقوم الآن بتشغيل تطبيق عملي مصغر: ربط Chrome وجعله يفتح صفحة ويب ويقرأ محتواها ويعود به. لن نلمس حساباتك الحساسة، بل سنستخدم صفحة عامة للتحقق من نجاح الاتصال.
الشروط المسبقة: يجب أن تملك اشتراكاً مباشراً من فئة Pro / Max / Team / Enterprise (وليس واجهة Bedrock أو Vertex أو مفتاح API)، وتثبيت متصفح Chrome أو Edge. قد يتطلب تثبيت الإضافة وتصفح المواقع استخدام شبكة تدعم الوصول للمواقع المحجوبة.
الخطوة الأولى: تثبيت إضافة "Claude in Chrome"
اذهب إلى سوق Chrome الإلكتروني وابحث عن "Claude" لتثبيت الإضافة الرسمية. بعد التثبيت، اذهب إلى chrome://extensions وتأكد من تفعيلها وأن إصدارها ≥ 1.0.36.
✅ التحقق الذاتي: تظهر إضافة "Claude" في قائمة الإضافات وتكون في حالة تفعيل.
الخطوة الثانية: التأكد من تحديث إصدار Claude Code
claude --versionالمتوقع: طباعة رقم إصدار ≥ 2.0.73. إذا كان أقل، فقم بالتحديث أولاً (npm update -g @anthropic-ai/claude-code أو بالطرق المشروحة في الدرس 02)، وإلا فلن تتمكن من الربط.
الخطوة الثالثة: التشغيل باستخدام المعامل --chrome
claude --chromeبعد الدخول، اكتب /chrome لرؤية الحالة:
/chromeالمتوقع: يظهر أن Chrome متصل وحالة الإضافة طبيعية. إذا ظهر تنبيه بعدم كشف الإضافة، فاتبع خطوات الاستكشاف الرسمية: تأكد من تثبيت الإضافة وتفعيلها ← تأكد من تحديث CC للإصدار الأخير ← تأكد من تشغيل Chrome ← اختر "إعادة الاتصال بالإضافة" من خيارات /chrome. عند التفعيل لأول مرة، سيقوم بتثبيت إعدادات نقل الرسائل المحلية، ويتطلب ذلك إعادة تشغيل Chrome لقراءتها — فإذا لم يتصل في المرة الأولى، أعد تشغيل Chrome وجرب مجدداً.
الخطوة الرابعة: جعله يفتح الصفحة ويقرأ محتواها
بعد الاتصال، وجه له أمراً يقتصر على القراءة دون لمس أي حسابات حساسة (موقع الوثائق الرسمية هو الأنسب للتدريب):
打开 code.claude.com/docs，点一下搜索框，
输入「hooks」，把出现的结果告诉我。المتوقع: ستشهد علامة تبويب جديدة تفتح في متصفح Chrome الخاص بك وتتوجه للموقع وتضغط على صندوق البحث وتكتب الحروف — كل ذلك أمام عينيك (وهذا هو معنى "العمليات مرئية في الوقت الفعلي" المذكور في القسم 05). ثم يعود ليعرض النتائج التي وجدها في الطرفية. رؤية حركة المتصفح الفعلي وعودة النتائج تعني نجاح الاتصال.
إذا توقف المتصفح عن الاستجابة في منتصف العملية، فتنصح الوثائق الرسمية بالتحقق من وجود صناديق حوار (alert / confirm) تعيق الصفحة — فصناديق حوار JavaScript تعيق أحداث المتصفح؛ أغلقها يدوياً ودعه يستمر. وإذا طالت فترة التوقف وانقطع الاتصال، فاختر "إعادة الاتصال بالإضافة" من خيارات
/chrome(حيث تدخل خدمة الخلفية service worker للإضافة في حالة خمول).
بتشغيل هذه الخطوات الأربع، تكون قد مررت بالمسار الكامل المتمثل في "تثبيت الإضافة ← التشغيل ← التحقق من الاتصال ← جعل الكود يتحكم في الصفحة". وفي المستقبل، ستكون كل المهام التي تطلب منه القيام بها في المتصفح مبنية على هذا المسار، مع تغيير الخطوة الرابعة لتشمل مهمتك الحقيقية.
💡 خلاصة القول في جملة واحدة: يتكون التطبيق العملي من أربع خطوات — تثبيت الإضافة، التشغيل باستخدام
claude --chrome، التحقق من الاتصال عبر/chrome، وتوجيه أمر قراءة بسيط لمشاهدة المتصفح وهو يتحرك فعلياً؛ وإذا لم يتصل في المرة الأولى فغالباً ما يكون السبب عدم تثبيت الإضافة جيداً أو عدم إعادة تشغيل Chrome، فاتبع إرشادات الاستكشاف الرسمية.
07 خلاصة
يوصل هذا الدرس أداة Claude Code بالمتصفح الذي تستخدمه يومياً — لينتقل من مرحلة "التعامل مع الملفات وسطر الأوامر فقط" إلى القدرة على فتح صفحات الويب وقراءة وحدة التحكم وملء النماذج وجلب البيانات، لتصبح عمليتا "تعديل الكود" و"التحقق في المتصفح" قابلتين للتنفيذ داخل محادثة واحدة من البداية وحتى النهاية.
لنلخص النقاط الأساسية معاً:
| ما يجب عليك فعله | النقاط الرئيسية |
|---|---|
| فهم طبيعته | استعارة متصفح Chrome الحقيقي المسجل الدخول في كل شيء، وفتح علامات تبويب جديدة للعمليات، ورؤيتها في الوقت الفعلي |
| التمييز بينه وبين الأدوات الأخرى | MCP (خدمات ذات واجهات) ← Chrome (صفحات ويب) ← computer use (سطح المكتب بالكامل)، ثلاثة طرق من الدقة إلى الشمول |
| الربط والاتصال | تثبيت إضافة "Claude in Chrome" + التشغيل باستخدام المعامل --chrome؛ مع مطابقة إصدارات الإضافة و CC واشتراك Anthropic المباشر |
| التعرف على غير المدعومين | لا يدعم Brave / Arc وغيرها من متصفحات Chromium، ولا يدعم بيئة WSL، ويدعم Chrome / Edge فقط |
| حالات الاستخدام | اختبار التطبيقات المحلية، قراءة وحدة التحكم، ملء النماذج جماعياً، الكتابة في التطبيقات المسجلة، استخراج البيانات، وتسجيل ملفات GIF |
| الحفاظ على الأمان | يتعامل مع متصفح حقيقي (وليس بيئة معزولة): حدد أذونات المواقع، وقم بالعمليات المالية وغير القابلة للتراجع بنفسك، واحذر من حقن التوجيهات |
يجب أن تكون قادراً الآن على: شرح تكامل Chrome وكيف يوزع المهام بينه وبين MCP و computer use، وتوصيله بنفسك (تثبيت الإضافة + --chrome)، وتوجيه أوامر بلغة طبيعية ليقوم بست فئات من مهام المتصفح الشائعة، ومعرفة المخاطر المترتبة على استخدام المتصفح الحقيقي والقواعد الأمنية الواجب اتباعها. بهذا الربط، يخطو Claude Code خطوة أخرى للأمام ليتحول من "مساعد أكواد محلي" إلى القدرة على التحكم في النافذة التي تتعامل معها باستمرار.
الدرس القادم 41 "المهام المتوازية" — في هذا الدرس جعلنا Claude قادراً على التحكم في المتصفح، ولكن عند تراكم المهام، ستجد أن تنفيذها بالتوالي داخل محادثة واحدة لا يزال بطيئاً: فعندما يفتح المتصفح لاختبار ميزة A، تظل الميزتان B و C في حالة انتظار. الدرس القادم يطرح فكرة جديدة: كيف تجعل المهام المتعددة تسير بالتوازي بشكل حقيقي، ليعمل كل منها بشكل منفصل ودون تداخل. فكر في الأمر: إذا كان تعديل الواجهة الأمامية، وتشغيل الاختبارات، وجلب البيانات تتم في نفس الوقت بدلاً من انتظار دورها خلف Claude واحد، ألا يوفر ذلك المزيد من الوقت؟