Czy zdarzyło się Panu/Pani wejść na stronę i pomyśleć: „Co za pech, dlaczego ten przycisk jest nie tam?", „Kto wybrał to trująco zielone tło?", „Gdzie jest ciemny motyw, programiści?!". A potem otwierał Pan/Pani DevTools i zaczynał poprawiać CSS prosto w inspektorze, tylko po to, żeby zobaczyć, jak mogłoby to wyglądać.

Robię to bez przerwy. Przez lata pracy ze stronami zebrałem arsenał pięciu narzędzi, które pozwalają przekroić praktycznie każdą stronę pod siebie. To nie jest hakerstwo, zmiany widzi Pan/Pani tylko na swoim komputerze. W gruncie rzeczy to modowanie, jak w grach: zmienia się model, przemalowuje interfejs, usuwa irytujące elementy. Strona pozostaje taka sama dla wszystkich innych, a dla Pana/Pani staje się dokładnie taka, jaką chce ją Pan/Pani widzieć.

💡 Szybki przegląd:

• Zainstaluj Stylish i wybierz gotowy motyw na Userstyles.org, strona zmieni się jeszcze przed załadowaniem
• Opanuj Block Element w uBlock Origin, usuń ze strony każdy irytujący element dwoma kliknięciami
• Dodaj skrypt użytkownika przez Tampermonkey, automatyzuj działania na ulubionych platformach
• Otwórz DevTools (F12) i edytuj stronę jak tekst, wszystkie zmiany znikną po przeładowaniu
• Skonfiguruj Burp Suite jako proxy HTTP, przechwytuj i podmieniaj dane w locie

1. Stylish, natychmiastowa zmiana wyglądu strony

Stylish, moje ulubione rozszerzenie kosmetyczne do przeglądarki. Stosuje ono style użytkownika do strony, zanim zostanie ona wyrenderowana. Żadnego błysku początkowego wyglądu, który zdarza się przy skryptach użytkownika: otwiera Pan/Pani YouTube i od razu widzi swój różowy motyw Hello Kitty, a nie standardowy biało-czerwony.

Rozszerzenie ma już ponad dziesięć lat, obecnie należy do firmy Similarweb i ma 2 miliony użytkowników. W bibliotece Userstyles.org zebrano ponad pół miliona gotowych motywów, od ciemnych trybów dla Google Docs po retro-wave dla YouTube.

Dlaczego Stylish jest zasadniczo lepszy od ręcznych poprawek w DevTools? Ponieważ style są trwałe: zamknie Pan/Pani przeglądarkę, otworzy jutro, motyw jest na swoim miejscu. A do tego wygodnie przełącza się między motywami jednym kliknięciem, jeśli na stronie jest ich kilka.

Co można zrobić:

• Włączyć ciemny motyw na każdej stronie, która go nie ma
• Przywrócić stary wygląd strony po redesignie (tak, ktoś na pewno już napisał taki styl)
• Zwiększyć czcionkę lub kontrast dla czytelności
• Ukryć rozpraszające elementy, takie jak przyklejone nagłówki czy wyskakujące okienka z subskrypcją

Do stworzenia własnego stylu potrzebny jest CSS. Podstawowa składnia jest prosta: selektor, właściwość, wartość. Do złożonych stylów polecam alternatywę, Stylus, open-source'owy menedżer stylów bez telemetrii.

2. UBlock Origin, chirurgiczne blokowanie elementów

uBlock Origin to przede wszystkim bloker reklam, ale jego funkcja „Block Element" zasługuje na osobne miejsce na tej liście. Pozwala ona usunąć ze strony cokolwiek: natrętny baner, awatar użytkownika, który Pana/Panią drażni, licznik „zostały 3 miejsca w promocji", widżet pogody zajmujący pół strony.

Za każdym razem, gdy widzę internet bez blokera, na przykład na cudzym komputerze, nie mogę uwierzyć, ile tam jest śmieci. Czy ludzie naprawdę oglądają YouTube z pięcioma wstawkami reklamowymi na dziesięciominutowe wideo?

Jak działa Block Element: prawy klik na element → „Block Element" → uBlock podświetla cel i proponuje selektor CSS. Można przejść wyżej w drzewie DOM i rozszerzyć kryterium, na przykład zablokować nie konkretny baner, a cały kontener z reklamowym iframe. Filtr zapisuje się na stałe.

Zaawansowana technika, zakładka „Moje filtry" w ustawieniach. Można tam wpisać filtry URL ze znakami wieloznacznymi, aby zabronić ładowania całych kategorii zasobów. W ten sposób wyłączałem problematyczne pliki JS wtyczek i motywów WordPress, gdy szukałem konfliktów kompatybilności na stronach klientów.

3. Tampermonkey, skrypty na każdą okazję

Tampermonkey, najpotężniejsze narzędzie na tej liście. To menedżer skryptów użytkownika z 12 milionami instalacji, który pozwala uruchamiać własny JavaScript na dowolnej stronie. Jeśli Stylish zmienia wygląd, a uBlock usuwa zbędne elementy, to Tampermonkey dodaje nowe zachowania.

Mój scenariusz numer jeden: wojna z anty-adblockowymi pop-upami. Znają Państwo ten schemat: wchodzą Państwo na stronę, bloker reklam usuwa reklamy, a strona to wykrywa i wyświetla baner „Proszę wyłączyć bloker reklam". uBlock czasem sobie radzi, ale jeśli strona używa randomizowanych klas i ID (żeby prześlizgnąć się przez filtry), do akcji wkracza Tampermonkey. Piszę skrypt, który szuka elementu z określonym sformułowaniem lub obrazem i usuwa cały kontener nadrzędny. Topornie, ale działa.

Bardziej pokojowe scenariusze:

• Dodanie przycisku „Pobierz wszystko" na stronie z plikami
• Automatyczne wypełnianie formularzy standardowymi danymi
• Domyślne włączanie jakości HD na YouTube (choć do tego są teraz osobne rozszerzenia)
• Rozszerzenie funkcjonalności panelu administracyjnego strony o skróty klawiszowe lub panel szybkich akcji

Gotowych skryptów proszę szukać na Greasy Fork i OpenUserJS. Są tam tysiące skryptów na każdą okazję, od pobierania wideo po ulepszanie interfejsu GitHub. Do operacji wrażliwych (hasła, płatności) zalecam wyłączanie Tampermonkey lub dodawanie stron do czarnej listy w ustawieniach rozszerzenia.

4. Narzędzia deweloperskie, poligon doświadczalny

W Chrome DevTools spędzam więcej czasu niż w jakimkolwiek IDE. Tworzenie wtyczek do WordPressa to w dużej mierze metoda prób i błędów: wymyśliłem → poprawiłem w inspektorze → spodobało mi się → zakodowałem. Bez DevTools byłbym wielokrotnie wolniejszy.

Dla osób nietechnicznych narzędzia deweloperskie to piaskownica, w której można tymczasowo zmienić stronę i natychmiast zobaczyć rezultat. Proszę otworzyć DevTools (F12), przejść do zakładki Elements, wybrać Inspect (strzałka w rogu panelu) i kliknąć w dowolną część strony. Edytują Państwo tekst, zmieniają kolor, przesuwają bloki, usuwają elementy. Po odświeżeniu strony wszystko wraca na swoje miejsce.

Najczęstszy „nieprogramistyczny" scenariusz to przygotowanie zrzutu ekranu lub wersji do druku. Przed zrobieniem zrzutu proszę usunąć ze strony wszystko, co zbędne: bloki reklamowe, pop-upy, widżety czatu, niepotrzebne kolumny. Eksport przyciskiem Print Screen daje czysty, lakoniczny obraz, jakby strona od początku była tak zaprojektowana.

W zakładce Network jest jeszcze jedna świetna funkcja: prawy przycisk myszy na dowolnym żądaniu → „Block request URL" lub „Block request domain". Używam tego, gdy trzeba sprawdzić, jak strona działa bez konkretnego skryptu czy fontu, na przykład żeby zlokalizować źródło konfliktu w projekcie klienckim.

5. Burp Suite Community Edition, przechwytywanie ruchu

To najtwardsza metoda z całej piątki. Burp Suite to interaktywne proxy HTTP: staje pomiędzy Pana/Pani przeglądarką a serwerem i może przechwytywać, zatrzymywać oraz modyfikować dowolne żądanie lub odpowiedź. Community Edition, darmowa wersja od PortSwigger, w zupełności wystarcza do „modowania" stron.

Do czego to jest potrzebne? Zdarzają się sytuacje, gdy ani CSS, ani JavaScript po stronie klienta nie dają oczekiwanego rezultatu, ponieważ dane przychodzą z serwera już w „nieprawidłowej" postaci. Burp przechwytuje odpowiedź serwera, zanim przeglądarka ją przetworzy, i pozwala podmienić JSON, HTML lub nagłówki w locie. Strona renderuje się tak, jakby serwer wysłał dokładnie to, co Pan/Pani podstawił(a).

Realny przypadek: w jednym projekcie API zwracało listę produktów z polem "available": false dla pozycji, których nie było na stanie. Musiałem sprawdzić układ karty produktu dla różnych stanów. Zamiast grzebać w bazie danych albo prosić backendowca o wygenerowanie danych testowych, przechwyciłem odpowiedź w Burpie, zmieniłem parę false na true i w sekundę zobaczyłem układ „dostępnego" produktu.

Najtrudniejsze w Burpie jest początkowe skonfigurowanie. Trzeba ustawić adres proxy (localhost:8080) w ustawieniach przeglądarki oraz zainstalować certyfikat SSL Burpa, aby móc pracować ze stronami HTTPS. Bez certyfikatu przeglądarka będzie ostrzegać o „niebezpiecznym połączeniu". W oficjalnej dokumentacji PortSwigger proces ten jest opisany krok po kroku.

⁉️🤔 Często zadawane pytania

Czy zmienianie stron w ten sposób jest legalne?

Tak, ponieważ zmiany zachodzą wyłącznie na Pana/Pani urządzeniu. Nie włamuje się Pan/Pani na serwer, nie kradnie danych, nie obchodzi paywalla. To odpowiednik wymiany tapety w mieszkaniu: ściany te same, wygląd inny. Jedynym wyjątkiem są zautomatyzowane skrypty, które generują nadmierne obciążenie serwera (na przykład parsowanie w pętli bez opóźnienia). Proszę zachować rozsądek.

Jakie narzędzie wybrać, jeśli w ogóle nie jestem programistą?

Proszę zacząć od Stylish: instaluje Pan/Pani rozszerzenie, wchodzi na Userstyles.org, wybiera motyw i gotowe. Do blokowania irytujących elementów służy uBlock Origin z funkcją Block Element, która nie wymaga kodu. Tampermonkey i Burp Suite są dla tych, którzy są gotowi pisać lub przynajmniej czytać kod.

Czy można zepsuć stronę takimi poprawkami?

U siebie, tak, można. Część strony może przestać działać, jeśli usunął Pan/Pani nie ten element lub zasłonił ważny przycisk swoim stylem. Ale leczy się to wyłączeniem rozszerzenia lub zresetowaniem filtrów. Dla innych użytkowników strona pozostanie nietknięta, Pana/Pani zmiany są lokalne.

Co zrobić, jeśli strona wykrywa Tampermonkey i blokuje treść?

Niektóre strony sprawdzają obecność rozszerzeń przez JavaScript. Proszę spróbować alternatywnego menedżera, Violentmonkey, jest mniej znany i rzadziej wykrywany. Albo proszę uruchomić skrypt przez snippet w DevTools (zakładka Sources → Snippets), to wbudowana funkcja Chrome, która nie jest śledzona przez stronę.

A czy istnieje ryzyko, że samo rozszerzenie mnie szpieguje?

Pytanie jest zasadne. Stylish do 2017 roku należał do innego właściciela i rzeczywiście zbierał dane. Obecnie rozszerzenie należy do Similarweb z opublikowaną polityką prywatności, zbieranie danych jest zanonimizowane i można je wyłączyć w ustawieniach. Jeśli chce Pan/Pani w pełni otwarte narzędzie bez telemetrii, proszę zainstalować Stylus (otwartoźródłową alternatywę). Analogicznie dla skryptów: Tampermonkey zbiera anonimowe statystyki (wersja, język, system operacyjny), wyłącza się je w ustawieniach opcją „Anonymous statistics".

Jak te narzędzia działają na urządzeniach mobilnych?

Na Androidzie w Firefoksie można zainstalować uBlock Origin i Tampermonkey jako dodatki, to legalny sposób. Na iOS sytuacja jest gorsza: Apple ogranicza rozszerzenia. Częściową alternatywą jest przeglądarka Orion, która obsługuje rozszerzenia Chrome i Firefox na iOS. Stylish na urządzeniach mobilnych działa przez osobną aplikację.

Czy warto zmieniać strony pod siebie?

Jeśli doczytał Pan/Pani do tego miejsca, odpowiedź najprawdopodobniej brzmi „tak". Sieć to nie gotowy produkt, a surowy materiał. Ktoś projektował interfejs pod uśrednionego użytkownika, a Pan/Pani nie jest uśredniony. Ma Pan/Pani swoje nawyki, swój gust, swoje wyzwalacze irytacji.

Mój osobisty top pod względem stosunku nakładu do rezultatu: proszę zacząć od uBlock Origin (5 minut na Block Element i strona jest już czysta), dodać Stylish do ulubionych serwisów (kolejne 10 minut i ma Pan/Pani ciemny motyw tam, gdzie go nigdy nie było), a gdy nabierze Pan/Pani ochoty na automatyzację, proszę otworzyć Greasy Fork i poszukać gotowego skryptu do swojego zadania. DevTools i Burp są na te przypadki, gdy pierwsze trzy narzędzia nie dają rady.

Zacząć można w pięć minut od jednego rozszerzenia, a po miesiącu nie pozna Pan/Pani swojej przeglądarki, mając kolekcję motywów, skryptów i filtrów do dwóch tuzinów stron. To hobby z niskim progiem wejścia i nieskończonym sufitem. Jak customizacja pulpitu Windows w latach dwutysięcznych, tylko skaluje się na cały internet.