Как ввести код JavaScript, чтобы автоматически манипулировать веб-сайтами

Автор оригинала: FreeCodeCamp Community Member.

Как разработчики и пользователи Интернета, мы часто встречаемся на веб-сайтах, которые отображают много всплывающих окон, от запросов подписки на Paywalls, рекламу в уведомлениях и т. Д.

Много раз мы используем эти веб-сайты ежедневно для всех видов вещей, и увидящие эти всплывающие всплывающие всплывания и более старые!

Разработчики могут обойти их, перейдя на консоль и поиск селекторов, чтобы манипулировать веб-сайтом Модель объекта документа (Дом) путем добавления или модификации 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 Developers, чтобы убедиться, что он работает.

Как вы можете видеть выше, код работает.

Теперь пришло время добавить его в расширение, Пользовательский JavaScript для веб-сайтов И проверьте, если код будет работать на будущих посещениях. Чтобы добавить его, щелкните левой кнопкой мыши на значке расширения в адресной строке и добавьте пользовательский фрагмент, затем нажмите «Сохранить».

Страница немедленно перезагрузится, чтобы попытаться проверить ваш добавленный код.

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 они всегда будут работать на будущих посещениях этих сайтов.

Отказ от ответственности: Взгляды, выраженные в этой статье, являются теми из автора и не представляют взгляды Университета Карнеги Меллона, ни других компаний (прямо или косвенно), связанные с авторами. Эти сочинения не предназначены для того, чтобы быть окончательными продуктами, но скорее отражение тока, наряду с собой катализатор для обсуждения и улучшения.

Вы можете найти меня на: Мой личный сайт , Средний , Instagram , Twitter , Facebook , LinkedIn или через мой SEO Company Отказ