كيفية إدخال كود JavaScript لمعالجة مواقع الويب تلقائيًا

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

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

يمكن للمطورين الالتفاف على هذه من خلال الانتقال إلى وحدة التحكم والعثور على المحددات لمعالجة نموذج كائن مستند موقع الويب (DOM) عن طريق إضافة أو تعديل CSS أو JavaScript.

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

1. تثبيت الامتداد لإدخال الكود

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

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

2. تحديد موقع عناصر DOM وإنشاء كود الحقن

افتح أدوات مطور Chrome بالضغط على F12 ، ثم حدد العنصر من خلال النافذة المنبثقة.

في هذا المثال ، يحتوي iframeالعنصر ذو المعرف wallIframeعلى النافذة المنبثقة مع بعض الخلفية الباهتة في الخلف.

الآن ، سنستخدم مقتطف JavaScript صغيرًا لإضافة CSS مخصص ومعرفة ما إذا كان بإمكاننا إخفاء النافذة المنبثقة.

/* DOM Manipulation * If you want to update / add single style in DOM Element style attribute you can use this function: * inject javascript after page reloads. */ function setCssStyle(el, style, value) { var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" + style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")), idx; if (result) { idx = result.index + result[0].indexOf(result[1]); el.style.cssText = el.style.cssText.substring(0, idx) + style + ": " + value + ";" + el.style.cssText.substring(idx + result[1].length); } else { el.style.cssText += " " + style + ": " + value + ";"; } } var element = document.getElementById("wallIframe"); setCssStyle(element, "display","none !important");

كما ترى ، في الكود أعلاه ، نبرز العنصر wallIframeونخفيه بإضافة CSS مضمنة.

3. اختبار كود الحقن

اختبر التعليمات البرمجية الخاصة بك في وحدة تحكم مطوري Chrome للتأكد من أنها تعمل.

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

كما ترى أعلاه ، يعمل الرمز.

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

سيتم إعادة تحميل الصفحة على الفور لمحاولة واختبار الكود الذي أضفته.

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

4. رمز الحقن لم يعمل ، ماذا الآن؟

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

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

setTimeout( function() { function setCssStyle(el, style, value) { var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" + style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")), idx; if (result) { idx = result.index + result[0].indexOf(result[1]); el.style.cssText = el.style.cssText.substring(0, idx) + style + ": " + value + ";" + el.style.cssText.substring(idx + result[1].length); } else { el.style.cssText += " " + style + ": " + value + ";"; } } var element = document.getElementById("wallIframe"); setCssStyle(element, "display", "none !important"); }, 10000);

الآن ينتظر الرمز 10 ثوانٍ قبل أن يتم تنفيذه ، ويعمل بشكل مثالي .

يمكنك أيضًا إضافة مستمع حدث لانتظار تحميل الصفحة بالكامل.

5. خواطر نهائية

على سبيل المثال:

document.addEventListener("DOMContentLoaded", function() { // Your function goes here }

ولكن ، إذا أضفنا الرمز المنبثق بعد X ثانية ، فلن تعمل الوظيفة أعلاه ، لذا من الأفضل الالتزام بوظيفة المهلة.

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

شكر خاص لـ Abbey Rennemeyer من freeCodeCamp على التعليقات التحريرية في إعداد هذا المقال.

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

يمكنك أن تجدني على: موقع الويب الشخصي الخاص بي أو Medium أو Instagram أو Twitter أو Facebook أو LinkedIn أو من خلال شركة تحسين محركات البحث الخاصة بي.