Ви колись заходили на сайт і думали: «От халепа, чому кнопка не там?», «Ну хто обрав це отруйно-зелене тло?», «Де темна тема, розробники?!». А потім відкривали 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 у нульових, тільки масштабується на весь інтернет.