حقن أكواد JavaScript لتخصيص وتعديل سلوك المواقع تلقائياً

مقدمة: تحكم في تجربة تصفحك للويب باستخدام JavaScript

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

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

1. تثبيت الإضافة اللازمة لحقن الأكواد

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

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

افتح أدوات المطور في متصفح كروم بالضغط على مفتاح F12، ثم حدد العنصر الذي يمثل النافذة المنبثقة. في هذا المثال، العنصر iframe الذي يحمل المعرف ID وهو 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 مباشرة (inline CSS) بقيمة display: none !important. هذا يضمن أن العنصر لن يظهر على الصفحة.

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

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

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

4. ماذا لو لم يعمل كود الحقن؟ حلول متقدمة

بعد اختباره، قد لا يختفي إطار iframe كما حدث عندما اختبرناه في وحدة التحكم. أحد الأسباب المحتملة هو أن إطار iframe يتم تحميله بعد عدة ثوانٍ من تحميل الصفحة الرئيسية. يمكننا البحث في سجل الشبكة (network log) لمعرفة ما إذا كان هذا هو الحال. ولكن لتوفير الوقت، سنحاول إضافة دالة تأخير زمني (timeout function) إلى المقتطف الأصلي لدينا لمعرفة ما إذا كان ذلك سيساعد.

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 ثوانٍ (10000 ميلي ثانية) قبل أن يتم تنفيذه، وهكذا يعمل بشكل مثالي. يمكنك أيضاً إضافة مستمع حدث (event listener) للانتظار حتى يتم تحميل الصفحة بالكامل، ولكن في هذه الحالة، استخدام setTimeout هو الحل الأمثل.

5. استخدامات إضافية وإمكانيات غير محدودة

على سبيل المثال، يمكنك استخدام مستمع الحدث DOMContentLoaded بالطريقة التالية:

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

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

الخلاصة التقنية

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