كيفيه برمجه اضافات جوجل كروم (الجزء الاول) / Google Extension

كيفيه برمجه اضافات جوجل كروم (الجزء الاول) / Google Extension

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

قبل أن نبدأ،دعونا نتعرف على بنية إضافات جوجل كروم أوﻻ ثم ننتقل بعدها إلى كيف تتم البرمجة.عليك أن تقوم اﻵن يتفعيل 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: هي إصدار "محرك" المتصفح،و ضعه دائما 2
browser_action:هي تعريف ببعض الخصائص
default_title: التسمية التي تظهر في المتصفح
default_popup: و تمثل ملف واجهة الإضافة





Background Files: أو الملفات الأساسية و يمكن أن نعتبرها القلب النابض للإضافة و التي تحوي الأكواد البرمجية الأساسية لها،و تنقسم إلى قسمين:
persistent: أو الأكواد الأساسية التي يتم تشغيلها بمجرد فتح المتصفح و تبقى في حالة العمل ما دام المتصفح شغاﻻ
event:أو اكواد اﻷحداث و يتم تشغيلها عند حدث معين كأن يطلب المستخدم القيام بشيء معين من الإضافة.يتم تعريف كلا النوعين في ملف manifest.json كالتالي:

كود:

"background": {
    "scripts": ["background.js"],
    "persistent": false/true
}

Script : تمثل مكان تواجد الملف الذي يحوي الأكواد أما Persistent فهي خيار منطقي إما مفعل أو غير مفعل،سنفصل في هته الجزئية في الدروس المقبلة بحول الله.

Content Script: و نعني بها في أي مكان سيتم تشغيل الإضافة،فهنالك إضافات ﻻ تعمل إﻻ في موقع واحد مثل إضافة موقع ميجا الخاص بالرفع فهي ﻻ تعمل إﻻ عندما تتصفح الموقع أو تقوم أنت بفتحها يدويا و هنالك إضافات تعمل مع جميع المواقع دون استثناء،يتم تعريف ذلك أيضا في ملف manifest.json كالتالي:
"content_scripts": 

كود:

[
    {
        "matches": ["http://*/*", "https://*/*"],
        "js": ["content.js"]
    }
]

المصدر مدونة المبرمج الاردني 

كيفيه برمجه اضافات جوجل كروم (الجزء الثاني) / Google Extention