← Все статьи

Туториалы

Как запустить JavaScript на любой веб-странице — руководство для новичков

Иногда сайт почти подходит — тебе просто хочется, чтобы он делал одну дополнительную вещь. Решением часто служат несколько строк JavaScript. Это руководство для новичков показывает, как запустить JavaScript на любой веб-странице, от быстрого разового запуска в консоли до правила, которое срабатывает автоматически при каждом посещении, с реальными примерами по ходу дела.

Краткая заметка о безопасности прежде всего

JavaScript, который ты запускаешь на странице, обладает теми же полномочиями, что и сама страница — он может читать содержимое, кликать по элементам и отправлять запросы. Поэтому правило простое и не обсуждается: запускай только тот код, который ты понимаешь. Никогда не вставляй скрипт от незнакомца, из комментария или из видео «сделай этот трюк» в консоль — именно так работают мошенничества с кражей аккаунтов. Каждый пример ниже достаточно короткий, чтобы прочитать и понять его полностью.

Метод 1 — консоль DevTools (разовый запуск)

В каждом браузере есть консоль JavaScript. Нажми F12 и открой вкладку Console. Набери выражение, нажми Enter, и оно немедленно выполнится на текущей странице:

// Count every link on the page
document.querySelectorAll('a').length

Консоль идеальна для экспериментов и быстрых проверок. Её ограничение: ничего не сохраняется. Перезагрузи страницу — и твой код исчез, тебе пришлось бы вставлять его снова каждый раз.

Метод 2 — букмарклеты (сохранены, но вручную)

Букмарклет — это закладка браузера, чей URL — это JavaScript вместо адреса. Кликни по закладке, и код выполнится на текущей странице. Выглядит это так:

javascript:(function(){
  document.body.style.fontFamily = 'Georgia, serif';
})();

Букмарклеты по-настоящему полезны и сохраняются между сеансами. Но у них есть реальные ограничения:

Метод 3 — постоянное правило (автоматически)

Чтобы JavaScript срабатывал автоматически каждый раз, когда ты открываешь подходящую страницу, тебе нужно расширение, которое внедряет его за тебя. JustZix делает это с помощью правил: шаблон URL плюс код для запуска. Он бесплатен, работает в Chrome (а также Edge, Brave, Opera, Vivaldi) и не требует аккаунта.

Разбор — правило, которое запускает твой JS

  1. Установи JustZix со страницы загрузки.
  2. Открой страницу, которую хочешь улучшить.
  3. Щёлкни по иконке JustZix и выбери Новое правило.
  4. Задай шаблон URL, например https://example.com/*.
  5. Открой панель JS и вставь свой скрипт.
  6. Сохрани. Теперь скрипт срабатывает при каждой загрузке подходящей страницы.

Пока ты собираешь скрипт, REPL JS-консоли прямо во вкладке позволяет тестировать выражения на живой странице, а Output Console из шести вкладок показывает логи, сетевую активность и события DataLayer — так что тебе не нужно держать DevTools открытыми одновременно. Подробнее на странице возможностей.

Пример 1 — очистить зашумлённую страницу

Убери липкие элементы, которые следуют за тобой вниз по странице:

// Remove sticky headers and floating widgets
document.querySelectorAll('*').forEach(el => {
  const pos = getComputedStyle(el).position;
  if (pos === 'fixed' || pos === 'sticky') {
    el.style.position = 'static';
  }
});

Пример 2 — авто-клик по кнопке

Некоторые сайты прячут контент за кнопкой «Показать больше». Кликни по ней за себя автоматически:

// Click the first "Show more" button on load
const btn = [...document.querySelectorAll('button')]
  .find(b => /show more|read more/i.test(b.textContent));
if (btn) btn.click();

Пример 3 — дождаться контента, который загружается с задержкой

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

// Run once the target element shows up
const observer = new MutationObserver(() => {
  const target = document.querySelector('.comments-section');
  if (target) {
    target.scrollIntoView();
    observer.disconnect();
  }
});
observer.observe(document.body, { childList: true, subtree: true });

Этот приём — разница между скриптом, который «иногда работает», и тем, который работает надёжно — большинство ошибок тайминга в скриптах страниц происходят из-за запуска до того, как элемент существует.

Выбор правильного метода

МетодСохраняется?Автоматически?Лучше всего для
Консоль DevToolsНетНетРазовых экспериментов
БукмарклетДаНет (клик)Изредка выполняемых вручную действий
Правило JustZixДаДаИзменений, которые нужны при каждом посещении

Отладка, когда что-то не работает

Смотри также

Хочешь, чтобы твой JavaScript срабатывал автоматически при каждом посещении, без вставки его каждый раз? JustZix бесплатен — установи его со страницы загрузки и преврати свой сниппет в правило.

Оцени эту статью

Оценок пока нет — оцени первым.

Попробуй сам

Установи JustZix и вставь любой сниппет из этой статьи. Две минуты от нуля до работающего правила на всех твоих устройствах.

Получить JustZix

Возможности · Как это работает · Примеры · Применение