كيفية جعل تمديد الكروم

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

انظر أيضًا مقالتنا "أفضل أجهزة Chromebook التي تعمل باللمس"

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

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

ملحقات كروم

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

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

قم بإنشاء امتداد Chrome الخاص بك

مع القليل من البحث ، يمكنك تعديل امتدادك لفعل ما تريد ولكن أحب فكرة فحص سرعة زر واحدة لذلك سأذهب مع ذلك.

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

ستحتاج إلى إنشاء مجلد على جهاز الكمبيوتر الخاص بك للاحتفاظ بكل شيء فيه. قم بإنشاء ثلاثة ملفات فارغة ، manifest.json ، popup.html و popup.js. انقر بزر الماوس الأيمن داخل المجلد الجديد وحدد ملفًا جديدًا ونصًا. افتح كل ملف من ملفاتك الثلاثة في محرر النصوص الذي تختاره. تأكد من حفظ popup.html كملف HTML ويتم حفظ popup.js كملف JavaScript. قم بتنزيل رمز العينة هذا من Google أيضًا لأغراض هذا البرنامج التعليمي.

حدد manifest.json والصق ما يلي فيه:

{"manifest_version": 2، "name": "GTmetrix Page Speed ​​Analyzer"، "description": "استخدم GTmetrix لتحليل سرعة تحميل صفحة موقع الويب" ، "الإصدار": "1.0" ، "browser_action": {"default_icon" : "icon.png" ، "default_popup": "popup.html"} ، "الأذونات":}

كما ترون ، لقد قدمنا ​​لها العنوان والوصف الأساسي. لقد أطلقنا أيضًا إجراء متصفح يتضمن الرمز الذي قمنا بتنزيله من Google والذي سيظهر في شريط المتصفح و popup.html. Popup.html هو ما يسمى عند تحديد رمز الإضافة في المستعرض.

افتح popup.html والصق ما يلي فيه.

HTTP: //popup.js

محلل صفحات السرعة باستخدام GTMetrix

تحقق سرعة الصفحة!

Popup.html هو ما يسمى عند تحديد رمز الإضافة في المستعرض. لقد أطلقنا عليه اسمًا ، وقمنا بتسمية المنبثقة وأضفنا زرًا. سيؤدي تحديد الزر إلى استدعاء popup.js وهو الملف الذي سنكمله بعد ذلك.

افتح popup.js والصق ما يلي فيه:

document.addEventListener ('DOMContentLoaded'، function () {var checkPageButton = document.getElementById ('checkPage')؛ checkPageButton.addEventListener ('click'، function () {chrome.tabs.getSelected (null، function (tab) {d = document ؛ var f = d.createElement ('form') ؛ f.action = 'http://gtmetrix.com/analyze.html؟bm'؛ f.method = 'post' ؛ var i = d.createElement ( "الإدخال") ؛ i.type = 'مخفي' ؛ i.name = 'url' ؛ i.value = tab.url ؛ f.appendChild (i) ؛ d.body.appendChild (f) ؛ f.submit () ؛})؛}، false)؛}، false)؛

لن أتظاهر بمعرفة جافا سكريبت وهذا هو السبب في أنه كان من السهل أن يحتوي موقع SitePoint على الملف بالفعل. كل ما أعرفه هو أنه يخبر GTmetrix بتحليل الصفحة في علامة تبويب Chrome الحالية. حيث تقول "chrome.tabs.getSelected" ، فإن الامتداد يأخذ عنوان URL من علامة التبويب النشطة ويدخله في نموذج الويب. هذا بقدر ما أستطيع أن أذهب.

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

الآن لدينا الإطار الأساسي المعمول به ، نحتاج إلى اختبار لنرى كيف يعمل.

1. افتح Chrome ، وحدد المزيد من الأدوات والإضافات.
2. حدد المربع بجوار وضع المطور لتمكينه.
3. حدد تحميل ملحق unpacked وانتقل إلى الملف الذي قمت بإنشائه لهذا الملحق.
4. حدد "موافق" لتحميل الملحق ويجب أن يظهر في قائمة الإضافات.
5. حدد المربع بجوار ممكّن في القائمة ويجب أن يظهر الرمز في متصفحك.
6. حدد الرمز في المستعرض حتى يظهر الإطار المنبثق.
7. حدد الزر ، تحقق من هذه الصفحة الآن!

يجب أن تشاهد الصفحة قيد التحقق وتقرير الأداء من GTmetrix. كما ترون من موقعي الخاص في الصورة الرئيسية ، لدي القليل من العمل الذي يجب القيام به لتسريع تصميمي الجديد!

أخذ ملحقات إلى الأمام

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

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

كل الفضل لجون Sonmez في SitePoint للدليل الأصلي. لقد قام بالعمل الشاق ، أعيد تنظيمه قليلاً وقم بتحديثه قليلاً.

هل أنشأت امتداد Chrome الخاص بك؟ هل ترغب في الترويج لها أو مشاركتها؟ واسمحوا لنا أن نعرف أدناه إذا كنت تفعل!