Oletko koskaan vieraillut verkkosivustolla ja miettinyt: "Miksi tuo nappi ei ole siellä missä sen pitäisi?", "Kuka valitsi tämän myrkynvihreän taustan?", "Missä on tumma teema, kehittäjät?!" Ja sitten avasit DevToolsin ja aloit muokkaamaan CSS:ää suoraan inspectorissa, ihan vain nähdäksesi miltä se voisi näyttää.

Teen tätä jatkuvasti. Vuosien verkkosivustojen parissa työskentelyn aikana olen koonnut arsenaalin viisi työkalua, joilla voin muokata melkein minkä tahansa sivuston mieleisekseni. Tämä ei ole hakkerointia, muutokset näkyvät vain sinulle, omalla koneellasi. Pohjimmiltaan kyse on modaamisesta, kuten peleissä: vaihdat mallia, maalaat käyttöliittymän uusiksi, poistat ärsyttäviä elementtejä. Sivusto pysyy samana kaikille muille, mutta sinulle siitä tulee juuri sellainen kuin haluat nähdä.

💡 Pikaopas:

• Asenna Stylish ja valitse valmis teema Userstyles.orgista, sivusto muuttuu ennen latautumista
• Hallitse Block Element -toimintoa uBlock Originissa, poista mikä tahansa ärsyttävä elementti sivustolta kahdella klikkauksella
• Lisää käyttäjäskripti Tampermonkeyn kautta, automatisoi toimintoja suosikkialustoillasi
• Avaa DevTools (F12) ja muokkaa sivustoa kuin tekstiä, kaikki muutokset katoavat uudelleenlatauksen yhteydessä
• Määritä Burp Suite HTTP-välityspalvelimeksi, kaappaa ja korvaa dataa lennosta

1. Stylish, välitön sivuston ulkoasun muutos

Stylish, suosikki kosmeettinen selainlaajennukseni. Se soveltaa mukautettuja tyylejä sivulle ennen kuin se renderöidään. Ei alkuperäisen ulkoasun välähdystä, mitä tapahtuu käyttäjäskriptien kanssa: avaat YouTuben ja näet heti pinkin Hello Kitty -teemasi, et tavallista valko-punaista teemaa.

Laajennus on yli kymmenen vuotta vanha, tällä hetkellä Similarwebin omistama ja sillä on 2 miljoonaa käyttäjää. Userstyles.org-kirjasto sisältää yli puoli miljoonaa valmista teemaa, tummista tiloista Google Docsiin ja retro-wavesta YouTubeen.

Miksi Stylish on perustavanlaatuisesti parempi kuin manuaaliset muokkaukset DevToolsissa? Koska tyylit ovat pysyviä: suljet selaimen, avaat sen huomenna, teema on yhä siellä. Lisäksi teemojen välillä on kätevää vaihtaa yhdellä klikkauksella, jos sivustolla on useita teemoja.

Mitä voit tehdä:

• Ota tumma teema käyttöön millä tahansa sivustolla, jolla sellaista ei ole
• Palauta vanha sivuston ulkoasu uudistuksen jälkeen (kyllä, joku on todennäköisesti jo kirjoittanut sellaisen tyylin)
• Suurenna fonttikokoa tai kontrastia luettavuuden parantamiseksi
• Piilota häiritsevät elementit, kuten kiinteät ylätunnisteet tai tilausponnahdusikkunat

Oman tyylin luominen vaatii CSS:ää. Perussyntaksi on yksinkertainen: valitsin, ominaisuus, arvo. Monimutkaisiin tyyleihin suosittelen vaihtoehtoa, Stylus, avoimen lähdekoodin tyylienhallintaa ilman telemetriaa.

2. UBlock Origin, kirurginen elementtien esto

uBlock Origin, tämä on ensisijaisesti mainosten esto, mutta sen "Block Element" -toiminto ansaitsee oman paikkansa tällä listalla. Sen avulla voit poistaa sivustolta mitä tahansa: ärsyttävän bannerin, käyttäjäavatarin joka ärsyttää sinua, "3 paikkaa jäljellä alennuksessa" -laskurin, puolet sivusta vievän sääwidgetin.

Joka kerta kun näen internetin ilman estäjää, esimerkiksi jonkun toisen tietokoneella, en voi uskoa kuinka paljon roskaa siellä on. Katsovatko ihmiset todella YouTubea viidellä mainoskatkolla kymmenen minuutin videossa?

Miten Block Element toimii: napsauta elementtiä hiiren kakkospainikkeella → "Block Element" → uBlock korostaa kohteen ja ehdottaa CSS-valitsinta. Voit siirtyä DOM-puussa ylemmäs ja laajentaa kriteerejä, esimerkiksi estää ei tiettyä banneria vaan koko säiliön mainos-iframeineen. Suodatin tallennetaan pysyvästi.

Edistynyt tekniikka, "Omat suodattimet" -välilehti asetuksissa. Voit syöttää URL-suodattimia jokerimerkeillä kieltääksesi kokonaisten resurssikategorioiden lataamisen. Käytin tätä poistaakseni ongelmallisia JS-tiedostoja WordPressin lisäosista ja teemoista etsiessäni yhteensopivuuskonflikteja asiakassivustoilla.

3. Tampermonkey, skriptejä joka lähtöön

Tampermonkey, tämän listan tehokkain työkalu. Se on userscript-hallintaohjelma, jolla on 12 miljoonaa asennusta ja jonka avulla voit ajaa omaa JavaScriptiäsi millä tahansa sivustolla. Jos Stylish muuttaa ulkoasua ja uBlock poistaa ylimääräisen, niin Tampermonkey lisää uutta toiminnallisuutta.

Ykkösskenaarioni on sota mainostenestoponnahduksia vastaan. Tunnet varmaan kuvion: vierailet sivustolla, estäjä poistaa mainokset, ja sivusto havaitsee tämän ja näyttää bannerin "Poista estäjä käytöstä". uBlock hoitaa tämän joskus, mutta jos sivusto käyttää satunnaistettuja luokkia ja ID:itä (livahtaakseen suodattimien ohi), Tampermonkey astuu kuvaan. Kirjoitan skriptin, joka etsii elementin, jossa on tietty sanamuoto tai kuva, ja poistaa koko ylätason säilön. Karkeaa, mutta toimii.

Rauhanomaisempia skenaarioita:

• Lisää "Lataa kaikki" -painike tiedostosivulle
• Täytä lomakkeet automaattisesti vakiodatalla
• Ota HD-laatu oletuksena käyttöön YouTubessa (vaikka tähän on nykyään omat laajennuksensa)
• Laajenna sivuston ylläpitotoimintoja lisäämällä pikanäppäimiä tai pikatoimintopaneeli

Valmiita skriptejä löydät osoitteista Greasy Fork ja OpenUserJS. Tarjolla on tuhansia skriptejä kaikkiin tilanteisiin videoiden lataamisesta GitHubin käyttöliittymäparannuksiin. Arkaluontoisissa toiminnoissa (salasanat, maksut) suosittelen poistamaan Tampermonkeyn käytöstä tai lisäämään sivustoja mustalle listalle laajennuksen asetuksissa.

4. Kehittäjätyökalut, leikkikenttä kokeiluille

Vietän enemmän aikaa Chrome DevToolsissa kuin missään IDE:ssä. WordPressin lisäosien kehittäminen on pitkälti yritystä ja erehdystä: kuviteltu → korjattu inspectorissa → tykätty → koodattu. Ilman DevToolsia olisin monta kertaa hitaampi.

Niille, jotka eivät ole kehittäjiä, kehittäjätyökalut ovat hiekkalaatikko, jossa voit tilapäisesti muuttaa sivustoa ja nähdä tuloksen välittömästi. Avaa DevTools (F12), siirry Elements-välilehdelle, valitse Inspect (nuoli paneelin kulmassa) ja klikkaa mitä tahansa sivun osaa. Muokkaa tekstiä, vaihda värejä, siirrä lohkoja, poista elementtejä. Sivun uudelleenlatauksen jälkeen kaikki palautuu normaaliksi.

Yleisin ei-ohjelmoijan skenaario on kuvakaappauksen tai tulostusversion valmistelu. Ennen kaappausta poista sivulta kaikki tarpeeton: mainoslohkot, ponnahdusikkunat, chat-widgetit, ylimääräiset sarakkeet. Vie Print Screen -painikkeella, niin saat siistin, tiiviin kuvan, aivan kuin sivusto olisi alun perin suunniteltu sellaiseksi.

Network-välilehdellä on toinenkin siisti ominaisuus: klikkaa mitä tahansa pyyntöä hiiren kakkospainikkeella → "Block request URL" tai "Block request domain". Käytän tätä, kun minun täytyy tarkistaa, miten sivusto toimii ilman tiettyä skriptiä tai fonttia, esimerkiksi paikantaakseni ristiriidan lähteen asiakasprojektissa.

5. Burp Suite Community Edition, liikenteen kaappaus

Viidestä menetelmästä kaikkein hardcorein. Burp Suite on interaktiivinen HTTP-välityspalvelin: se istuu selaimesi ja palvelimen välissä ja pystyy sieppaamaan, pysäyttämään ja muokkaamaan mitä tahansa pyyntöä tai vastausta. Community Edition, PortSwiggerin ilmainen versio, riittää mainiosti sivuston "modaamiseen".

Mihin tätä tarvitaan? On tilanteita, joissa CSS tai selainpuolen JavaScript eivät pysty tuottamaan haluttua lopputulosta, koska data tulee palvelimelta jo "väärässä" muodossa. Burp sieppaa palvelimen vastauksen ennen kuin selain käsittelee sen ja antaa sinun korvata JSONia, HTML:ää tai otsakkeita lennossa. Sivusto renderöityy ikään kuin palvelin olisi lähettänyt juuri sen, minkä korvasit.

Todellinen tapaus: yhdessä projektissa rajapinta palautti tuotelistauksen, jossa oli kenttä "available": false niille nimikkeille, joita ei ollut varastossa. Minun piti tarkistaa tuotekortin asettelu eri tiloissa. Sen sijaan, että olisin mennyt kantaan tai pyytänyt backend-kehittäjää generoimaan testidataa, sieppasin vastauksen Burpissa, vaihdoin pari false-arvoa true-arvoksi ja näin sekunnissa "saatavilla olevan" tuotteen asettelun.

Hankalin asia Burpissa on alkuasetusten teko. Sinun täytyy määrittää välityspalvelimen osoite (localhost:8080) selaimen asetuksissa ja asentaa Burpin SSL-varmenne, jotta voit työskennellä HTTPS-sivustojen kanssa. Ilman varmennetta selain valittaa "turvattomasta yhteydestä". PortSwiggerin virallisessa dokumentaatiossa tämä prosessi on kuvattu vaihe vaiheelta.

⁉️🤔 Usein kysytyt kysymykset

Onko laillista muokata sivustoja tällä tavalla?

Kyllä, koska muutokset tapahtuvat vain omalla laitteellasi. Et murtaudu palvelimelle, et varasta dataa etkä kierrä maksumuuria. Se on verrattavissa tapetin vaihtamiseen asunnossa: seinät ovat samat, mutta näkymä on erilainen. Ainoa poikkeus ovat automatisoidut skriptit, jotka aiheuttavat kohtuutonta kuormaa palvelimelle (esimerkiksi jäsentäminen silmukassa ilman viivettä). Käytä järkeä.

Mikä työkalu kannattaa valita, jos en ole lainkaan ohjelmoija?

Aloita Stylishillä: asenna laajennus, mene Userstyles.orgiin, valitse teema, valmista. Ärsyttävien elementtien estoon sopii uBlock Originin Estä elementti -toiminto, se ei vaadi koodia. Tampermonkey ja Burp Suite ovat niille, jotka ovat valmiita kirjoittamaan tai edes lukemaan koodia.

Voiko tällaisilla muokkauksilla rikkoa sivuston?

Itsellesi kyllä, voit. Osa sivusta voi lakata toimimasta, jos poistit väärän elementin tai peitit tärkeän painikkeen tyylilläsi. Mutta tämä korjaantuu poistamalla laajennus käytöstä tai nollaamalla suodattimet. Muille käyttäjille sivusto säilyy koskemattomana, muutoksesi ovat paikallisia.

Mitä tehdä, jos sivusto havaitsee Tampermonkeyn ja estää sisällön?

Jotkin sivustot tarkistavat laajennuksia JavaScriptin avulla. Kokeile vaihtoehtoista hallintaa, Violentmonkey, se on vähemmän tunnettu ja jää harvemmin kiinni tunnistuksessa. Tai aja skripti DevTools-pätkän kautta (Sources-välilehti → Snippets), tämä on Chromen sisäänrakennettu toiminto, jota sivusto ei pysty seuraamaan.

Onko olemassa riski, että itse laajennus vakoilee minua?

Kysymys on aiheellinen. Stylish kuului vuoteen 2017 asti eri omistajalle ja keräsi todellakin dataa. Nyt laajennuksen omistaa Similarweb, jolla on julkaistu tietosuojakäytäntö, keräys on anonymisoitua ja sen voi poistaa käytöstä asetuksissa. Jos haluat täysin avoimen työkalun ilman telemetriaa, asenna Stylus (avoimen lähdekoodin vaihtoehto). Vastaavasti skripteille: Tampermonkey kerää anonyymejä tilastoja (versio, kieli, käyttöjärjestelmä), jotka voi poistaa käytöstä asetusten "Anonyymit tilastot" -valintaruudusta.

Miten nämä työkalut toimivat mobiililaitteilla?

Androidilla Firefoxiin voi asentaa uBlock Originin ja Tampermonkeyn lisäosina, tämä on hyväksytty tapa. iOS:llä tilanne on huonompi: Apple rajoittaa laajennuksia. Osittainen vaihtoehto on Orion-selain, joka tukee Chrome- ja Firefox-laajennuksia iOS:llä. Stylish toimii mobiilissa erillisen sovelluksen kautta.

Kannattaako sivustoja muokata itselle sopiviksi?

Jos luit tänne asti, vastaus on luultavasti "kyllä". Verkko ei ole valmis tuote, vaan raaka-ainetta. Joku suunnitteli käyttöliittymän keskivertokäyttäjälle, etkä sinä ole keskiverto. Sinulla on omat tapasi, oma makusi, omat ärsytyksen laukaisijasi.

Oma suosikkini vaivan ja hyödyn suhteen mukaan: aloita uBlock Originilla (5 minuuttia Estä elementti -toiminnolla, ja sivusto on jo puhdas), lisää Stylish suosikkialustoillesi (toiset 10 minuuttia, ja sinulla on tumma teema sinne, missä sellaista ei koskaan ollut), ja kun haluat automaatiota, avaa Greasy Fork ja etsi valmis skripti tehtävääsi. DevTools ja Burp ovat niitä tapauksia varten, joissa kolme ensimmäistä työkalua eivät selviä.

Voit aloittaa viidessä minuutissa yhdellä laajennuksella, ja kuukauden päästä et tunnista selaintasi, kun olet koonnut kokoelman teemoja, skriptejä ja suodattimia kahdelle tusinalle sivustoa. Tämä on harrastus, jossa on matala aloituskynnys ja ääretön katto. Kuten Windows-työpöydän muokkaus 2000-luvulla, mutta se skaalautuu koko internetiin.