اذهب إلى المحتوى

السؤال

Recommended Posts

  • 0
نشر

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

سأعطيك مثال حول ذلك، متصفح قوقل كروم

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

عليك أن تقوم اﻵن يتفعيل Developer Mode من صفحة الإضافات:افتح المتصفح و اكتب في العنوان:

chrome://extensions
 
1956.thumb.png.8832f1b35effd4e47e5c9b3f0
 
ثم نختار Load unpacked extension و لكن هذا بعد أن ننهي عملية البرمجة حتى ﻻ نضطر إلى رفعها إلى متجر إضافات جوجل كروم في كل مرة نقوم بالتعديل على الإضافة.
الآن لنتعرف على بنية إضافات جوجل كروم:دعونا نرى الصورة الموالية
 
1957.thumb.png.369f3a6ee37ed8de3a54c8fe3
 
تتكون إضافات جوجل كروم من جزئين رئيسيين:الجزء البرمجي و واجهة المستخدم،و سنبدأ بالجزء البرمجي،و الذي بدوره ينقسم إلى ثلاثة أجزاء رئيسية:

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"]
    }
]

هذه نبذة طفيفة حول هذا الموضوع يمكنك اتباع دورات عبر الانترنت ستجد كل ما تحتاجه ان شاء الله

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...