Як вводити код JavaScript для автоматичного управління веб-сайтами

Як розробники та користувачі Інтернету, ми часто стикаємось із веб-сайтами, на яких відображається багато спливаючих вікон - від запитів на підписку до платіжних стін, реклами до сповіщень тощо.

Багато разів ми щодня використовуємо ці веб-сайти для різного роду речей, і бачимо, що ці спливаючі вікна знову і знову старіють!

Розробники можуть обійти їх, перейшовши до консолі та знайшовши селектори для маніпулювання об'єктною моделлю документа веб-сайту (DOM), додавши або змінивши CSS або JavaScript.

Але тепер, завдяки Google Chrome та його магазину розширень, кожен може автоматично вводити код на будь-який веб-сайт. У цьому маленькому посібнику ми поетапно перейдемо до процесу.

1. Встановлення розширення для введення коду

Наведене нижче стосується лише використання Google Chrome. Встановіть спеціальне JavaScript розширення для веб-сайтів. Це невелике розширення дозволяє автоматично запускати JavaScript на будь-якому веб-сайті та зберігає код для майбутніх відвідувань у вашому веб-браузері.

Спочатку відвідайте веб-сайт із надокучливими спливаючими вікнами, якими ви часто користуєтесь. Для цього підручника я використовую веб-сайт The Washington Post:

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, щоб переконатися, що він працює.

Знімок екрана, на якому показано веб-сайт The Washington Post зі статтею, де згадується Ендрю Ян, також інструменти розробника Chrome.

Як ви можете бачити вище, код працює.

Тепер настав час додати його до розширення, спеціального JavaScript для веб-сайтів і перевірити, чи буде код працювати при майбутніх відвідуваннях. Щоб додати його, клацніть лівою кнопкою миші піктограму розширення на адресному рядку та додайте власний фрагмент, а потім натисніть кнопку Зберегти.

Сторінка негайно перезавантажиться, щоб спробувати протестувати доданий код.

Знімок екрана, на якому показано веб-сайт The Washington Post зі статтею, де згадується Ендрю Ян, також інструменти розробника 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 секунд перед тим, як його виконати, і voilà він працює ідеально .

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

5. Заключні думки

Наприклад:

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

Але якщо ми додаємо спливаючий код через X секунд, функція вище не працюватиме, тому краще дотримуватися функції тайм-ауту.

Ви також можете використовувати розширення для додавання багатьох інших цікавих фрагментів, таких як блокування реклами, блокування спливаючих вікон, збільшення стандартного шрифту веб-сайту, підвищення чуйності, оновлення зовнішнього вигляду тощо. Після додавання фрагментів JavaScript вони завжди запускатимуться під час наступних відвідувань цих веб-сайтів.  

Особлива подяка Еббі Реннемейєру від freeCodeCamp за редакційні відгуки при підготовці цієї статті.

ВІДМОВА ПРО ВІДПОВІДАЛЬНІСТЬ: Погляди, висловлені в цій статті, належать до поглядів автора (авторів) і не відображають думки Університету Карнегі Меллона та інших компаній (прямо чи опосередковано), пов’язаних з автором (авторами). Ці роботи не мають на меті бути кінцевими продуктами, а все ж віддзеркаленням сучасного мислення, поряд із каталізатором для обговорення та вдосконалення.

Ви можете знайти мене на: Моєму особистому веб-сайті, Medium, Instagram, Twitter, Facebook, LinkedIn або через мою SEO-компанію.