Как да инжектирам JavaScript код за автоматично манипулиране на уебсайтове

Като разработчици и потребители на интернет, често срещаме уебсайтове, които показват много изскачащи прозорци, от заявки за абонамент до платежни стени, реклами до известия и т.н.

Много пъти ежедневно използваме тези уебсайтове за всякакви неща и виждайки тези изскачащи прозорци отново и отново остарява!

Разработчиците могат да ги заобиколят, като отидат до конзолата и намерят селектори за манипулиране на обектния модел на документа на уебсайта (DOM) чрез добавяне или модифициране на CSS или JavaScript.

Но сега, благодарение на Google Chrome и неговия магазин за разширения, всеки може автоматично да инжектира код във всеки уебсайт. Ще преминем към процеса стъпка по стъпка в това малко ръководство.

1. Инсталиране на разширението за инжектиране на кода

Следното важи само ако използвате Google Chrome. Инсталирайте разширението по избор на JavaScript за уебсайтове. Това малко разширение ви позволява автоматично да стартирате JavaScript на всеки уебсайт и запазва кода за бъдещи посещения във вашия уеб браузър.

Първо посетете уебсайта с досадни изскачащи прозорци, които често използвате. За този урок използвам уебсайта на The Washington Post:

2. Намиране на DOM елементи и създаване на инжекционен код

Отворете инструментите си за разработчици на Chrome, като натиснете 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.

3. Тестване на инжекционния код

Тествайте кода си в конзолата за разработчици на Chrome, за да се уверите, че работи.

Екранна снимка, показваща уебсайта на The Washington Post със статия, в която се споменава Андрю Янг, също инструментите за разработчици на Chrome.

Както можете да видите по-горе, кодът работи.

Сега е време да го добавите към разширението, персонализиран JavaScript за уебсайтове и да тествате дали кодът ще работи при бъдещи посещения. За да го добавите, щракнете с левия бутон върху иконата на разширението в адресната лента и добавете персонализирания фрагмент, след което щракнете върху запазване.

Страницата ще се презареди незабавно, за да се опита да тества добавения код.

Екранна снимка, показваща уебсайта на The Washington Post със статия, в която се споменава Андрю Янг, също инструментите за разработчици на Chrome.

4. Кодът за инжектиране не работи, какво сега?

След като го тествахме, вградената рамка не изчезна така, както го изпробвахме в конзолата. Една от причините може да бъде, че 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 секунди преди да се изпълни и voilà работи перфектно .

Можете също да добавите слушател на събития, за да изчакате страницата да се зареди напълно.

5. Финални мисли

Например:

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

Но ако добавим изскачащия код след X секунди, горната функция няма да работи, така че по-добре се придържайте към функцията за изчакване.

Можете също да използвате разширението, за да добавите много други готини фрагменти, като например да блокирате реклами, да блокирате изскачащи прозорци, да увеличите стандартния шрифт на уебсайта, да увеличите отзивчивостта, да актуализирате външния му вид и т.н. След като се добавят фрагменти на JavaScript, те винаги ще се изпълняват при бъдещи посещения на тези уебсайтове.  

Специална благодарност на Abbey Rennemeyer от freeCodeCamp за редакционна обратна връзка при подготовката на тази статия.

ОТКАЗ ОТ ОТГОВОРНОСТ: Мненията, изразени в тази статия, са на автора (авторите) и не представляват вижданията на Университета Карнеги Мелън, нито на други компании (пряко или косвено), свързани с автора (авторите). Тези писания не са предназначени да бъдат крайни продукти, но по-скоро отражение на съвременното мислене, заедно с това, че са катализатор за дискусии и подобрения.

Можете да ме намерите на: Моят личен уебсайт, Medium, Instagram, Twitter, Facebook, LinkedIn или чрез моята SEO компания.