[ درس ] برمجة إضافات جوجل كروم

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

قبل أن نبدأ،دعونا نتعرف على بنية إضافات جوجل كروم أوﻻ ثم ننتقل بعدها إلى كيف تتم البرمجة.عليك أن تقوم اﻵن يتفعيل Developer Mode من صفحة الإضافات:افتح المتصفح و اكتب في العنوان:

chrome://extensions

أو توجه إلى Tools ثم اختر Extensions

ثم نختار Load unpacked extension و لكن هذا بعد أن ننهي عملية البرمجة حتى ﻻ نضطر إلى رفعها إلى متجر إضافات جوجل كروم في كل مرة نقوم بالتعديل على الإضافة.
الآن لنتعرف على بنية إضافات جوجل كروم:دعونا نرى الصورة الموالية

تتكون إضافات جوجل كروم من جزئين رئيسيين:الجزء البرمجي و واجهة المستخدم،و سنبدأ بالجزء البرمجي،و الذي بدوره ينقسم إلى ثلاثة أجزاء رئيسية:

manifest.json :و هو ملف أساسي ﻷي إضافة،يحوي هذا الملف على معلومات مهمة عن الإضافة،كإسم الإضافة،رقم الإصدار و وصف الإضافة و يمكن أن يحوي العديد من المعلومات الأخرى،يمكنك الإطلاع عليها من هنا.دعونا نأخذ مثاﻻ بسيطا
رمز Code:
{

"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: هي إصدار "محرك" المتصفح،و ضعه دائما 2



browser_action:هي تعريف ببعض الخصائص
default_title: التسمية التي تظهر في المتصفح
default_popup: و تمثل ملف واجهة الإضافة

Background Files: أو الملفات الأساسية و يمكن أن نعتبرها القلب النابض للإضافة و التي تحوي الأكواد البرمجية الأساسية لها،و تنقسم إلى قسمين:
persistent: أو الأكواد الأساسية التي يتم تشغيلها بمجرد فتح المتصفح و تبقى في حالة العمل ما دام المتصفح شغاﻻ
event:أو اكواد اﻷحداث و يتم تشغيلها عند حدث معين كأن يطلب المستخدم القيام بشيء معين من الإضافة.يتم تعريف كلا النوعين في ملف manifest.json كالتالي:
رمز Code:
"background": {
"scripts": ["background.js"],
"persistent": false/true
}
Script : تمثل مكان تواجد الملف الذي يحوي الأكواد أما Persistent فهي خيار منطقي إما مفعل أو غير مفعل،سنفصل في هته الجزئية في الدروس المقبلة بحول الله.

Content Script: و نعني بها في أي مكان سيتم تشغيل الإضافة،فهنالك إضافات ﻻ تعمل إﻻ في موقع واحد مثل إضافة موقع ميجا الخاص بالرفع فهي ﻻ تعمل إﻻ عندما تتصفح الموقع أو تقوم أنت بفتحها يدويا و هنالك إضافات تعمل مع جميع المواقع دون استثناء،يتم تعريف ذلك أيضا في ملف manifest.json كالتالي:
رمز Code:
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["content.js"]
}
]
نكتفي بهذا القدر حتى ﻻ نعقد الأمور على المبتدئين،و سنكمل سويا في الدروس المقبلة بحول الله.
ﻻ تنسوا مشاركة الدرس مع الأصدقاء،دمتم بود،سلام
الموضوع منقول: الموضوع الأصلي







أكثر...