كيف تقوم بتصميم وبرمجه اضافات متصفح جوجل كروم.

السلام عليكم ورحمة الله وبركاتة

اهلا ومرحبا بكم متابعينا ومتابعين مدونه ايجي جيك | EgyGeek في موضوع جديد علي المدونه

متصفح جوجل كروم أصبح من أفضل المتصفحات على الإطلاق لما يوفره من أدوات و إضافات تسهل عملية التصفح و تجعل من تطوير الويب أمرا ممتعا بكل المقاييس.


ﻻ شك في أنك جربت إضافات متصفح جوجل كروم من قبل ومهما كانت هذه الإضافة فلا بد أنك تساءلت كيف تمت عملية برمجة و تطوير هذه الإضافات هل هذه العملية صعبة؟ ما هي لغات البرمجة التي علي تعلمها حتى استطيع برمجة إضافات جوجل كروم الخاصة بك؟
إن كنت مطور مواقع ويب فلن تحتاج لتعلم أية لغة برمجة أخرى فإضافات متصفح جوجل كروم تتم برمجتها عن طريق لغات الويب الثلاثة: HTML و CSS و JavaScript ﻻ غير ولكن عليك اتقان هذه اللغات بشكل جيد.
الان دعونا نتعرف على بنية إضافات جوجل كروم أوﻻ ثم ننتقل بعدها إلى كيف تتم البرمجة.عليك أن تقوم اﻵن يتفعيل Developer Mode من صفحة الإضافات : افتح المتصفح و اكتب في العنوان:


ثم ضع علامه صح علي Developer Mode

chrome://extensions
أو توجه إلى Tools ثم اختر Extensions

ثم نختار Load unpacked extension و لكن هذا بعد أن ننهي عملية البرمجة حتى ﻻ نضطر إلى رفعها إلى متجر إضافات جوجل كروم في كل مرة نقوم بالتعديل على الإضافة.
الآن لنتعرف على بنية إضافات جوجل كروم
تتكون إضافات جوجل كروم من جزئين رئيسيين : الجزء البرمجي و واجهة المستخدم وسنبدأ بالجزء البرمجي والذي بدوره ينقسم إلى ثلاثة أجزاء رئيسية:
manifest.json : و هو ملف أساسي ﻷي إضافة،يحوي هذا الملف على معلومات مهمة عن الإضافة كإسم الإضافة رقم الإصدار و وصف الإضافة و يمكن أن يحوي العديد من المعلومات الأخرى دعونا نأخذ مثاﻻ بسيطا لمحتويات الملف :{
"name": "BrowserActionExtension",
"version": "0.0.1",
"manifest_version": 2,
"browser_action": {
"default_title": "That's the tool tip",
"default_popup": "popup.html"
}
}[#] - شرح كل سطر على حدى:
name :و هو اسم الإضافةversion : إصدار الإضافةmanifest_version: هي إصدار "محرك" المتصفح،و ضعه دائما 2browser_action:هي تعريف ببعض الخصائصdefault_title: التسمية التي تظهر في المتصفحdefault_popup: و تمثل ملف واجهة الإضافة
=====================================
"background": {"scripts": ["background.js"],"persistent": false/true}
[#] - Background Files : أو الملفات الأساسية و يمكن أن نعتبرها القلب النابض للإضافة و التي تحوي الأكواد البرمجية الأساسية لها،و تنقسم إلى قسمين:
- persistent : أو الأكواد الأساسية التي يتم تشغيلها بمجرد فتح المتصفح و تبقى في حالة العمل ما دام المتصفح شغاﻻ
- event : أو اكواد اﻷحداث و يتم تشغيلها عند حدث معين كأن يطلب المستخدم القيام بشيء معين من الإضافة.يتم تعريف كلا النوعين في ملف manifest.json:
Script : تمثل مكان تواجد الملف الذي يحوي الأكواد أما Persistent فهي خيار منطقي إما مفعل أو غير مفعل.
=============================
"content_scripts": [{"matches": ["http://*/*", "https://*/*"],"js": ["content.js"]}]
[#] - Content Script : و نعني بها في أي مكان سيتم تشغيل الإضافة فهنالك إضافات ﻻ تعمل إﻻ في موقع واحد مثل إضافة موقع ميجا الخاص بالرفع فهي ﻻ تعمل إﻻ عندما تتصفح الموقع أو تقوم أنت بفتحها يدويا و هنالك إضافات تعمل مع جميع المواقع دون استثناء يتم تعريف ذلك أيضا في ملف manifest.json :
نكتفي بهذا القدر ولمن يحب ان يتعلم برمجه اضافات جوجل كروم فهذا كورس ممذاز جدا لبرمجه وتصميم هذه الاضافات
رابط الكورس : من هنا

اذا اعجبك المقال واستفدت منه فلا تبخل علينا بعمل مشاركه للمقال ولايك لصفحتنا علي الفيس بوك واشتراك في قناتنا علي اليوتيوب ليصلك كل ما هو جديد من المدونه من مقالات وحلقات

مشاركة الموضوع

مواضيع ذات صلة

تحميل ...

عن الكاتب

عبدالرازق قنديل

خطأ فى التحميل ! , ربما تكون المدونة غير عامة أو متاحة لمؤلفو المدونة فقط أو قد تكون خلاصة المدونة معطلة , من فضلك قم بجعل المدونة عامة و السماح بخلاصة المدونة كاملة لتفعيل هذه الإضافة.

من مواضيعى