Как запустить 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';
})();
Букмарклеты по-настоящему полезны и сохраняются между сеансами. Но у них есть реальные ограничения:
- Они срабатывают только когда ты кликаешь по ним вручную — никогда автоматически.
- Всё нужно втиснуть в один URL, поэтому длинные скрипты быстро становятся нечитаемыми.
- Строгая Content Security Policy на некоторых сайтах может их заблокировать.
Метод 3 — постоянное правило (автоматически)
Чтобы JavaScript срабатывал автоматически каждый раз, когда ты открываешь подходящую страницу, тебе нужно расширение, которое внедряет его за тебя. JustZix делает это с помощью правил: шаблон URL плюс код для запуска. Он бесплатен, работает в Chrome (а также Edge, Brave, Opera, Vivaldi) и не требует аккаунта.
Разбор — правило, которое запускает твой JS
- Установи JustZix со страницы загрузки.
- Открой страницу, которую хочешь улучшить.
- Щёлкни по иконке JustZix и выбери Новое правило.
- Задай шаблон URL, например
https://example.com/*. - Открой панель JS и вставь свой скрипт.
- Сохрани. Теперь скрипт срабатывает при каждой загрузке подходящей страницы.
Пока ты собираешь скрипт, 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 | Да | Да | Изменений, которые нужны при каждом посещении |
Отладка, когда что-то не работает
- Проверь тайминг. Если элемента ещё нет, оберни свой код в
MutationObserver, как выше. - Читай консоль. Ошибки указывают прямо на строку, которая дала сбой.
- Тестируй маленькими частями. Запускай куски в REPL перед сохранением всего скрипта.
- Жёстко ограничивай область. Точный шаблон URL удерживает скрипт подальше от страниц, которые он сломал бы.
Смотри также
Хочешь, чтобы твой JavaScript срабатывал автоматически при каждом посещении, без вставки его каждый раз? JustZix бесплатен — установи его со страницы загрузки и преврати свой сниппет в правило.
Оцени эту статью
Оценок пока нет — оцени первым.