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

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

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

في ما يلي ، سوف أعرض عليك أسهل طريقة لإنشاء ملحق. إذا كان لديك بعض المعرفة بتطوير الويب (HTML و CSS و JS) ، فسوف تشعر أنك في منزلك. إذا لم يكن كذلك ، شاهد هذه القنوات أولاً تعلم أساسيات تطوير الويب, ثم تابع أدناه.

المتطلبات الأساسية

يلزمك إكمال المتطلبات التالية قبل البدء في هذا البرنامج التعليمي.

1. يجب أن تكون على دراية HTML و CSS و JavaScript. [التحقق من الموارد]
2. يجب أن يكون لديك محرر الكود لكتابة التمديد. [مقارنة المحررين]
3. (اختياري) إذا كنت ترغب في توزيع امتدادك على المستخدمين الآخرين ، فيجب أن يكون لديك حساب المطور في سوق Chrome الإلكتروني. [انشئ حساب]

ملحوظة: تطلب منك Google دفع رسوم رمزية لإنشاء حساب مطور في سوق Chrome الإلكتروني.

إنشاء ملحق

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

1. الحصول على القالب

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

Extensionizr هو أفضل مولد boilerplate لملحقات الكروم. يسمح لك باختيار أحد أنواع الامتدادات المحددة - عمل المتصفح (إجراء لجميع الصفحات أو المتصفح), عمل الصفحة (إجراء للصفحة الحالية) ، أو تمديد خفي (إجراء خلفية يكون عادةً مخفيًا في الواجهة الأمامية).

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

عند الانتهاء من اختيار الخيارات لإنشاء نموذج ملحق ، اضغط على “تنزيله!” زر في Extensionizr. أخيرا, استخراج الأرشيف (.zip) إلى دليل وافتح محرر الكود لبدء كتابة الامتداد.

2. رمز التمديد

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

دعنا نتعرف على الملفات والمجلدات الأخرى في هذا الدليل أيضًا:

1. _locales: يتم استخدامه ل تخزين معلومات اللغة لتطبيق متعدد اللغات.
2. المغلق: إنه يعمل على تخزين مكتبات الجهة الخارجية مثل Bootstrap 4.
3. الرموز: تم تصميمه ليحتوي على أيقونات لتمديدها بأحجام متنوعة.
4. شبيبة: يتعلق الأمر مفيد لحفظ مكتبات الجهة الخارجية مثل مسج 3.
5. SRC: يخزن الرمز الفعلي الذي ستكتبه لملحقك.

الملف manifest.json

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

على سبيل المثال ، في التعليمة البرمجية أدناه ، ستلاحظ أنني غيرت الاسم والوصف و homepage_url مع default_title ضمن browser_action. علاوة على ذلك ، أنا وأضاف “تخزين” تحت أذونات كما نحتاج إلى تخزين البيانات في امتدادنا.

 "name": "Todoizr - To-Do Simplified"، "version": "0.0.1"، "manifest_version": 2، "description": "تطبيق بسيط للقيام به للجميع."، "homepage_url": " https://go.aksingh.net/todoizr "،" icons ": " 16 ":" icons / icon16.png "،" 48 ":" icons / icon48.png "،" 128 ":" icons / icon128 .png "،" default_locale ":" en "،" browser_action ": " default_icon ":" icons / icon19.png "،" default_title ":" Todoizr - To-do Simplified "،" default_popup ":" src / browser_action / browser_action.html " ،" الأذونات ": [" تخزين "] 

SRC \ BROWSER_ACTION

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

ملحوظة: يمكنك دائمًا البدء بالكود عن طريق استنساخ هذا المستودع.

الرمز الأولي من القالب

على الرغم من أن هذا الدليل يحتوي فقط على ملف HTML يحتوي على جميع الشفرات ، فقد قررت تقسيمه إلى ثلاثة ملفات منفصلة لتحسين الوضوح. قال ذلك ، ملف HTML اسمه “browser_action.html” الآن لديه الكود التالي:

علاوة على ذلك ، ملف النمط اسمه “browser_action.css” يحتوي على المحتوى أدناه أثناء تسمية ملف JavaScript “browser_action.js” فارغ الآن.

 #mainPopup padding: 10px؛ الارتفاع: 200 بكسل ؛ العرض: 400 بكسل ؛ font-family: Helvetica، Ubuntu، Arial، sans-serif؛  h1 font-size: 2em؛  

تصميم واجهة المنبثقة

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

في الكود أدناه ، أضفت قسمتين - أحدهما لعرض النموذج لإضافة عنصر مهام ، والآخر لعرض قائمة عناصر المهام التي تمت إضافتها بالفعل. قال ذلك ، رمز جديد ل “browser_action.html” على النحو التالي:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

وملف النمط “browser_action.css” الآن لديه الكود التالي:

 import url ("./ form_style_5.css") ؛ #mainPopup height: 200px؛ العرض: 300 بكسل ؛ font-family: Helvetica، Ubuntu، Arial، sans-serif؛  / * نموذج عنصر المهام * / .form-style-5 margin: auto؛ الحشو: 0px 20px ؛  .form-style-5: first-child background: none؛  .form-style-5 h1 color: # 308ce3؛ حجم الخط: 20 بكسل ؛ محاذاة النص: المركز ؛  .form-style-5 input [type = "text"] width: auto؛ تعويم: اليسار؛ الهامش السفلي: غير محدد ؛  .form-style-5 input [type = "button"] background: # 308ce3؛ العرض: السيارات ؛ تطفو: صحيح ؛ الحشو: 7px. الحدود: لا شيء ؛ دائرة نصف قطرها الحدود: 4px ؛ حجم الخط: 14 بكسل ؛  .form-style-5 input [type = "button"]: hover background: # 3868d5؛  / * قائمة عناصر المهام الواجبة * / .form-style-5: last-child height: inherit؛ الهامش السفلي: 5 بكسل ؛  .form-style-5 ul padding: 20px؛  .form-style-5 ul li font-size: 14px؛  

أخيرًا ، ملف نمط الجهة الخارجية “form_style_5.css” لديه المحتوى أدناه. يؤخذ ببساطة من موقعه على شبكة الإنترنت لإلهام تصميم امتداد لدينا.

 / * Form Style 5 by Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px؛ الحشو: 10px 20px. الخلفية: # f4f7f8؛ الهامش: 10px auto ؛ الحشو: 20px. الخلفية: # f4f7f8؛ دائرة نصف قطرها الحدود: 8px ؛ font-family: Georgia، "Times New Roman"، Times، serif؛  .form-style-5 fieldset border: none؛  .form-style-5 legend font-size: 1.4em؛ الهامش السفلي: 10 بكسل ؛  .form-style-5 label display: block؛ الهامش السفلي: 8 بكسل ؛  .form-style-5 input [type = "text"] ، .form-style-5 input [type = "date"] ، .form-style-5 input [type = "datetime"] ، .form-style إدخال -5 [type = "email"] ، إدخال .form-style-5 [type = "number"] ، إدخال .form-style-5 [type = "search"] ، إدخال .form-style-5 [type = "time"] ، إدخال .form-style-5 [type = "url"] ، textarea .form-style-5 ، .form-style-5 حدد font-family: Georgia ، "Times New Roman" ، Times ، الرقيق ؛ الخلفية: rgba (255،255،255، .1)؛ الحدود: لا شيء ؛ دائرة نصف قطرها الحدود: 4px ؛ حجم الخط: 16 بكسل ؛ الهامش: 0 الخطوط العريضة: 0؛ الحشو: 7px. العرض: 100 ٪ ؛ التحجيم مربع: الحدود مربع. -webkit-box-التحجيم: مربع الحدود ؛ التحجيم مربع: لون الخلفية: # e8eeef؛ اللون: # 8a97a0. -webkit-box-shadow: 0 1px 0 rgba (0،0،0،0.03) inset؛ box-shadow: 0 1px 0 rgba (0،0،0،0.03) inset؛ الهامش السفلي: 30 بكسل ؛  .form-style-5 input [type = "text"]: focus ، .form-style-5 input [type = "date"]: focus ، .form-style-5 input [type = "datetime"]: التركيز ، إدخال .form-style-5 [type = "email"]: إدخال التركيز ، .form-style-5 [type = "number"]: التركيز ، إدخال .form-style-5 [type = "search"] : التركيز ، إدخال .form-style-5 [type = "time"]: التركيز ، إدخال .form-style-5 [type = "url"]: التركيز ، .form-style-5 textarea: focus، .form- select-5 select: focus background: # d2d9dd؛  .form-style-5 حدد -webkit-المظهر: menulist-button؛ الطول: 35px؛  .form-style-5 .number background: # 1abc9c؛ اللون: # ff؛ الارتفاع: 30 بكسل ؛ العرض: 30 بكسل ؛ عرض: كتلة مضمنة. حجم الخط: 0.8em ؛ الهامش الأيمن: 4 بكسل ؛ ارتفاع الخط: 30px ؛ محاذاة النص: المركز ؛ text-shadow: 0 1px 0 rgba (255،255،255،0.2)؛ نصف قطر الحدود: 15px 15px 15px 0px ؛  .form-style-5 input [type = "submit"] ، .form-style-5 input [type = "button"] موضع: نسبي ؛ العرض محجوب؛ الحشو: 19px 39px 18px 39px ؛ اللون: الهامش: 0 السيارات ؛ الخلفية: # 1abc9c ؛ حجم الخط: 18 بكسل ؛ محاذاة النص: المركز ؛ نمط الخط: عادي. العرض: 100 ٪ ؛ الحدود: 1px صلب # 16a085 ؛ عرض الحدود: 1px 1px 3px ؛ الهامش السفلي: 10 بكسل ؛  .form-style-5 input [type = "submit"]: hover، .form-style-5 input [type = "button"]: hover background: # 109177؛  

اكتب منطق المنبثقة

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

في الكود أدناه ، سنستخدم وظيفتين - sync.get () و sync.set (), التي هي جزء من “chrome.storage“. نحتاج إلى الثاني لحفظ عناصر المهام في التخزين والأول لاستردادها وإظهارها.

وقال أن أدناه هو الرمز النهائي لل “browser_action.js” ملف. كما ترون أدناه ، تم التعليق على الكود بشدة لمساعدتك في فهم الغرض منه.

 دالة loadItems () / * أولاً ، احصل على () البيانات من وحدة التخزين * / chrome.storage.sync.get (['' todo '] ، الوظيفة (النتيجة) var todo = [] if (result && result.todo && result.todo.trim ()! == ") / * تحليل والحصول على الصفيف كما يتم حفظها كسلسلة * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) لـ (var i = 0؛ i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. تحميل التمديد

بعد الانتهاء من كتابة ملحقك ، فقد حان الوقت لاختباره من خلال ميزة Google Chrome التي تتيح تحميل إضافات غير مخزّنة وغير معبأة. ولكن أولا ، يجب عليك تمكين وضع المطور في متصفحك: انقر فوق خيارات زر > أختر “المزيد من الأدوات” > ملحقات, ثم التبديل على “وضع المطور“.

سترى الآن المزيد من الأزرار أسفل شريط البحث. هنا انقر فوق “تحميل تفريغ” زر. سيطلب الدليل - تصفح وحدد دليل الملحق الخاص بك ، وسوف يتم تحميل الملحق. إذا قمت بتحرير أو تحديث رمز الامتداد الخاص بك ، يمكنك النقر فوق زر إعادة التحميل لتحميل أحدث التغييرات.

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

توزيع ملحق

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

ماذا بعد؟ قراءة ورمز

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

قال ذلك ، وفيما يلي بعض من بلدي الذهاب إلى الموارد المفضلة لتعلم كيفية تطوير ملحقات لمتصفح Google Chrome ومتصفحات أخرى تعتمد على Chromium:

1. جميع قدرات ومكونات وميزات الامتدادات.
2. عينة من الإضافات من قِبل فريق Google Chrome.

إذا مررت بهذه الموارد وكنت مستعدًا لمواجهة بعض التحديات ، فحاول إضافة الميزات أدناه في الملحق الذي أكملت للتو تطويره:

1. خيار لحذف عناصر المهام الواجبة.
2. ميزة لإظهار الإخطارات عند الانتهاء من إضافة عنصر.

هذا هو كل ما يتعلق بتطوير الامتداد الأول للمتصفح الأكثر شعبية. ما التمديد الذي قمت بإنشائه؟? هل واجهت مشكلة؟ واسمحوا لي أن أعرف قصتك عن طريق كتابة تعليق أدناه أو مراسلتي علىaksinghnet.

أخيرًا وليس آخرًا ، لاحظ أنه يمكنك تجربة Todoizr (الامتداد الذي أنشأناه) في Chrome Web Store والتحقق من الكود الكامل في هذا المستودع.