كيفية إنشاء ملحق كروم

في هذه المقالة ، سأعلمك كيفية إنشاء ملحق Chrome خاص بك. أقوم باستبعاد الدروس المستفادة أثناء إنشاء TalkToMe ، وهو امتداد Chrome يساعد المعاقين بصريًا عن طريق قراءة محتوى موقع الويب والانتقال إلى صفحات الويب الأخرى.

سأغطي أساسيات إعداد امتدادك ، بما في ذلك:

  • تكوين الملفات للإعداد
  • احصل على استعداد لوضعه في متجر Chrome
لن أغطي كيفية إدارة ميزات الصوت ، مثل معالجة أذونات الميكروفون. تم تغطية هذا في هذه المقالة بواسطة صديقي Palash ويستخدم أيضًا ملحق TalkToMe كمثال.

تكوين الملفات للإعداد

أولاً ، انتقل إلى chrome: // extensions في متصفحك ، أو ببساطة انقر على "أدوات إضافية" و "ملحقات" في قائمة Chrome. يجب أن يقودك هذا إلى صفحة إدارة الامتداد ، حيث يمكنك تشغيل وضع المطور (يجب أن يكون في الزاوية اليمنى العليا).

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

{
    "الاسم": "مثال على امتداد Chrome" ،
    "الإصدار": "1.0" ،
    "الوصف": "بناء امتداد!" ،
    "manifest_version": 2
}

لتحميل دليلك إلى صفحة إدارة الامتداد ، انقر فوق الزر "تحميل تفريغ" وحدد الدليل الخاص بك. سيؤدي هذا إلى ربط ملفاتك بـ UI المستندة إلى الويب.

الملف المهم الآخر الذي سيتعين عليك تهيئته هو background.js ، وهو البرنامج النصي الأساسي لمشروعك.

يحتوي نموذج البرنامج النصي للخلفية على هذا النوع من البنية:

chrome.runtime.onInstalled.addListener (function () {
    / / أضف إجراء هنا
})؛

سيتم تشغيله دائمًا أثناء تشغيل الملحق الخاص بك ومفيد للاستماع إلى أحداث مختلفة ، مثل مكابس لوحة المفاتيح أو للانتقال إلى صفحات مختلفة.

يمكنك حتى الحصول على نصوص خلفية متعددة. تحتاج فقط إلى تسجيل كل منهم في ملف البيان الخاص بك أولاً. للقيام بذلك ، ما عليك سوى هيكلة manifest.js مثل هذا ، وهو ما يبدو عليه الملف الظاهر في ملحقنا:

{
    "الاسم": "مثال على امتداد Chrome" ،
    ...
    "خلفية": {
        "نصوص": [
            "شبيبة / ES6-promise.auto.min.js"
            "شبيبة / defaults.js"
            "شبيبة / speech.js"
            "شبيبة / document.js"
            "شبيبة / events.js"
            "شبيبة / stt.js"
            "شبيبة / listen.js"
        ]،
        "مستمر": خطأ
    }
}

الآن ، ستحتاج إلى ملف ليس فقط لوظيفة امتدادك ، ولكن أيضًا إلى واجهة المستخدم. للقيام بذلك ، قم بإنشاء ملف يسمى popup.html. النافذة المنبثقة هي نافذة صغيرة تظهر بمجرد النقر على أيقونة الامتداد. على سبيل المثال ، إليك النافذة المنبثقة لملحق Cookie Manager Firefox.

يمكن أن يكون ملف popup.html بسيطًا جدًا. يوجد أدناه بعض الرموز لإنشاء نافذة منبثقة مع زر واحد. إنه سهل مثل إضافة علامات أزرار الفتح والإغلاق في نص المستند وبعض قواعد النمط.


  
    <رئيس>
      <نمط>
        زر {
          الارتفاع: 30 بكسل ؛
          العرض: 30 بكسل ؛
          الخطوط العريضة: لا شيء ؛
        }
      
    
    
      <زر> 
    
  

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

الوقت لتكوين رمز المنبثقة والرمز. ومع ذلك ، بالنسبة للرمز ، ستحتاج إلى إضافة رمز إلى مكانين ، "default_icon" و "الرموز". يتم استخدام خاصية "default_icon" لرموز شريط الأدوات ، ويتم استخدام "الرموز" للصور المعروضة على صفحة إدارة الامتداد.

ارجع إلى manifest.json وأضف سطور التعليمات البرمجية التالية ، واستبدل مسارات الصور الخاصة بالرمز الافتراضي بصورك الخاصة. يمكنك أيضًا وضع نفس الصور لكل من "default_icon" و "الرموز". ولست بحاجة إلى وضع صور لها أبعاد مماثلة للأبعاد المحددة أدناه. على سبيل المثال ، إذا كان لديك صور 16 × 16 و 48 × 48 فقط ، فلا تتردد في حذف الخطين الآخرين اللذين يحددان 32 و 128 بكسل.

{
   "الاسم": "مثال على امتداد Chrome" ،
    ...
    "page_action": {
        "default_popup": "popup.html" ،
        "default_icon": {
            "16": "images / img16.png" ،
            "32": "images / img32.png" ،
            "48": "images / img48.png" ،
            "128": "images / img128.png"
        }
    }،
    "الرموز": {
        "16": "images / img16.png" ،
        "32": "images / img32.png" ،
        "48": "images / img48.png" ،
        "128": "images / img128.png"
    }
}

هذه هي الملفات الضرورية لبناء امتداد chrome:

  • ملف واضح ،
  • مخطوطات الخلفية ، و
  • ملف منبثق

بعض الملفات الأخرى التي قد ترغب في تكوينها هي:

  • options.html و
  • options.js

options.js سيمنح المستخدمين مجموعة متنوعة من الخيارات عندما يتعلق الأمر باستخدام الإضافة. ستهتم بكيفية ظهور صفحة الخيارات الخاصة بك (تشبه إلى حد كبير popup.html) ، في حين أن options.js ستتعامل مع الوظيفة.

هذه الملفات اختيارية ، ولكن إذا قررت إضافتها ، فلا تنس تكوين الخيارات.html في البيان وربط ملف options.js الخاص بك بإضافة مباشرةً قبل علامة HTML إنهاء الخاص بك.

{
    "الاسم": "مثال على امتداد Chrome" ،
    ...
    "options_page": "options.html"
}

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

نشر المشروع الخاص بك إلى متجر على شبكة الإنترنت

لذلك قمت بتطوير واختبار امتدادك. الآن تحتاج إلى توزيعها!

لبدء تحميل المشروع ، قم أولاً بتحويله إلى ملف بتنسيق zip. يجب أن يحتوي الملف ، على الأقل ، على ملف manifest.json. بعد ذلك ، تأكد من أن لديك حساب مطور من خلال زيارة لوحة تحكم مطوري Chrome Webstore.

انقر فوق الزر "إضافة عنصر جديد" وسيسمح لك بتحميل ملف .zip الخاص بك هناك. ما لم تكن ترغب في تسجيل مدفوعات تطبيقك ، يمكنك تخطي الخطوة حول إعداد نظام الدفع. سيتعين عليك دفع رسوم مطور البرامج لمرة واحدة بقيمة 5 دولارات ، عند وضع مشروعك على متجر الويب.

أيضًا ، لا تنس تضمين وصف تفصيلي وصور لإضافتك حتى يعرف المستخدمون المحتملون ما يفعله مشروعك بالضبط!

بمجرد اكتمال كل ذلك ، ستتلقى معرف تطبيق ورمز OAuth. يتم استخدام معرف التطبيق لتقديم طلبات إلى واجهات برمجة تطبيقات Google ، بينما يتم استخدام رمز OAuth لإجراء مدفوعات متجر الويب.

تهانينا ، لقد نشرت ملحقك الآن!

إذا كنت قد استمتعت بهذا المنشور ، فراجع هذا المقال التالي. سنتعمق في كيفية تكوين ميزات الصوت في امتداد Chrome ، تمامًا كما فعلنا مع TalkToMe.