لتبقى على اطلاع

- 1st -

كيفية كتابة إضافة كروم الأساسية وإنشاءها

كيفية كتابة إضافة كروم الأساسية وإنشاءها

4

كروم هو متصفح الويب الأكثر شعبية على هذا الكوكب. وذلك وفقا لإحصائيات مسح حصة المتصفح في السوق حيث يأخذ كروم ما نسبته 65% من السوق    في متصفحات سطح المكتب اعتبارا من أواخر عام 2017.

مع هذا النوع من القوة في السوق، أصبح لتصميم كروم أولوية كبيرة. وينطبق الشيء نفسه على الإضافات: يقدم كروم أكبر قاعدة مستخدمين للإضافات إلى حد كبير، مع ملء عشرات الآلاف من الإضافات والمظاهر والتطبيقات في سوق كروم الإلكتروني.

فإذا كنت ترغب في الحصول على النقد في هذا الاتجاه، يمكنك بناء ملحق كروم الأساسي الخاص بك. ستحتاج فقط  إلى بعض المهارات الأساسية لتطوير الشبكة (HTML، CSS، Javascript )، فضلا عن معرفة بسيطة من JSON لربط كل ذلك معا.

سنراجع البنية الأساسية المطلوبة لإنشاء إضافة أساسية في كروم في هذه المشاركة. للحصول على نظرة متعمقة للإمكانيات المتاحة،بإمكانك عزيزي القارئ مراجعة دليل إضافات مطوري برامج كروم.

كتابة ملحق كروم الأساسي:

بالنسبة إلى هذا البرنامج التعليمي، سنعمل على إنشاء إضافة كروم أساسية تعرض رسالة منبثقة بسيطة عند النقر عليها. سنحتاج إلى ملفين مهمين: رمز (“icon.png”)، وملف HTML (“popup.html”) والبيان الهام (“manifest.json”). كل هذه الملفات سوف تعيش داخل دليل مع اسم إضافتك. في هذه الحالة يسمى “مرحبا العالم” (مثال).

يتم تعريف إضافة كروم حسب بيانها. يعرض هذا المقتطف من  JSONيظهر كيفية تفسير إضافة كروم، وما هي الملفات التي سيتم تحميلها، وكيفية التفاعل مع المستخدم.

إن ملف البيان لإضافتنا الأساسية جدا يبدو كما يلي:

{
    "manifest_version": 2,
 
    "name": "Hello World!", 
    "description": "My first Chrome extension.",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab"
     ]
}

سيقوم ملف البيان هذا بوضع رمز في شريط أدوات المستخدم الذي يقوم عند تحميله بتحميل محتويات الملف المسمى “popup.html”. فيما يلي المحتويات النادرة على بقية المحتويات:

– يخبرك manifest_version كروم عن إصدار ترميز البيان الذي تعمل معه. بالنسبة إلى الإضافات الحديثة، ستحتاج إلى تعيين هذا الإعداد على 2.

– يعرض الاسم وهو الاسم الذي ستظهره الإضافة في متجر كروم و ” chrome ://extentions “.

– يعرض الوصف النص وهو الوصفي المعروض على ” chrome ://extentions “.

– يعمل المتصفح على تحميل الرمز في شريط الأدوات. كما أنه يسمح للإرشاد بالرد على إدخال المستخدم عن طريق عرض تلميح أو نافذة منبثقة أو شارة. تحقق من قائمة كاملة من كل شيء “browser_action” يمكن القيام به.

– default_icon يوضح المسار إلى الرمز من دليل الإضافة.

– default_popup يعرض مسار الملف الذي سيتم تحميله عند النقر فوق رمز الإضافة.

– permission تحديد المنطقة الوظيفية للتمديد. activeTab هو الأكثر شيوعا، مما يتيح التمديد للوصول إلى علامة التبويب الجبهة الأكثر. توفر جوجل قائمة بجميع الأذونات التي يمكن أن تطلبها إحدى الإضافات.

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

كتابة إضافة كروم الأساسية: بالنوافذ المنبثقة

الآن بعد أن كتبنا بياننا، يمكننا معرفة ما سيتم عرض تمديد لدينا. هذا الأمر يرجع إلى ملف “popup.html” الذي سيتم عرضه عند تحميل الإضافة. إليك ما سنستخدمه لهذا المشروع:

<!doctype html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <style type="text/css">
	body {
            margin: 5px;
        }
	h1 {
	    font-size: 15px;
	    text-align: center;
        }
    </style>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

كتابة إضافة كروم الأساسية: التحميل إلى كروم

بعد أن نكتب الشفرة الأساسية لإضافتنا ونجد رمز مناسب، يمكننا تحميله في كروم.

  1. انتقل إلى” chrome ://extentions” وتشغيل “Developer Mode” عن طريق وضع علامة في مربع الاختيار في أعلى يمين.

  1. انقر على الزر “Load unpacked extension.. وحدد دليل الإضافة.

  1. بعد تحميل الإضافة، سترى رمزها في شريط القوائم.

  1. انقر على التمديد لمعرفة تأثيره .

توسيع إضافة كروم :

بعد الانتهاء من إضافتك وتصبح جاهزة للنشر، ستحتاج إلى إنشاء حساب مطور برامج كروم. هذه ليست عملية واضحة تماما، كما توفر جوجل إرشادات كاملة لنشر إضافة كروم.

إذا كنت تريد معرفة المزيد حول كل ما يمكن لإضافات كروم فبإمكانك الاطلاع على دليل إضافات مطوري برامج كروم من جوجل.

- الإعلانات -

تعليقات
تحميل...