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

هل سبق لك أن وجدت نفسك غير راضٍ عن الميزات التي تأتي مع متصفح الويب الخاص بك؟ حتى مع ساعات من البحث في Google Web Store تحت حزامك ، فليس من السهل دائمًا الضغط على "تنزيل" لتحسين تجربة تصفح الويب.

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

ما هو ملحق جوجل كروم؟

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

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

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

ماذا سيفعل ملحق جوجل كروم الخاص بنا؟

سنقوم ببناء امتداد Chrome بسيط يسمح لك بزيارة موقع Make Use Of على الويب وإجراء بحث عشوائي بناءً على فئات المقالات الموجودة على الموقع. هذا مشروع سريع وسهل ، لكنك ستتعلم الكثير.

سوف تتعلم كيف

• قم بإنشاء ملحق جوجل كروم
• أدخل رمزًا مخصصًا في صفحات الويب باستخدام ملحق Chrome
• إنشاء مستمعين للأحداث ومحاكاة النقرات
• توليد أرقام عشوائية
• التعامل مع المصفوفات والمتغيرات

بناء ملحق كروم DIY الخاص بك

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

الخطوة الأولى: إنشاء الملفات

يمكنك تخزين الإضافة على جهازك المحلي عندما لا تخطط لتوزيعها. نحتاج فقط إلى إنشاء أربعة ملفات مختلفة لإنشاء امتدادنا ؛ ملف HTML وملف CSS وملف JavaScript وملف JSON.

أطلقنا على ملفاتنا index.html و style.css و script.js و manifest.json. يجب أن يحمل ملف البيان هذا الاسم ليعمل بشكل صحيح ، ولكن يمكنك إعطاء الآخرين أي أسماء تريدها ، طالما قمت بتعديل التعليمات البرمجية وفقًا لذلك.

يجب عليك وضع هذه الملفات في نفس المجلد الجذر.

الخطوة الثانية: بناء ملف البيان

يأتي ملف البيان مع كل امتداد Google Chrome. يوفر معلومات حول امتداد Chrome مع وضع بعض الإعدادات الأساسية في مكانها. يجب أن يحتوي هذا الملف على اسم ورقم الإصدار ووصف وإصدار بيان. لقد قمنا أيضًا بتضمين أذونات وإجراء يتم تحميله index.html كالنافذة المنبثقة التي تظهر للامتداد.

{
"اسم": "MakeUseOf.com البحث الآلي",
"الإصدار": "1.0.0",
"وصف": "أداة بحث للعثور على مقالات مثيرة للاهتمام",
"البيان_ الإصدار": 3,
"مؤلف": "صموئيل جاربيت",
"أذونات": ["تخزين", "المحتوى التوضيحي", "activeTab", "البرمجة النصية"],
"host_permissions": [""],
"عمل":{
"default_popup": "index.html",
"default_title": "البحث التلقائي MUO"
 }
}

الخطوة الثالثة: بناء HTML & CSS

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

يحتوي ملف index.html الخاص بنا على علامات html و head و body. تحتوي علامة الرأس على عنوان صفحة ورابط إلى ورقة الأنماط الخاصة بنا ، بينما يكون النص الأساسي موطنًا لعلامة h1 ، a الذي ينقلك إلى MakeUseOf.com وزر آخر سنستخدمه كمحفز لملف النصي. تشتمل علامة البرنامج النصي في نهاية المستند على الامتداد script.js ملف.

<لغة البرمجة>
<رئيس>
<العنوان>البحث التلقائي MUO</title>
<meta charset ="UTF-8">
<ارتباط rel ="ورقة الأنماط" href ="style.css">
</head>
<هيئة>
<h1>البحث التلقائي MUO</h1>
<أ href ="https://www.makeuseof.com/" الهدف ="_فارغ"><معرف الزر ="زر واحد">انتقل إلى MakeUseOf.com</button></أ>
<معرف الزر ="زر">ابدأ البحث العشوائي</button>
</body>
<النصي src ="script.js"></script>
</html>

يعد ملف CSS الخاص بنا أبسط من ملف HTML الخاص بنا ، حيث يغير نمط خمسة عناصر فقط. لدينا قواعد لعلامات html و body ، بالإضافة إلى علامات h1 وكلا الأزرار.

لغة البرمجة {
 العرض: 400 بكسل ؛
}
هيئة {
 عائلة الخطوط: Helvetica ، sans-serif ؛
}
h1 {
 محاذاة النص: مركز ؛
}
#buttonOne {
 نصف قطر الحدود: 0 بكسل ؛
 العرض: 100٪؛
 الحشو: 10 بكسل 0 بكسل ؛
}
#buttonTwo {
 نصف قطر الحدود: 0 بكسل ؛
 العرض: 100٪؛
 الحشو: 10 بكسل 0 بكسل ؛
 أعلى الهامش: 10 بكسل ؛
}

الخطوة 4: بناء JavaScript

كخطوة أخيرة في هذه العملية ، حان الوقت لإنشاء ملف script.js.

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

يتبع ذلك مستمع الحدث الذي ينتظر حتى يتم النقر فوق الزر بدء البحث العشوائي قبل استدعاء الوظيفة التي اكتشفناها أعلاه.

ال البحث التلقائي() الوظيفة أكثر تعقيدًا بعض الشيء. يبدأ بمصفوفة تحتوي على 20 فئة على موقع MUO ، مما يمنحنا عينة جيدة للاستفادة منها عند إجراء عمليات البحث العشوائية. بعد ذلك ، نستخدم ملف Math.random () دالة لتوليد رقم عشوائي بين 0 و 19 من أجل تحديد إدخال من صفيفنا.

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

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

// تقوم هذه الوظيفة بإدراج وظيفة البحث التلقائي في كود الصفحة
وظيفةإدراج() {
// هذا يحدد علامة التبويب المركزة للعملية ويمرر وظيفة البحث التلقائي
 طلب chrome.tabs.query ({نشيط: حقيقي, الحالي: حقيقي} ، علامات التبويب => {
كروم.scripting.executeScript({هدف: {tabId: علامات التبويب [0].هوية شخصية}، وظيفة: البحث التلقائي})
 })
// يؤدي هذا إلى إغلاق النافذة المنبثقة للتمديد لتحديد شريط بحث موقع الويب
نافذة او شباك.قريب()؛
}
// هذا مستمع حدث يكتشف النقرات على "يبدأ عشوائي بحث" زر
document.getElementById ('زر') .addEventListener ('انقر'، insertScript)
// تحدد هذه الوظيفة موضوعًا عشوائيًا من مصفوفة و 
وظيفةالبحث التلقائي() {
// هذه مصفوفة لتخزين مصطلحات البحث الخاصة بنا
 شروط البحث الثابت = ["الكمبيوتر الشخصي والجوال", "أسلوب الحياة", "المعدات", "شبابيك", "ماك",
"لينكس", "ذكري المظهر", "تفاحة", "إنترنت", "حماية",
"برمجة", "وسائل الترفيه", "إنتاجية", "حياة مهنية", "خلاق",
"الألعاب", "وسائل التواصل الاجتماعي", "المنزل الذكي", "افعلها بنفسك", "استعراض"];
// هذا يولد عددًا عشوائيًا بين 0 و 19
يترك selectorNumber = رياضيات.أرضية(رياضيات.عشوائي() * 20);
// يستخدم هذا الرقم العشوائي لتحديد إدخال من المصفوفة
يترك اختيار = searchTerms [selectorNumber] ؛
// هذا يحاكي نقرة على أيقونة البحث في موقع MUO
 document.getElementById ("شبيبة البحث").انقر()؛
// يؤدي ذلك إلى تعيين شريط بحث موقع الويب MUO كمتغير
فار searchBar = وثيقة.getElementById ("js-search-input") ؛
// يؤدي هذا إلى إدراج مصطلح البحث العشوائي في شريط البحث
 searchBar.value = searchBar.value + اختيار ؛
// هذا ينهي العملية عن طريق تفعيل نموذج الموقع
 document.getElementById ("searchform2").إرسال()؛
}

الخطوة 5: إضافة ملفاتك إلى Chrome: // extensions

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

افتح Google Chrome ، وانتقل إلى chrome: // extensions وتأكد من أن شريط تمرير وضع المطور في الزاوية اليمنى العليا في وضع التشغيل.

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

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

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

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

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

يمكن أن تساعدك ملحقات Chrome على رفع مستوى التصفح لديك ، ولكن حاول الابتعاد عن بعض ملحقات Chrome المشبوهة المعروفة لتصفح آمن وآمن.

6 Shady Google Chrome Extensions يجب عليك إلغاء تثبيتها في أسرع وقت ممكن

اقرأ التالي

نبذة عن الكاتب