كيفية بناء امتداد كروم بسيط في الفانيليا جافا سكريبت

اليوم ، سأوضح لك كيفية جعل امتداد Chrome في الفانيليا جافا سكريبت - أي جافا سكريبت عادي دون أي أطر إضافية مثل React أو Angular أو Vue.

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

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

حول ملحقات Chrome

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

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

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

إعداد الملفات الخاصة بك

بالنسبة لهذا البرنامج التعليمي ، سنقوم بإنشاء لوحة معلومات بسيطة تحيي المستخدم بالاسم. دعنا ندعو ملحق لوحة التحكم البسيطة.

للبدء ، ستحتاج إلى إنشاء ثلاثة ملفات: index.html و main.css و main.js. ضعها في مجلدها الخاص. بعد ذلك ، املأ ملف HTML بإعداد مستند HTML الأساسي ، وقم بتوصيله بملفات CSS و JS:

تحية بسيطة لوحة القيادة
================================= // ->
<رئيس>
  
   لوحة تحية بسيطة 
  
   
   

تخصيص ملف manifest.json الخاص بك

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

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

الآن ، دعونا نقوم بتحديث ملف العينة بمزيد من المعلومات حول ملحقنا. لا نريد سوى تغيير القيم الثلاث الأولى من هذا الرمز: الاسم والإصدار والوصف. دعنا نملأ اسمنا ووصفًا من سطر واحد ، ولأن هذا هو الإصدار الأول لدينا ، فلنحتفظ بهذه القيمة عند 1.0. يجب الاحتفاظ برقم manifest_version كما هو.

بعد ذلك ، سنضيف بعض الأسطر لإخبار Chrome بما يجب فعله مع هذا الملحق.

{
  "الاسم": "لوحة تحية بسيطة" ،
  
  "الإصدار": "1.0" ،
  
  "الوصف": "امتداد Chrome هذا يحيي المستخدم في كل مرة يفتح فيها علامة تبويب جديدة" ،
  
  "manifest_version": 2
  "التخفي": "split" ،
  
  "chrome_url_overrides": {
    "newtab": "index.html"
  }،
  
  "الأذونات": [
     "activeTab"
   ]،
"الرموز": {
    "128": "icon.png"
    }
}

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

كما يمكنك أن ترى ، "chrome_url_overrides" يخبر Chrome بفتح index.html عند فتح علامة تبويب جديدة. ستمنح قيمة "الأذونات" المستخدم نافذة منبثقة تتيح له معرفة أن هذا الامتداد سيتخطى علامة التبويب الجديدة عند محاولة تثبيته.

أخيرًا ، نبلغ Chrome بما يتم عرضه كـ فافيكون: ملف يسمى icon.png ، والذي سيكون 128 × 128 بكسل.

خلق أيقونة

نظرًا لعدم وجود ملف الرموز بعد ، بعد ذلك ، سننشئ رمزًا لـ Simple Greeting Dash. لا تتردد في استخدام واحد أدليت به أدناه. إذا كنت ترغب في إنشاء حساب خاص بك ، فيمكنك القيام بذلك بسهولة باستخدام Photoshop أو خدمة مجانية مثل Canva. فقط تأكد من أن الأبعاد هي 128 × 128 بكسل ، وأنك تحفظها كـ icon.png في نفس المجلد مثل ملفات HTML و CSS و JS و JSON.

أيقونة 128x128 الخاصة بي لـ Dash Simple Dash

تحميل ملفاتك (إذا كنت تقوم بترميز صفحتك الخاصة)

المعلومات الواردة أعلاه هي كل ما تحتاج حقًا إلى معرفته لإنشاء علامة تبويب جديدة امتداد Chrome. بعد تخصيص ملف manifest.json ، يمكنك تصميم أي نوع من صفحات علامة التبويب الجديدة التي تريدها في HTML و CSS و JavaScript وتحميلها كما هو موضح أدناه. ولكن إذا كنت ترغب في معرفة كيفية إنشاء لوحة المعلومات البسيطة هذه ، فانتقل إلى "إنشاء قائمة إعدادات".

بمجرد الانتهاء من تصميم صفحة علامة تبويب جديدة ، تتم إضافة امتداد Chrome وجاهز للتحميل إلى Chrome. لتحميله بنفسك ، توجه إلى chrome: // extensions / في المستعرض الخاص بك وقم بالتبديل إلى وضع Developer في الجزء العلوي الأيمن.

قم بتحديث الصفحة وانقر فوق "تحميل تفريغ".

بعد ذلك ، حدد المجلد الذي تخزّن فيه ملفات HTML و CSS و JS و manifest.json ، بالإضافة إلى icon.png ، وتحميلها. يجب أن تعمل الإضافة في كل مرة تفتح فيها علامة تبويب جديدة!

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

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

إنشاء قائمة الإعدادات

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

   
      
      
   

في الوقت الحالي ، تبدو إعداداتنا كما يلي:

جميل جدا!

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

.الإعدادات {
   عرض: المرن.
   الاتجاه المرن: صف ؛
   محاذاة المحتوى: المركز ؛
}
إدخال {
   الحشو: 5px.
   حجم الخط: 12 بكسل ؛
   العرض: 150 بكسل ؛
   الارتفاع: 20 بكسل ؛
}
زر {
   الارتفاع: 30 بكسل ؛
   العرض: 70 بكسل ؛
   الخلفية: لا شيء ؛ / * هذا يزيل الخلفية الافتراضية * /
   اللون: # 313131 ؛
   الحدود: 1px صلب # 313131 ؛
   نصف قطر الحدود: 50 بكسل ؛ / * وهذا يعطي حواف مستديرة زر لدينا * /
   حجم الخط: 12 بكسل ؛
   المؤشر: المؤشر ؛
}
شكل {
   الحشو أعلى: 20px.
}

تبدو إعداداتنا الآن أفضل قليلاً:

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

تحويل: translateX (-100 ٪) ؛
الانتقال: تحويل 1 ثانية ؛

الآن ، دعونا ننشئ فئة تسمى "الإعدادات" مفتوحة ، والتي سنبدأ تشغيلها وإيقاف تشغيلها في JavaScript عندما ينقر المستخدم على زر "الإعدادات". عند إضافة الإعدادات المفتوحة إلى الإعدادات ، لن يتم تطبيق أي تحويلات عليها ؛ ستكون مرئية فقط في وضعها الطبيعي.

.settings-open.settings {
   تحويل: لا شيء ؛
}

لنجعل الفصل يعمل في جافا سكريبت. سأقوم بإنشاء وظيفة تسمى openSettings () والتي ستعمل على تبديل إعدادات الفصل- مفتوحة أو متوقفة. للقيام بذلك ، سأحصل أولاً على العنصر بمعرف "الإعدادات" ، ثم استخدم classList.toggle لإضافة فئة الإعدادات المفتوحة.

وظيفة openSettings () {
   document.getElementById ( "إعدادات") classList.toggle ( "ضبط مفتوحة.")؛
}

الآن سأضيف مستمع أحداث من شأنه تشغيل الوظيفة عند النقر فوق الزر "إعدادات".

document.getElementById ("إعدادات - زر"). addEventListener ("انقر" ، openSettings)

هذا سيجعل إعداداتك تظهر أو تختفي كلما نقرت فوق زر الإعدادات.

خلق تحية شخصية

بعد ذلك ، لنقم بإنشاء رسالة الترحيب. سنجعل h2 فارغًا في HTML ، ثم نملؤه باستخدام innerHTML في JavaScript. سأمنح h2 معرفًا حتى أتمكن من الوصول إليه لاحقًا ، ووضعه داخل قسم يسمى حاوية الترحيب لتوسيطه.

   

الآن ، في JavaScript ، سأقوم بإنشاء تحية أساسية باستخدام اسم المستخدم. أولاً ، سأجعل المتغير يحمل الاسم ، الذي سأبقيه فارغًا الآن ، وأضيفه لاحقًا.

فار اسم المستخدم ؛

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

وظيفة saveName () {
    localStorage.setItem ('receivedName' ، اسم المستخدم) ؛
}

تأخذ الدالة localStorage.setItem () وسيطين: الأول هو كلمة رئيسية سأستخدمها للوصول إلى المعلومات فيما بعد ، والثانية هي المعلومات التي يحتاجها لتذكرها ؛ في هذه الحالة ، اسم المستخدم. سأحصل على هذه المعلومات المحفوظة من خلال localStorage.getItem ، والتي سأستخدمها لتحديث متغير userName.

var userName = localStorage.getItem ('receivedName') ؛

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

إذا (اسم المستخدم = = لاغ) {
   اسم المستخدم = "صديق" ؛
}

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

وظيفة changeName () {
   userName = document.getElementById ("name-input"). value؛
   saveName ()؛
}

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

document.getElementById ("name-form"). addEventListener ('submit'، function (e) {
   e.preventDefault ()
   تغيير الإسم()؛
})؛

أخيرًا ، دعونا نخلق تحياتنا. سأضع هذا في وظيفة أيضًا ، حتى أتمكن من الاتصال بها عند تحديث الصفحة ، وكلما حدث changeName (). ها هي الوظيفة:

وظيفة getGreeting () {
   document.getElementById ("greeting"). innerHTML = `Hello، $ {userName}. استمتع بيومك!
}
getGreeting ()

الآن سأتصل بـ getGreeting () في وظيفة changeName () الخاصة بي وسميها في اليوم!

وأخيرا ، نمط صفحتك

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

.greeting-container {
   عرض: المرن.
   تبرير المحتوى: المركز ؛
   محاذاة المحتوى: المركز ؛
}
تحية
   font-family: sans-serif؛
   حجم الخط: 60 بكسل ؛
   اللون: # ff؛
}
الجسم {
   لون الخلفية: # c670ca؛
   خلفية الصورة: التدرج الخطي (45 درجة ، # c670ca 0٪ ، # 25a5c8 52٪ ، # 20e275 90٪) ؛
}
html {
   الارتفاع: 100 ٪ ؛
}

وهذا كل شيء! ستبدو صفحتك هكذا:

امتداد كروم الخاص بك!

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