نحوه تزریق کد جاوااسکریپت برای دستکاری خودکار وبسایت‌ها

به‌عنوان برنامه‌نویس‌ها و کاربران اینترنت، ما معمولا بعضی مواقع وارد وبسایت‌هایی می‌شویم که pop-upهای مختلفی برای عضویت نمایش می‌دهند یا درخواست پول می‌کنند یا تبلیغات و نوتیفیکیشن و ... نشان می‌دهند.

در بیشتر مواقع، ما هر روز از آن وبسایت‌ها برای همه چیز استفاده می‌کنیم و آن pop-up‌ها و ... را که می‌آیند می‌بینیم.

برنامه‌نویس‌ها می‌تواند با رفتن به console یا دستکاری DOM و CSS و javascript وبسایت، کمی از مشکل را حل کنند.

اما هم‌اکنون با کمک گوگل کروم و افزونه‌های آن، هر شخصی می‌تواند هر کدی را به صورت خودکار به هر وبساتی تزریق کند. ما در این مقاله‌ی کوچک مرحله به مرحله این کار را انجام می‌دهیم.

۱. نصب افزونه برای تزریق کد

این مرحله فقط در صورتی جواب می‌دهد که شما از گوگل کروم استفاده کنید. این افزونه را نصب کنید. این افزونه‌ی کوچک به شما این اجازه را می‌دهد که کد‌های جاوااسکریپت خودتان را روی هر سایتی به صورت اتوماتیک اجرا کنید. هم چنین، این افزونه کد‌های شما را برای مراجعه‌های بعدی به وبسایت ذخیره می‌کند.

قبل از هر چیز، وبسایت مورد نظر را باز کنید تا pop-up اذیت کننده مورد نظر شما بالا بیاید. برای این آموزش من از وبسایت Washington Post استفاده می‌کنم.

۲. پیدا کردن المان‌های DOM و ساخت کد تزریقی

Developer tools مرورگر خود را با زدن کلید f12 باز کنید و المان pop-up را تشخیص دهید.

در مثال ما، یک iframe با آیدی wallframe حاوی pop-up مورد نظر ماست.

هم‌اکنون، ما کمی جاوااسکریپت اضافه می‌کنیم تا بتوانیم کمی کد css به سایت تزریق کنیم و pop-up را محو کنیم.

/* 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");

همانطور که می‌بینید، ما المانی با آیدی wallframe را هدف گرفته‌ایم و آن را با استفاده از کمی css اینلاین، محو کردیم.

۳. تست کردن کد تزریق شده

قبل از هر چیز، کد خود را داخل developers tools گوگل کروم اجرا کنید تا از اجرای درست آن مطمئن شوید.

همان‌طور که در عکس بالا دیدید، کد ما درست کار می‌کند.

حالا وقت آن رسیده که این کد را به اکستنشن اضافه کنیم و برای مراجعه‌های بعدی تست کنیم. برای اضافه کردن آن، روی آیکون افزونه در نوار address کلیک چپ کنید و کد نوشته شده را به آن اضافه کنید و روی save کلیک کنید.

صفحه همان لحظه ریلود می‌شود تا کد نوشته شده توسط شما را تست کند.

۴. کد من کار نکرد، چه کار کنم؟

بعد از تست کردن آن، المان ifram بر خلاف آنچه در کنسول دیدیم محو نشد. یکی از دلایل آن می‌تواند این باشد که آن iframe بعد از گذشتن x ثانیه از بالا آمدن سایت لود می‌شود.

شما می‌توانید برای مطمئن شدن از این قضیه، نگاهی به تب network‌ در developers tools بیاندازید. اما ما می‌خواهیم با اضافه کردن یک timeout به کدمان، آن را درست کنیم.

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 ثانیه منتظر می‌ماند. و اگر تست کنید می‌بینید که کاملا درست کار می‌کند

شما همچنین می‌توانید یک event listener اضافه کنید که تا زمان لود شدن کامل صفحه بایستد.

۵. بخش نهایی

برای مثال:

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

اما اگرکد pop-up بعد از x ثانیه اجرا شود، این کد کار نمی‌کند. پس بهتر است که از همان timeout استفاده کنیم.

شما همچنین می‌توانید از این افزونه استفاده کنید تا تکه کد‌های بسیار زیباتری به سایت‌ها اضافه کنید. برای مثال بستن تبلیغات یا pop-upها یا حتی بزرگ کردن فونت وبسایت‌ها و ...

وقتی یک‌بار کد‌های جاوااسکریپت را اضافه کنید، برای همیشه با باز کردن آن صفحه؛ آن کدها خوانده می‌شوند.

منبع