'في حياتنا الحالية ، نحن أكثر حرصًا على استخدام تطبيقات الوسائط الاجتماعية ومحرك بحث Google لأغراض الترفيه والبحث لدينا ، أي البحث عن بعض الموضوعات التعليمية عبر محرك البحث' Google 'واكتساب المعرفة العامة أيضًا. لاستخدام محرك بحث Google للبحث عن شيء ما ، يجب أن يكون لدينا متصفح مثبت بالفعل على هواتفنا المحمولة أو أجهزة الكمبيوتر المحمولة أو أجهزة الكمبيوتر الشخصية. يعد متصفح 'Google Chrome' أحد أكثر المتصفحات استخدامًا وفعالية في قرننا هذا ، والذي جاء بالعديد من الوظائف الجيدة جنبًا إلى جنب مع فائدة الامتدادات. 'الامتداد' هو البرنامج المساعد الموجود في أي متصفح لتقييد مواقع الويب والوظائف المختلفة أو السماح بها. لا تأتي هذه الامتدادات عادة في ثناياه عوامل ؛ يجب عليك إضافة كل امتداد إلى متصفحك بشكل منفصل كلما لزم الأمر. إذا كنت خبيرًا قليلًا في التكنولوجيا ، فقد تعرف استخدام ملفات البيان JSON لإنشاء امتداد وإضافته في بضع خطوات. وبالتالي ، ستغطي هذه المقالة جميع هذه الخطوات لإنشاء امتداد جديد على متصفح Google Chrome.
قبل إلقاء نظرة على طريقة إنشاء امتداد ، تحتاج إلى التأكد من تشغيل متصفح Google Chrome بالفعل وأن محرك بحث 'Google' لا يحتوي على أي خلفية. يمكنك أن ترى أن الصورة المرفقة أدناه ليس لها خلفية لمحرك البحث 'Google.com' ، أي خلفية بيضاء فقط. '
إضافة مجلد ملحق
افتح أداة Visual Studio Code الخاصة بك بسرعة من تطبيقات نظام Windows الخاص بك. قد يستغرق الأمر ما يصل إلى دقيقة واحدة لفتح Visual Studio Code بشكل صحيح وتمكينه لاستخدامنا. بعد أن تم تشغيله بشكل صحيح وجاهز للاستخدام ، أضفنا المجلد الذي تم إنشاؤه بالفعل 'ملحق' فيه عبر قائمة قائمة 'ملف' في شريط المهام العلوي الموضح أدناه. بعد إنشاء مجلد 'الامتداد' ، أضفنا مجلدًا آخر باسم 'صورة' فيه يحتوي على الصور لاستخدامها كرمز للملحق في المتصفح. إلى جانب ذلك ، أضفنا ملف 'manifest.json' وملف جافا سكريبت واحد باسم 'script.js' لإنشاء امتداد جديد وإضافته إلى المتصفح. لنبدأ من ملف manifest.json بالنقر المزدوج عليه لبدء العمل في JSON لإنشاء امتداد واستخدامه لتغيير خلفية 'Google'.
إنشاء ملف البيان
في ملف manifest.json ، يجب إضافة رمز 'JSON' الموضح أدناه. هذا الرمز هو نص التكوين الفعلي لإنشاء وإضافة امتداد لمتصفح Google Chrome. بدأ كود JSON بتهيئة إصدار بيان المتغير كـ '2' واسم الامتداد المراد إنشاؤه ، أي 'تغيير الخلفية'. بعد ذلك ، أضفنا الوصف المختصر لملحقنا داخل متغير 'الوصف'.
إلى جانب ذلك ، أضفنا إصدار الامتداد كـ '1.0'. بعد إنشاء جميع التكوينات الأساسية لـ 'الامتداد' ، نحتاج إلى إضافة المسار إلى أيقونة الصورة لاستخدامها كرمز للامتدادات. تم تحديد 'المتصفح' المتغير لتعيين رمز الامتداد لشريط المهام العلوي لمتصفح Google Chrome ، أي حيث يتم عرض جميع الملحقات بعد تمكينها للاستخدام المستقبلي لمواقع معينة أو جميعها. بعد ذلك ، أضفنا المسار إلى ثلاثة ملفات صور مختلفة الأحجام حتى يتمكن المتصفح من استخدام ملفات مختلفة في كل مرة.
إلى جانب ذلك ، تم استخدام متغير 'page_action' لعرض الصورة المراد عرضها بعد النقر على أيقونة 'الامتدادات' من شريط المهام العلوي في Google Chrome. تم استخدام المتغير 'Default_icon' بداخله ، إلى جانب قيم المسار الثلاث المختلفة للصور التي سيتم استخدامها كرموز في كل إعادة تحميل. يتم استخدام ثلاثة ملفات صور مختلفة لهذا الغرض. يأخذ متغير content_scripts ما مجموعه متغيرين جديدين فيه ، أي المطابقات و CSS. يحتوي متغير 'التطابقات' على المسار إلى موقع الويب المطلوب تغييره بعد إنشاء هذا الامتداد الجديد. إلى جانب ذلك ، يحتوي المتغير 'CSS' على اسم ملف CSS لاستخدامه لتصميم Google.com بعد التقدم بطلب للحصول على الامتداد ، أي تصميم Google.com بعد كل إعادة تحميل عند تمكين الامتداد. الآن بعد أن اكتمل هذا الرمز وجاهزًا للاستخدام ، ما عليك سوى حفظه بسرعة والانتقال نحو ملف 'main.css'.
في ملف main.css CSS ، أضفنا نمطًا لإنشاء امتداد ملف البيان الخاص بنا. سيتم تطبيق النمط باستخدام علامة html 'body' ، أي ليتم تطبيقها على منطقة 'body' الكاملة لملف البيان. لقد قمنا بإعداد الخلفية الجديدة لموقع Google.com باستخدام 'عنوان URL' لملف صورة من محرك البحث. الآن ، احفظ الكود الخاص بك قبل أي شيء.
بعد إكمال الرموز المطلوبة ، مثل ملف manifest.json و main.css ، يتعين علينا فتح الأداة المساعدة Extensions على متصفح Google Chrome عبر عنوان URL chrome: // extensions ”في علامة التبويب الجديدة. تم فتح منطقة الأدوات المساعدة للملحقات. من وضع المطور الخاص به ، تحتاج إلى تحميل مجلد 'الامتداد' غير المضغوط من نظامك المحلي لجعله امتدادًا عبر الزر 'تحميل غير مضغوط' المعروض في الصورة أدناه. تمت إضافة الامتداد بشكل فعال إلى متصفح Chrome ، كما هو معروض. قم بإزالة الأخطاء لجعلها تعمل بشكل كامل.
من رمز 'الامتداد' ، اختر امتداد 'تغيير الخلفية' لعرضه على شريط المهام ، أي امتداد الرمز 'C'.
بعد إعادة تحميل Google.com ، تم تحديث خلفيته باستخدام هذا الامتداد.
استنتاج
بدءًا من شرح استخدام المتصفحات في نظام Windows ، ناقشنا أيضًا أهمية الإضافات في أي متصفح. بعد شرح موجز للإضافات ، أوضحنا طريقة استخدام ملف JSON البيان لإنشاء امتداد لمتصفح Google Chrome وكيفية استخدامه لتغيير الخلفية لمحرك بحث 'Google.com'. بعد تحميل الامتداد على Google chrome ، كنا نستخدمه على Google.com لتغيير خلفيته.