Вы когда-нибудь заходили на сайт и думали: «Блин, почему кнопка не там?», «Ну кто выбрал этот ядовито-зелёный фон?», «Где тёмная тема, разработчики?!». А потом открывали DevTools и начинали править CSS прямо в инспекторе, просто чтобы посмотреть, как оно могло бы выглядеть.

Я делаю это постоянно. За годы работы с сайтами у меня собрался арсенал из пяти инструментов, которые позволяют перекроить практически любой сайт под себя. Это не хакерство, изменения видите только вы, на своей машине. По сути, это моддинг, как в играх: меняешь модельку, перекрашиваешь интерфейс, убираешь раздражающие элементы. Сайт остаётся прежним для всех остальных, а для вас он становится ровно таким, каким вы хотите его видеть.

💡 Быстрый обзор:

• Установите Stylish и выберите готовую тему на Userstyles.org, сайт изменится до загрузки
• Освойте Block Element в uBlock Origin, удалите с сайта любой раздражающий элемент за два клика
• Добавьте пользовательский скрипт через Tampermonkey, автоматизируйте действия на любимых площадках
• Откройте DevTools (F12) и редактируйте сайт как текст, все изменения исчезнут после перезагрузки
• Настройте Burp Suite как HTTP-прокси, перехватывайте и подменяйте данные на лету

1. Stylish, мгновенная смена внешности сайта

Stylish, моё любимое косметическое расширение для браузера. Оно применяет пользовательские стили к странице до того, как она отрисовалась. Никакой вспышки исходного дизайна, которая случается с пользовательскими скриптами: вы открываете YouTube и сразу видите свой розовый Hello Kitty, а не стандартную бело-красную тему.

Расширению уже больше десяти лет, сейчас оно принадлежит компании Similarweb и насчитывает 2 миллиона пользователей. В библиотеке Userstyles.org собрано более полумиллиона готовых тем, от тёмных режимов для Google Docs до ретро-вейва для YouTube.

Чем Stylish принципиально лучше ручных правок в DevTools? Тем, что стили постоянны: закрыли браузер, открыли завтра, тема на месте. А ещё удобно переключаться между темами в один клик, если на сайте их несколько.

Что можно сделать:

• Включить тёмную тему на любом сайте, где её нет
• Вернуть старый дизайн сайта после редизайна (да, кто-то наверняка уже написал такой стиль)
• Увеличить шрифт или контрастность для читаемости
• Скрыть отвлекающие элементы вроде «шапок-прилипал» или поп-апов с подпиской

Для создания собственного стиля понадобится CSS. Базовый синтаксис простой: селектор, свойство, значение. Для сложных стилей рекомендую альтернативу, Stylus, open-source менеджер стилей без телеметрии.

2. uBlock Origin, хирургическая блокировка элементов

uBlock Origin, это в первую очередь блокировщик рекламы, но его функция «Block Element» заслуживает отдельного места в этом списке. Она позволяет убрать с сайта что угодно: назойливый баннер, аватарку пользователя, которая вас бесит, счётчик «осталось 3 места по акции», виджет погоды, занимающий полстраницы.

Каждый раз, когда я вижу интернет без блокировщика, например, на чужом компе, я не могу поверить, сколько там мусора. Люди реально смотрят YouTube с пятью рекламными вставками на десятиминутное видео?

Как работает Block Element: правый клик по элементу → «Block Element» → uBlock подсвечивает цель и предлагает CSS-селектор. Можно подняться выше по DOM-дереву и расширить критерий, например, заблокировать не конкретный баннер, а весь контейнер с рекламным iframe. Фильтр сохраняется навсегда.

Продвинутый приём, вкладка «My Filters» в настройках. Туда можно вписать URL-фильтры с подстановочными знаками, чтобы запретить загрузку целых категорий ресурсов. Я так отключал проблемные JS-файлы плагинов и тем WordPress, когда искал конфликты совместимости на сайтах клиентов.

3. Tampermonkey, скрипты на любой случай

Tampermonkey, самый мощный инструмент в этом списке. Это менеджер пользовательских скриптов с 12 миллионами установок, который позволяет запускать собственный JavaScript на любом сайте. Если Stylish меняет внешность, а uBlock, удаляет лишнее, то Tampermonkey добавляет новое поведение.

Мой сценарий номер один, война против анти-адблок-попапов. Знаете схему: заходишь на сайт, блокировщик убирает рекламу, а сайт это детектит и выкатывает баннер «Пожалуйста, отключите блокировщик». uBlock иногда справляется, но если сайт использует рандомизированные классы и ID (чтобы проскальзывать мимо фильтров), в ход идёт Tampermonkey. Пишу скрипт, который ищет элемент с определённой формулировкой или изображением и удаляет весь родительский контейнер. Грубо, но работает.

Более мирные сценарии:

• Добавить кнопку «Скачать всё» на страницу с файлами
• Автоматически заполнять формы типовыми данными
• Включить HD-качество на YouTube по умолчанию (хотя для этого сейчас есть отдельные расширения)
• Расширить функциональность админки сайта, добавив горячие клавиши или панель быстрых действий

Готовые скрипты ищите на Greasy Fork и OpenUserJS. Там тысячи скриптов на все случаи, от скачивания видео до улучшения интерфейса GitHub. Для sensitive-операций (пароли, платежи) я рекомендую отключать Tampermonkey, или добавлять сайты в чёрный список в настройках расширения.

4. Инструменты разработчика, полигон для экспериментов

Я провожу в Chrome DevTools больше времени, чем в любой IDE. Разработка плагинов для WordPress, это во многом метод тыка: представил → поправил в инспекторе → понравилось → закодировал. Без DevTools я был бы в разы медленнее.

Для не-разработчиков инструменты разработчика, это песочница, где можно временно изменить сайт и увидеть результат мгновенно. Открываете DevTools (F12), переходите на вкладку Elements, выбираете Inspect (стрелочка в углу панели), и тыкаете в любую часть страницы. Редактируете текст, меняете цвет, двигаете блоки, удаляете элементы. После перезагрузки страницы всё возвращается на место.

Самый частый «непрограммистский» сценарий, подготовка скриншота или печатной версии. Прежде чем снимать, уберите со страницы всё лишнее: рекламные блоки, поп-апы, виджеты чатов, лишние колонки. Экспортируйте кнопкой Print Screen, получится чистая, лаконичная картинка, как будто сайт изначально такой и задумывался.

На вкладке Network есть ещё одна крутая фича: правый клик по любому запросу → «Block request URL» или «Block request domain». Использую, когда надо проверить, как сайт работает без конкретного скрипта или шрифта, например, чтобы локализовать источник конфликта на клиентском проекте.

5. Burp Suite Community Edition, перехват трафика

Самый хардкорный способ из пятёрки. Burp Suite, это интерактивный HTTP-прокси: он встаёт между вашим браузером и сервером и может перехватывать, останавливать и изменять любой запрос или ответ. Community Edition, бесплатная версия от PortSwigger, которой более чем достаточно для «моддинга» сайтов.

Зачем это нужно? Бывают ситуации, когда ни CSS, ни клиентский JavaScript не могут дать нужный результат, потому что данные приходят с сервера уже в «неправильном» виде. Burp перехватывает ответ сервера до того, как браузер его обработает, и позволяет подменить JSON, HTML или заголовки на лету. Сайт рендерится так, будто сервер прислал именно то, что вы подставили.

Реальный кейс: на одном проекте API возвращало список товаров с полем "available": false для позиций, которых не было на складе. Мне нужно было проверить вёрстку карточки товара для разных состояний. Вместо того чтобы лезть в базу или просить бэкендера нагенерить тестовых данных, я перехватил ответ в Burp, поменял пару false на true, и через секунду увидел вёрстку «доступного» товара.

Самое сложное в Burp, первоначальная настройка. Нужно прописать адрес прокси (localhost:8080) в настройках браузера и установить SSL-сертификат Burp, чтобы работать с HTTPS-сайтами. Без сертификата браузер будет ругаться на «небезопасное соединение». В официальной документации PortSwigger этот процесс описан пошагово.

⁉️🤔 Частые вопросы

Законно ли менять сайты таким образом?

Да, потому что изменения происходят исключительно на вашем устройстве. Вы не взламываете сервер, не крадёте данные, не обходите paywall. Это эквивалент замены обоев в квартире: стены те же, выглядит иначе. Единственное исключение, автоматизированные скрипты, которые создают чрезмерную нагрузку на сервер (например, парсинг в цикле без задержки). Будьте разумны.

Какой инструмент выбрать, если я вообще не программист?

Начните со Stylish: установили расширение, зашли на Userstyles.org, выбрали тему, готово. Для блокировки раздражающих элементов, uBlock Origin с функцией Block Element, она не требует кода. Tampermonkey и Burp Suite, для тех, кто готов писать или хотя бы читать код.

Можно ли сломать сайт такими правками?

Для себя, да, можно. Часть страницы может перестать работать, если вы удалили не тот элемент или перекрыли важную кнопку своим стилем. Но это лечится отключением расширения или сбросом фильтров. Для других пользователей сайт останется нетронутым, ваши изменения локальны.

Что делать, если сайт детектит Tampermonkey и блокирует контент?

Некоторые сайты проверяют наличие расширений через JavaScript. Попробуйте альтернативный менеджер, Violentmonkey, он менее известен и реже попадает под детект. Или запустите скрипт через сниппет в DevTools (вкладка Sources → Snippets), это встроенная функция Chrome, которая не отслеживается сайтом.

А есть риск, что расширение само шпионит за мной?

Вопрос резонный. Stylish до 2017 года принадлежал другому владельцу и действительно собирал данные. Сейчас расширением владеет Similarweb с опубликованной политикой конфиденциальности, сбор анонимизирован и отключается в настройках. Если хотите полностью открытый инструмент без телеметрии, ставьте Stylus (open-source альтернативу). Аналогично для скриптов: Tampermonkey собирает анонимную статистику (версия, язык, ОС), отключается в настройках галочкой «Anonymous statistics».

Как эти инструменты работают на мобильных устройствах?

На Android в Firefox можно установить uBlock Origin и Tampermonkey как аддоны, это легальный способ. На iOS ситуация хуже: Apple ограничивает расширения. Частичная альтернатива, браузер Orion, который поддерживает Chrome- и Firefox-расширения на iOS. Stylish на мобильных работает через отдельное приложение.

Стоит ли менять сайты под себя?

Если вы дочитали до этого места, ответ, скорее всего, «да». Веб, это не законченный продукт, а сырой материал. Кто-то проектировал интерфейс под усреднённого пользователя, а вы, не усреднённый. У вас свои привычки, свой вкус, свои триггеры раздражения.

Мой личный топ по соотношению усилия и результата: начните с uBlock Origin (5 минут на Block Element, и сайт уже чистый), добавьте Stylish для любимых площадок (ещё 10 минут, и у вас тёмная тема там, где её никогда не было), а когда захочется автоматизации, открывайте Greasy Fork и ищите готовый скрипт под свою задачу. DevTools и Burp, для тех случаев, когда первые три инструмента не справляются.

Начать можно за пять минут с одного расширения, а через месяц вы уже не узнаете свой браузер, собрав коллекцию тем, скриптов и фильтров под два десятка сайтов. Это хобби с низким порогом входа и бесконечным потолком. Как кастомизация рабочего стола Windows в нулевых, только масштабируется на весь интернет.