Oled kunagi mõnda veebisaiti külastanud ja mõelnud: „Miks see nupp ei ole seal, kus ta olema peaks?", „Kes valis selle mürgise rohelise tausta?", „Kus on tume teema, arendajad?!" Ning seejärel avasid DevToolsi ja hakkasid CSS otse inspektoris muutma, lihtsalt et näha, kuidas see välja näha võiks.

Ma teen seda pidevalt. Aastatepikkuse veebisaitidega töötamise jooksul olen kokku pannud arsenali viiest tööriistast, mis võimaldavad mul peaaegu iga saiti oma maitse järgi ümber kujundada. See ei ole häkkimine, muudatused on nähtavad ainult sulle, sinu arvutis. Sisuliselt on see modimine, nagu mängudes: vahetad mudelit, värvid liidese üle, eemaldad tüütuid elemente. Sait jääb kõigi teiste jaoks samaks, kuid sinu jaoks muutub see täpselt selliseks, nagu sa näha tahad.

💡 Kiirülevaade:

• Paigalda Stylish ja vali Userstyles.org-is valmisteema, sait muutub enne laadimist
• Valda uBlock Originis funktsiooni „Blokeeri element", eemalda saidilt tüütu element kahe klõpsuga
• Lisa Tampermonkey kaudu kasutajaskript, automatiseeri tegevusi oma lemmikplatvormidel
• Ava DevTools (F12) ja muuda saiti nagu teksti, kõik muudatused kaovad pärast värskendamist
• Seadista Burp Suite HTTP-puhvrina, püüa kinni ja asenda andmeid lennult

1. Stylish, saidi välimuse kohene muutmine

Stylish, minu lemmik kosmeetiline brauserilaiend. See rakendab lehele kohandatud stiilid enne selle renderdamist. Ei mingit originaalkujunduse vilkumist, mis kasutajaskriptide puhul ette tuleb: avad YouTube'i ja näed kohe oma roosat Hello Kittyt, mitte standardset valge-punast teemat.

Laiend on üle kümne aasta vana, praegu kuulub see Similarwebile ja sellel on 2 miljonit kasutajat. Userstyles.org-i teek sisaldab üle poole miljoni valmisteema, alates tumedatest režiimidest Google Docsile kuni retro-wave'ini YouTube'ile.

Miks on Stylish põhimõtteliselt parem kui käsitsi DevToolsis muutmine? Sest stiilid on püsivad: paned brauseri kinni, avad homme, teema on endiselt alles. Lisaks on mugav ühe klõpsuga teemade vahel vahetada, kui saidil on mitu teemat.

Mida saad teha:

• Lülita sisse tume teema igal saidil, millel seda pole
• Taasta saidi vana kujundus pärast ümberkujundust (jah, keegi on tõenäoliselt sellise stiili juba kirjutanud)
• Suurenda loetavuse huvides fondi suurust või kontrasti
• Peida segavad elemendid, nagu kleepuvad päised või tellimisvormi hüpikaknad

Oma stiili loomine eeldab CSS-i tundmist. Põhisüntaks on lihtne: selektor, omadus, väärtus. Keerukamate stiilide jaoks soovitan alternatiivi, Stylus, mis on avatud lähtekoodiga stiilihaldur ilma telemeetriata.

2. UBlock Origin, kirurgiline elementide blokeerimine

uBlock Origin on eelkõige reklaamiblokeerija, kuid selle funktsioon „Blokeeri element" väärib selles nimekirjas eraldi kohta. See võimaldab saidilt eemaldada kõike: tüütu bänner, sind ärritav kasutaja avatar, loendur „3 kohta jäänud", poole lehekülje suurune ilma vidin.

Iga kord, kui näen internetti ilma blokeerijata, näiteks kellegi teise arvutis, ei suuda ma uskuda, kui palju rämpsu seal on. Kas inimesed tõesti vaatavad YouTube'i viie reklaamikatkestusega kümneminutilises videos?

Kuidas „Blokeeri element" töötab: paremklõps elemendil → „Blokeeri element" → uBlock tõstab sihtmärgi esile ja pakub CSS-selektorit. Saad DOM-puus kõrgemale liikuda ja kriteeriume laiendada, näiteks blokeerida mitte konkreetse bänneri, vaid terve reklaami iframe'i sisaldava konteineri. Filter salvestatakse jäädavalt.

Edasijõudnute tehnika, vahekaart „Minu filtrid" seadetes. Seal saad sisestada metamärkidega URL-filtreid, et keelata tervete ressursside kategooriate laadimine. Kasutasin seda WordPressi pistikprogrammide ja teemade probleemsete JS-failide keelamiseks, kui otsisin klientide saitidel ühilduvuskonflikte.

3. Tampermonkey, skriptid igaks elujuhtumiks

Tampermonkey, selle nimekirja võimsaim tööriist. See on kasutajaskriptide haldur, millel on 12 miljonit installimist ja mis võimaldab sul igal saidil oma JavaScripti käivitada. Kui Stylish muudab välimust ja uBlock eemaldab üleliigse, siis Tampermonkey lisab uut käitumist.

Minu number üks stsenaarium on sõda reklaamiblokeerija tuvastamise hüpikakende vastu. Sa tead seda skeemi: külastad saiti, blokeerija eemaldab reklaamid ja sait tuvastab selle ning kuvab bänneri „Palun keela oma blokeerija". uBlock mõnikord tuleb sellega toime, aga kui sait kasutab juhuslikke klasse ja ID-sid (et filtritest mööda hiilida), tuleb mängu Tampermonkey. Kirjutan skripti, mis otsib kindla sõnastuse või pildiga elementi ja eemaldab kogu ülemkasti. Robustne, aga töötab.

Rahumeelsemad stsenaariumid:

• Lisa faililehele nupp „Laadi kõik alla"
• Täida vormid automaatselt standardandmetega
• Luba YouTube'is vaikimisi HD-kvaliteet (kuigi selleks on nüüdseks spetsiaalsed laiendused olemas)
• Laienda saidi administreerimise funktsionaalsust, lisades kiirklahve või kiirtoimingute paneeli

Valmisskripte leiad lehtedelt Greasy Fork ja OpenUserJS. Seal on tuhandeid skripte igaks elujuhtumiks, alates video allalaadimisest kuni GitHubi liidese täiustamiseni. Tundlike toimingute puhul (paroolid, maksed) soovitan Tampermonkey keelata või lisada saidid laienduse seadetes musta nimekirja.

4. Arendaja tööriistad, mänguväljak katsetusteks

Veetsin Chrome DevToolsis rohkem aega kui üheski IDE-s. WordPressi pluginatega arendamine on suuresti katse-eksituse meetod: kujutasin ette → parandasin inspektoris ära → meeldis → kirjutasin koodi. Ilma DevToolsita oleksin ma kordades aeglasem.

Mitte-arendajatele on arendaja tööriistad liivakast, kus saad ajutiselt saiti muuta ja tulemust koheselt näha. Ava DevTools (F12), mine vahekaardile Elements, vali Inspect (paneeli nurgas olev nool) ja klõpsa lehe mis tahes osal. Muuda teksti, vaheta värve, liiguta plokke, kustuta elemente. Pärast lehe uuesti laadimist taastub kõik normaalseks.

Kõige tavalisem mitte-programmeerija stsenaarium on ekraanipildi või prindiversiooni ettevalmistamine. Enne jäädvustamist eemalda lehelt kõik ebavajalik: reklaamiplokid, hüpikaknad, vestlusvidinad, lisaveerud. Ekspordi Print Screen nupuga, saad puhta ja sisutiheda pildi, justkui oleks sait algselt nii kujundatud.

Vahekaardil Network on veel üks lahe funktsioon: paremklõps suvalisel päringul → „Block request URL" või „Block request domain". Kasutan seda, kui on vaja kontrollida, kuidas sait töötab ilma konkreetse skripti või fondita, näiteks selleks, et lokaliseerida konflikti allikas kliendiprojektis.

5. Burp Suite Community Edition, võrguliikluse pealtkuulamine

Viie meetodi seas kõige hardcore’m. Burp Suite on interaktiivne HTTP puhver: see istub sinu brauseri ja serveri vahel ning suudab iga päringu või vastuse kinni püüda, peatada ja muuta. Community Edition, PortSwiggeri tasuta versioon, on saidi „modimiseks" enam kui piisav.

Milleks seda vaja on? On olukordi, kus ei CSS ega kliendipoolne JavaScript ei anna soovitud tulemust, sest andmed tulevad serverist juba „valel" kujul. Burp püüab serveri vastuse kinni enne, kui brauser seda töötlema hakkab, ja võimaldab JSON-i, HTML-i või päiseid lennult asendada. Sait renderdab nii, nagu oleks server saatnud täpselt selle, mille sa asendasid.

Reaalne juhtum: ühes projektis tagastas API tootenimekirja, kus laos mitteolevatel toodetel oli väli "available": false. Mul oli vaja kontrollida tootekaardi kujundust erinevates olekutes. Selle asemel, et minna andmebaasi või paluda backend-arendajal testandmeid genereerida, püüdsin Burpis vastuse kinni, muutsin paar false väärtust true-ks ja nägin sekundiga „saadaval" toote kujundust.

Burpi juures on kõige keerulisem esmane seadistamine. Brauseri seadetes tuleb määrata puhvri aadress (localhost:8080) ja paigaldada Burpi SSL-sertifikaat, et HTTPS-saitidega töötada. Ilma sertifikaadita kurdab brauser „ebaturvalise ühenduse" üle. PortSwiggeri ametlikus dokumentatsioonis on see protsess samm-sammult kirjeldatud.

⁉️🤔 Korduma kippuvad küsimused

Kas saitide niimoodi muutmine on seaduslik?

Jah, sest muudatused toimuvad ainult sinu seadmes. Sa ei häki serverit, ei varasta andmeid ega hiili maksumüürist mööda. See on nagu tapeedi vahetamine korteris: seinad on samad, aga väljanägemine on teine. Ainus erand on automatiseeritud skriptid, mis tekitavad serverile ülemäärast koormust (näiteks tsükliline pärimine ilma viivituseta). Ole mõistlik.

Millise tööriista peaksin valima, kui ma pole üldse programmeerija?

Alusta Stylishist: paigalda laiendus, mine lehele Userstyles.org, vali teema ja ongi valmis. Tüütute elementide blokeerimiseks kasuta uBlock Origini ja selle „Blokeeri element" funktsiooni, see ei nõua koodi. Tampermonkey ja Burp Suite on neile, kes on valmis koodi kirjutama või vähemalt lugema.

Kas selliste muudatustega võib saidi katki teha?

Enda jaoks, jah, võib. Osa lehest võib lakata töötamast, kui kustutasid vale elemendi või katsid oma stiiliga kinni olulise nupu. Aga see on parandatav laienduse keelamise või filtrite lähtestamisega. Teiste kasutajate jaoks jääb sait puutumata, sinu muudatused on lokaalsed.

Mida teha, kui sait tuvastab Tampermonkey ja blokeerib sisu?

Mõned saidid kontrollivad JavaScripti abil laienduste olemasolu. Proovi alternatiivset haldurit Violentmonkey, see on vähem tuntud ja jääb harvemini tuvastamisele vahele. Või käivita skript DevToolsi katkendi kaudu (Sources tab → Snippets), see on Chrome'i sisseehitatud funktsioon, mida sait ei jälgi.

Kas on oht, et laiendus ise luurab minu järele?

Küsimus on mõistlik. Stylish kuulus kuni 2017. aastani teisele omanikule ja tõepoolest kogus andmeid. Nüüd kuulub laiendus Similarwebile, neil on avaldatud privaatsuspoliitika, andmekogumine on anonüümne ja seda saab seadetes keelata. Kui soovid täiesti avatud tööriista ilma telemeetriata, paigalda Stylus (avatud lähtekoodiga alternatiiv). Sama kehtib skriptide kohta: Tampermonkey kogub anonüümset statistikat (versioon, keel, OS), mis on seadetes keelatav linnukesega „Anonüümne statistika".

Kuidas need tööriistad mobiilseadmetes töötavad?

Androidis saad Firefoxi brauserisse paigaldada uBlock Origini ja Tampermonkey lisadena, see on legitiimne meetod. iOS-is on olukord kehvem: Apple piirab laiendusi. Osaline alternatiiv on Orioni brauser, mis toetab iOS-is Chrome'i ja Firefoxi laiendusi. Stylish töötab mobiilis eraldi rakenduse kaudu.

Kas tasub saite enda järgi kohandada?

Kui oled siiani lugenud, on vastus ilmselt „jah". Veeb ei ole valmistoode, vaid toormaterjal. Keegi kujundas liidese keskmise kasutaja jaoks, aga sina ei ole keskmine. Sul on oma harjumused, oma maitse, oma tüütuse vallandajad.

Minu isiklik paremusjärjestus pingutuse ja tulemuse suhte järgi: alusta uBlock Originist (5 minutit elemendi blokeerimisega ja sait on juba puhas), lisa Stylish oma lemmikplatvormidele (veel 10 minutit ja sul on tume teema seal, kus seda kunagi polnud) ning kui soovid automatiseerimist, ava Greasy Fork ja otsi oma ülesandele valmisskripti. DevTools ja Burp on nendeks juhtudeks, kui esimesed kolm tööriista ei aita.

Alustada saad viie minutiga ühe laiendusega ja kuu aja pärast ei tunne sa oma brauserit enam ära, olles kokku pannud teemade, skriptide ja filtrite kollektsiooni kahele tosinale saidile. See on madala sisenemisläve ja lõputu laega hobi. Nagu Windowsi töölaua kohandamine 2000ndatel, ainult et see skaleerub tervele internetile.