إضافات جوجل كروم (Chrome Extensions) أدوات صغيرة تضيف إلى المتصفح ميزات تحتاجها يوميًا وأنت تبرمج. منها ما يكشف التقنيات التي بُني بها موقع، ومنها ما يعرض بيانات JSON بشكل مرتب، ومنها ما يفحص سهولة الوصول (Accessibility). جمعنا لك هنا 10 إضافات مفيدة فعلًا، وذكرنا متى تحتاج كل واحدة، والأدوات الموجودة داخل المتصفح التي تغنيك عن تثبيت بعضها.
لماذا تحتاج إضافات كروم وأنت مبرمج؟
أدوات المطور المدمجة في كروم (Chrome DevTools) قوية جدًا، لكنها لا تغطي كل شيء. بعض المهام تتكرر عشرات المرات في اليوم، مثل التقاط لون من صفحة أو قراءة استجابة API طويلة، والإضافة المناسبة توفر عليك هذه الخطوات.
القاعدة بسيطة: ثبّت الإضافة التي تحل مشكلة تواجهها فعلًا، ولا تثبّت إضافة لمجرد أنها مشهورة. كل إضافة زائدة تبطئ المتصفح قليلًا، وتحصل على صلاحيات على الصفحات التي تزورها.
أفضل 10 إضافات جوجل كروم للمبرمجين
1. Web Developer
من أقدم إضافات المطورين وأشملها، وما زالت تُحدَّث حتى اليوم. تضيف إلى المتصفح شريط أدوات فيه عشرات الوظائف، منها:
- تعطيل CSS أو JavaScript أو الصور لترى كيف تبدو الصفحة بدونها.
- رسم حدود حول العناصر لفهم تخطيط الصفحة (Layout).
- عرض الكوكيز (Cookies) ومعلومات النماذج والروابط.
- تغيير حجم النافذة بسرعة، وإرسال الصفحة إلى أدوات التحقق من صحة HTML وCSS.
2. React Developer Tools
إن كنت تعمل بمكتبة React فهذه الإضافة أساسية. تضيف إلى أدوات المطور تبويب Components لاستعراض شجرة المكونات وقراءة الخصائص (Props) والحالة (State) لكل مكوّن وتعديلها مباشرة، وتبويب Profiler لمعرفة المكونات التي يُعاد رسمها أكثر من اللازم. لو كنت في بداية طريقك مع React فابدأ من مسار الدليل الشامل لتعلم React من الصفر.
3. Wappalyzer
تكشف لك التقنيات المستخدمة في أي موقع تزوره: نظام إدارة المحتوى (CMS)، وإطار العمل (Framework)، وأدوات التحليلات، والخادم، ومكتبات JavaScript وغيرها. مفيدة جدًا عندما تريد أن تعرف كيف بنت شركة ما منتجها، أو عندما تستلم مشروعًا قديمًا وتريد فهمه بسرعة. الإضافة الأساسية مجانية، وبعض الميزات المتقدمة تتطلب اشتراكًا.
4. JSON Viewer
عندما تفتح رابط API في المتصفح تظهر البيانات غالبًا كسطر طويل يصعب قراءته. تعرض JSON Viewer هذه البيانات على شكل شجرة منظمة مع تلوين للصيغة (Syntax Highlighting)، وتتيح لك طي الأجزاء وفتحها. هذا يسهّل عليك فهم بنية البيانات القادمة من واجهات البرمجة (APIs) واكتشاف الحقول الناقصة أو الخاطئة.
5. Eye Dropper أو ColorZilla
تلتقط بهما لون أي نقطة في الصفحة وتنسخه بصيغة HEX أو RGB. يفيدك ذلك عندما تنقل تصميمًا أو تحاول مطابقة ألوان موقع موجود. ستجد أيضًا أداة التقاط ألوان داخل أدوات المطور، لكن الإضافة أسرع حين تحتاج اللون من أي مكان في الصفحة دون فتح DevTools.
6. Stylebot
تتيح لك كتابة قواعد CSS خاصة بموقع معين، وتبقى هذه القواعد مطبقة كلما زرت الموقع. استخدمها لتجربة تعديلات تصميم سريعة قبل نقلها إلى الكود، أو لتحسين قراءة موقع تستخدمه كثيرًا، كتكبير الخط أو إخفاء عناصر تشتتك.
7. axe DevTools
تضيف تبويبًا داخل أدوات المطور يفحص الصفحة بحثًا عن مشكلات سهولة الوصول، مثل الصور بلا نص بديل (alt)، أو التباين الضعيف بين النص والخلفية، أو حقول النماذج بلا عناوين. تشرح الإضافة كل مشكلة وطريقة إصلاحها، فتتعلم منها وأنت تعمل. النسخة المجانية تكفي معظم الاحتياجات.
8. Mobile Simulator
تعرض موقعك داخل إطارات تحاكي هواتف وأجهزة لوحية مختلفة. المحاكاة الأساسية متوفرة في أدوات المطور عبر وضع الأجهزة (Device Mode)، الذي تفتحه بالاختصار Ctrl+Shift+M على ويندوز ولينكس أو Cmd+Shift+M على ماك بعد فتح DevTools. ميزة الإضافة أنها تعرض الصفحة داخل إطار جهاز حقيقي الشكل، وهذا مفيد حين تعرض العمل على عميل.
9. Visualping
تراقب جزءًا تحدده من أي صفحة، وتنبهك عبر البريد الإلكتروني حين يتغير. يستفيد منها المبرمج في متابعة صفحة توثيق مكتبة يعتمد عليها، أو صفحة إعلانات الوظائف في شركة يهتم بها، أو صفحة حالة خدمة خارجية. بعض الميزات وعدد مرات الفحص يتطلبان اشتراكًا.
10. Lorem Ipsum Generator
تولد نصًا وهميًا بالطول الذي تريده لتملأ به التصميم أثناء العمل. إضافة بسيطة، لكنها تختصر عليك البحث عن نص تجريبي كلما بنيت صفحة جديدة. إن كنت تستخدم VS Code فاكتب lorem ثم اضغط Tab لتحصل على النتيجة نفسها عبر Emmet.
مقارنة سريعة بين الإضافات
| الإضافة | الاستخدام الأساسي | تحتاجها إن كنت |
|---|---|---|
| Web Developer | أدوات فحص وتعديل عامة للصفحة | أي مطور ويب |
| React Developer Tools | فحص المكونات والحالة والأداء | تعمل بمكتبة React |
| Wappalyzer | كشف تقنيات المواقع | تحلل مواقع أو تستلم مشاريع جاهزة |
| JSON Viewer | عرض بيانات JSON منظمة | تتعامل مع APIs |
| Eye Dropper / ColorZilla | التقاط الألوان | تنفذ تصميمات |
| Stylebot | CSS مخصص لكل موقع | تجرب تعديلات تصميم سريعة |
| axe DevTools | فحص سهولة الوصول | تهتم بجودة واجهاتك |
| Mobile Simulator | عرض الموقع في إطارات أجهزة | تعرض أعمالك على عملاء |
| Visualping | مراقبة تغيّر الصفحات | تتابع توثيقًا أو خدمات خارجية |
| Lorem Ipsum Generator | توليد نص تجريبي | تبني صفحات جديدة كثيرًا |
أدوات صارت مدمجة في المتصفح ولم تعد تحتاج إضافة لها
بعض الإضافات التي كانت شائعة قبل سنوات صار لها بديل مدمج يكفي في أغلب الحالات:
- فحص أنماط CSS: كانت إضافات مثل CSSViewer تعرض خصائص العنصر عند المرور عليه. اليوم يعطيك لوحا Styles وComputed في أدوات المطور كل ذلك، مع إمكانية التعديل المباشر.
- تصفح مستودعات GitHub: كانت Octotree تضيف شجرة ملفات بجانب المستودع، والآن يعرض GitHub شجرة الملفات بنفسه في صفحة الكود.
- قياس الأداء: أداة Lighthouse موجودة داخل أدوات المطور، وتقيس الأداء وسهولة الوصول وتحسين محركات البحث (SEO) دون أي إضافة.
إتقان أدوات المطور نفسها يغنيك عن نصف الإضافات المنتشرة. وإن أردت أن تبني أساسًا قويًا في هذا الجانب فاطلع على دبلومة تعلم البرمجة والـ Frontend من الصفر.
كيف تستخدم الإضافات بأمان
الإضافة برنامج يعمل داخل متصفحك، وقد يرى كل صفحة تفتحها. لذلك اتبع هذه القواعد:
- ثبّت من متجر Chrome Web Store فقط، وراجع عدد المستخدمين والتقييمات وتاريخ آخر تحديث.
- اقرأ الصلاحيات المطلوبة: إضافة لالتقاط الألوان لا تحتاج قراءة سجل التصفح.
- فعّل الإضافة عند الحاجة فقط: من إعدادات الإضافة يمكنك ضبطها لتعمل عند النقر عليها أو على مواقع محددة.
- خصص ملفًا شخصيًا (Profile) للتطوير في كروم، منفصلًا عن ملف حساباتك الشخصية والبنكية.
- احذف ما لا تستخدمه، وانتبه للإضافات المهجورة: انتقل كروم إلى نظام الإضافات Manifest V3، والإضافات القديمة التي لم يحدّثها أصحابها قد تتوقف عن العمل.
الخلاصة
لا تحتاج عشرات الإضافات لتكون مبرمجًا منتجًا. ابدأ بأدوات المطور المدمجة في كروم وأتقنها، ثم أضف الإضافات التي تحل مشكلة متكررة في عملك: React Developer Tools إن كنت تعمل بـ React، وJSON Viewer إن كنت تتعامل مع APIs، وaxe DevTools لتتأكد أن واجهاتك يستطيع الجميع استخدامها. راجع قائمة إضافاتك كل فترة، واحتفظ فقط بما تستخدمه فعلًا. وإن كانت JavaScript هي خطوتك التالية فابدأ من مسار تعلم JavaScript من الصفر حتى الاحتراف.
أسئلة شائعة
هل يمكنني استخدام إضافات جوجل كروم في أي نوع من التطوير؟
معظم هذه الإضافات موجهة لتطوير الويب، لكن بعضها مفيد لأي مبرمج، مثل JSON Viewer لمن يتعامل مع APIs من تطبيقات الموبايل أو الخوادم، وVisualping لمتابعة التوثيق. تختلف الفائدة حسب الأدوات التي تعمل بها، فاختر ما يناسب مشروعك.
هل إضافات جوجل كروم مجانية؟
معظمها مجاني ومتاح في متجر Chrome Web Store. بعضها يقدم نسخة مجانية وميزات إضافية باشتراك، مثل Wappalyzer وVisualping وaxe DevTools.
هل تبطئ الإضافات المتصفح؟
كل إضافة تستهلك قدرًا من الذاكرة، وبعضها يعمل على كل صفحة تفتحها. لهذا يُفضل الاكتفاء بالإضافات التي تستخدمها، وضبطها لتعمل عند النقر عليها فقط.
هل تعمل هذه الإضافات على متصفحات أخرى؟
المتصفحات المبنية على Chromium، مثل Microsoft Edge وBrave وOpera، تدعم في الغالب إضافات متجر كروم. ولكثير من الإضافات المذكورة نسخ رسمية لمتصفح Firefox أيضًا.
