كيفية كتابة امتداد Chrome: دليل خطوة بخطوة مع رمز مثال

نشرت: 2022-04-10

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

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

الاحتمالات لا حدود لها ، من امتداد يعرض "Hello World!" إلى امتداد يتيح لك التقاط لقطة شاشة لصفحة الويب.

كيفية كتابة امتداد كروم

جدول المحتويات:

  • هيكل الامتداد
  • تحميل الامتداد
  • إضافة واجهة مستخدم منبثقة
  • استخدام واجهة برمجة التطبيقات للإشعارات
  • إضافة عنصر قائمة السياق
  • استخدام التخزين API لتخزين البيانات
  • توزيع الامتداد
كيفية إنشاء امتداد #Google #Chrome: دليل خطوة بخطوة للمبتدئين
انقر للتغريد

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

قم بإنشاء ملحق جوجل كروم

رمز الامتداد عام على GitHub ، لذا لا تتردد في تفرع منه واستخدامه.

كيف تكتب امتداد كروم: الهيكل

قبل أن نمضي قدمًا ، يجب عليك الاطلاع على وثائق مطوري Google Chrome للتعرف على تطوير ملحقات Chrome بشكل عام.

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

لنبدأ بإنشاء مجلد جديد باسم notify على جهازك. سيحتوي هذا المجلد على كل ما سيكون جزءًا من امتدادك.

الآن ، تحتاج إلى إنشاء ملف بيان يحتوي على جميع المعلومات حول الامتداد الخاص بنا. أنشئ ملفًا يسمى manifest.json وقم بتضمين الكود التالي: 

 { "name" : "Notify!" , "description" : "A Google Chrome extension!" , "version" : "1.0" , "manifest_version" : 3 , "icons" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } }
 لغة الشفرة: JSON / JSON مع التعليقات ( json )

كما ترى ، حتى الآن ، فهي تحتوي فقط على معلومات وصفية حول الامتداد الخاص بك ، مثل الاسم والوصف والإصدار. يخبر manifest_version Chrome بإصدار واجهة برمجة تطبيقات الإضافات التي تستخدمها.

تحميل الامتداد

بعد أن يكون لديك ملف البيان في مكانه ، يمكنك تحميل الملحق في متصفح Chrome:

تحميل امتداد إلى Google Chrome

افتح صفحة إدارة الامتدادات بالانتقال إلى chrome://extensions ، أو يمكنك أيضًا فتحها من قائمة الامتدادات في الإعدادات.

بمجرد الوصول إلى هناك ، قم بتمكين وضع Developer واستخدم الزر Load unpacked لتحديد دليل الامتداد الخاص بك.

انظروا إلى امتدادك! الآن بعد أن تم تحميل الامتداد الخاص بك ، يمكنك تحسينه خطوة بخطوة ومراقبة التغييرات.

تأكد من إضافة رمز للامتداد الخاص بك إلى assets/icons/ المجلد وإلا ستظهر أيقونة افتراضية.

إضافة واجهة مستخدم منبثقة

دعنا نواصل بإضافة بعض واجهة المستخدم إلى الامتداد حيث يمكن للأشخاص التفاعل مع الخيارات المتوفرة.

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

لإضافة نافذة منبثقة إلى الامتداد ، يجب عليك إضافة هذا إلى ملف manifest.json الخاص بك: 

 "action" : { "default_popup" : "popup.html" , "default_icon" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } },
 لغة الكود: جافا سكريبت ( جافا سكريبت )

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

تمديد المنبثقة

نافذة منبثقة لإضافات Google Chrome

الآن ، يمكنك إضافة كود HTML الخاص بالنافذة المنبثقة إلى الملف ، كما نفعل في مثالنا:

 <!DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "assets/css/popup.css" > </ head > < body > < div id = "notify-wrapper" > < div id = "notify-header" > < h1 > Notify! </ h1 > </ div > < div id = "notify-containers" > < div class = "notify-form" > < label for = "text" > Notification </ label > < textarea name = "text" id = "notify-text" placeholder = "Let's notify!" > </ textarea > </ div > < div class = notify-buttons > < p > Total: < span id = "notify-count" > </ span > </ p > < button class = "button" id = "notify-reset" > Reset </ button > < button class = "button primary" id = "notify-button" > Notify! </ button > </ div > </ div > </ div > < script src = "assets/js/popup.js" > </ script > </ body > </ html >
 لغة الكود: HTML ، XML ( xml )

يرتبط ملف HTML هذا أيضًا بورقة أنماط وبرنامج نصي لإضافة أسلوب ووظائف إلى النافذة المنبثقة الخاصة بنا.

إذا كنت تتابع ، يمكنك الحصول على كود CSS من هنا. سنقوم بإضافة JavaScript إلى الملف لاحقًا في هذا البرنامج التعليمي.

لقد أنشأت حتى الآن امتدادًا لـ Google Chrome يحتوي على نافذة منبثقة ، ولم يأخذنا سوى بضعة أسطر من التعليمات البرمجية. كما قلنا في البداية ، فإن إنشاء امتداد Google Chrome أمر سهل للغاية!

للمضي قدمًا في هذا البرنامج التعليمي ، سنضيف وظائف إلى هذا الامتداد ونجعله أكثر من مجرد عنصر نائب.

استخدام واجهة برمجة التطبيقات للإشعارات

كما يوحي اسم الامتداد ، فهو امتداد إشعارات ، لذا دعنا نضيف بعضها!

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

بالنسبة للإشعارات ، يمكنك القيام بذلك على النحو التالي: 

 "permissions" : [ "notifications" ],
 لغة الكود: جافا سكريبت ( جافا سكريبت )

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

 "background" : { "service_worker" : "background.js" },
 لغة الكود: جافا سكريبت ( جافا سكريبت )

أنت بحاجة إلى عامل خدمة لواجهة برمجة تطبيقات الإشعارات حيث لا يمكن استخدامها مباشرة من ملف popup.js .

في ملف background.js ، تحتاج إلى إضافة الكود التالي لإرسال إشعار: 

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : data.message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); } });
 لغة الكود: جافا سكريبت ( جافا سكريبت )

هنا ، نستخدم مستمع حدث onMessage للحصول على المشغل لدفع الإشعارات من النافذة المنبثقة.

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

الآن بعد أن أصبحت طريقة create في مكانها الصحيح ، يمكنك إطلاقها من ملف popup.js مثل هذا: 

 const text = document .getElementById( 'notify-text' ); const notify = document .getElementById( 'notify-button' ); notify.addEventListener( 'click' , () => { chrome.runtime.sendMessage( '' , { type : 'notification' , message : text.value }); } );
 لغة الكود: جافا سكريبت ( جافا سكريبت )

هنا ، يتم استخدام إجراء sendMessage لتشغيل الإشعار. وفويلا! لدينا امتداد يقوم بتشغيل إشعار.

واجهة برمجة تطبيقات Chrome Notification

تأكد من أنك تستخدم أحدث إصدار من Google Chrome ، ومنحه أذونات لتشغيل الإشعارات. باختصار ، لا تكن مثلي ، فقد أمضيت ساعات في محاولة معرفة سبب عدم ظهور الإشعارات.

إضافة عنصر قائمة السياق

كما هو مذكور في المقدمة ، فإن قائمة السياق هي القائمة التي تظهر عند النقر بزر الماوس الأيمن:

قائمة سياق Google Chrome

يمكن أن يكون هناك العديد من الأسباب التي قد تجعل امتدادك يحتوي على عنصر قائمة سياق. أحد الأمثلة البارزة هو تحديد بعض النصوص بالمؤشر ثم البحث عنها على Google.

يمكنك إضافة العديد من العناصر إلى قائمة السياق كما تريد ، ولكن إذا أضافت إضافتك أكثر من عنصر واحد ، فسيتم طيها ضمن عنصر رئيسي واحد.

لهذا ، تحتاج أيضًا إلى إضافة أذونات إلى ملف البيان الخاص بك: 

 "permissions" : [ "contextMenus" , "notifications" ],
 لغة الكود: جافا سكريبت ( جافا سكريبت )

الآن بعد أن أضفت أذونات contextMenus ، يمكنك إضافة هذا إلى ملف background.js الخاص بك: 

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { notify( data.message ); } }); chrome.runtime.onInstalled.addListener( () => { chrome.contextMenus.create({ id : 'notify' , title : "Notify!: %s" , contexts :[ "selection" ] }); }); chrome.contextMenus.onClicked.addListener( ( info, tab ) => { if ( 'notify' === info.menuItemId ) { notify( info.selectionText ); } } ); const notify = message => { return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 لغة الكود: جافا سكريبت ( جافا سكريبت )

يشتمل الكود أعلاه أيضًا على الكود من الخطوة السابقة لتشغيل notify تم تجريده الآن في وظيفة الإعلام حتى يمكن إعادة استخدامه.

يُستخدم الإجراء contextMenus.create لإضافة عنصر إلى قائمة السياق. يتم توصيله بـ onInstalled حيث يحتاج إلى التهيئة مرة واحدة فقط.

بعد ذلك ، على غرار الخطوة السابقة ، نستخدم contextMenus.onClicked لالتقاط النقرة وتشغيل إشعار.

قائمة سياق Google Chrome

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

استخدام التخزين API لتخزين البيانات

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

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

أولاً ، تحتاج إلى إضافة إذن تخزين إلى ملف البيان الخاص بك: 

 "permissions" : [ "contextMenus" , "notifications" , "storage" ],
 لغة الكود: جافا سكريبت ( جافا سكريبت )

بعد ذلك ، يمكنك استخدام طرق التخزين ، storage.local.get و storage.local.set ، لاسترداد البيانات أو حفظها.

يمكنك إضافة الكود التالي إلى ملف popup.js الخاص بك: 

 const reset = document .getElementById( 'notify-reset' ); const counter = document .getElementById( 'notify-count' ); chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; counter.innerHTML = value; } ); chrome.storage.onChanged.addListener( ( changes, namespace ) => { if ( changes.notifyCount ) { let value = changes.notifyCount.newValue || 0 ; counter.innerHTML = value; } }); reset.addEventListener( 'click' , () => { chrome.storage.local.clear(); text.value = '' ; } );
 لغة الكود: جافا سكريبت ( جافا سكريبت )

هذا الرمز يقوم بأمرين:

  • يقوم بتحديث عدد الإشعارات في النافذة المنبثقة عندما نفتح النافذة المنبثقة أو تتغير قيمة التخزين. للاستماع إلى تغيير التخزين ، يتم استخدام التخزين. storage.onChanged .
  • جزئيًا ، نقوم بمسح التخزين عندما ينقر المستخدم على زر إعادة الضبط.

يقوم الكود أعلاه بمهمة الحصول على آخر عدد وتحديثه. الآن إعداد البيانات لا يزال. لذلك ، يمكنك تحديث وظيفة notify بنا بهذا: 

 const notify = message => { chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; chrome.storage.local.set({ 'notifyCount' : Number ( value ) + 1 }); } ); return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 لغة الكود: جافا سكريبت ( جافا سكريبت )

هنا ، نحصل على أحدث بيانات التخزين ثم نقوم بتحديثها بأحدث عدد.

وبالمثل ، يمكنك استخدام واجهة برمجة تطبيقات chrome.storage.sync لمزامنة الخيارات بين المتصفحات.

توزيع الامتداد

تهانينا! كنت قد فعلت ذلك! لقد نجحت في إنشاء امتداد Google Chrome يستخدم العديد من الأجزاء المختلفة لتجربة Google Chrome ، بما في ذلك:

  • تظهر ظهور مفاجئ
  • واجهة برمجة تطبيقات الإخطارات
  • قائمة السياق
  • واجهة برمجة تطبيقات التخزين

إذا كنت تريد رؤية رمز هذا الامتداد ، فيمكنك الحصول عليه في مستودع Notify GitHub هذا.

نود جميعًا أن نتباهى بالعمل الرائع الذي نقوم به للعالم. بمجرد اكتمال الامتداد الخاص بك ، يمكنك إرساله إلى سوق Chrome الإلكتروني لتنزيله لمستخدمي Chrome الآخرين.

إذا كنت ترغب في استكشاف الخيارات الأخرى التي يقدمها Google Chrome لمطوري الإضافات ، نوصي بالتحقق من الوثائق الرسمية.

آمل أن يكون هذا المقال قد أدى دوره في تعليمك كيفية كتابة امتداد Chrome. نحن متحمسون لرؤية ما يمكنك إنشاؤه ، لذلك أخبرنا عن مغامراتك مع تطوير امتداد Google Chrome في قسم التعليقات أدناه.

قد تكون أيضا مهتما ب:

  • 18 من أفضل وكالات WordPress لتطوير الويب والتصميم والتسويق والمزيد
  • 15 أفضل برامج تصميم مواقع الويب المتوفرة في السوق الآن
  • 9 من أفضل حلول إنشاء مواقع الويب مقارنة واختبارها
كيفية إنشاء Google #Chrome #extension: دليل خطوة بخطوة للمبتدئين
انقر للتغريد

...

لا تنس الانضمام إلى الدورة التدريبية المكثفة حول تسريع موقع WordPress الخاص بك. مع بعض الإصلاحات البسيطة ، يمكنك تقليل وقت التحميل بنسبة 50-80٪:

اشترك الآن الصورة

التخطيط والعرض التقديمي بواسطة كريس فيتزجيرالد وكارول ك.