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

نشرت: 2022-06-03

ماذا لو تمكنت من تحقيق أقصى استفادة من التصفح؟ تعرف على كيفية إنشاء إضافات Google Chrome بنفسك.

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

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

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

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

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

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

ما الوظائف التي سيوفرها امتداد Google Chrome الخاص بنا؟

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

سوف تكتشف الكيفية

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

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

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

الخطوة 1: اصنع الملفات

عندما لا ترغب في مشاركة الامتداد الخاص بك ، يمكنك الاحتفاظ به على نظامك المحلي. لإنشاء امتدادنا ، نحتاج ببساطة إلى أربعة ملفات: صفحة HTML ، وملف CSS ، وملف JavaScript ، وملف JSON.

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

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

الخطوة 2: قم بإنشاء ملف البيان

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

 { "name": "MakeUseOf.com Automated Search", "version": "1.0.0", "description": "A search tool to find interesting articles", "manifest_version": 3, "author": "Samuel Garbett", "permissions": ["storage", "declarativeContent", "activeTab", "scripting"], "host_permissions": [""], "action":{ "default_popup": "index.html", "default_title": "MUO Auto Search" } }

الخطوة 3: قم بإنشاء HTML و CSS

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

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

 <html> <head> <title>MUO Auto Search</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>MUO Auto Search</h1> <a href="https://www.makeuseof.com/" target="_blank"><button>Go to MakeUseOf.com</button></a> <button>Start Random Search</button> </body> <script src="script.js"></script> </html>

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

 html { width: 400px; } body { font-family: Helvetica, sans-serif; } h1 { text-align: center; } #buttonOne { border-radius: 0px; width: 100%; padding: 10px 0px; } #buttonTwo { border-radius: 0px; width: 100%; padding: 10px 0px; margin-top: 10px; }

الخطوة 4: قم بإنشاء JavaScript

الخطوة الأخيرة في هذا الإجراء هي إنشاء ملف script.js الخاص بنا.

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

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

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

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

 // This method incorporates our autoSearch functionality into the page's code function insertScript() { // This chooses the operation's focused tab and invokes the autoSearch function chrome.tabs.query({active: true, currentWindow: true}, tabs => { chrome.scripting.executeScript({target: {tabId: tabs[0].id}, function: autoSearch}) }) // This closes the extension pop-up window that allows you to pick the website search bar window.close(); } // This is an event listener that detects when our "Start Random Search" button is clicked document.getElementById('buttonTwo').addEventListener('click', insertScript) // This code chooses a topic at random from an array and function autoSearch() { // This is an array in which we will store our search keywords const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac", "Linux", "Android", "Apple", "Internet", "Security", "Programming", "Entertainment", "Productivity", "Career", "Creative", "Gaming", "Social Media", "Smart Home", "DIY", "Review"]; // This creates a number between 0 and 19 at random let selectorNumber = Math.floor(Math.random() * 20); // The random number is used to choose an element from the array let selection = searchTerms[selectorNumber]; // This mimics clicking on the MUO website search button document.getElementById("js-search").click(); // This variables the MUO website search bar var searchBar = document.getElementById("js-search-input"); // This enters our arbitrary search query into the search field searchBar.value = searchBar.value + selection; // The process is completed by activating the online form document.getElementById("searchform2").submit(); }

الخطوة 5: تحميل الملفات إلى Chrome: / extension

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

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

انقر فوق Load Unpacked في الزاوية اليسرى العلوية ، ثم حدد المجلد الذي يحتوي على ملفات الامتداد الخاصة بك وانقر فوق تحديد مجلد .

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

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

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

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

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