Har du noen gang besøkt et nettsted og tenkt: «Hvorfor er ikke den knappen der den burde være?», «Hvem valgte denne giftige grønne bakgrunnen?», «Hvor er mørk modus, utviklere?!» Og så åpnet du DevTools og begynte å redigere CSS direkte i inspektøren, bare for å se hvordan det kunne sett ut.

Jeg gjør dette hele tiden. Gjennom mange år med arbeid på nettsteder har jeg bygget opp et arsenal av fem verktøy som lar meg omforme nesten ethvert nettsted etter mitt eget hode. Dette er ikke hacking, endringene er bare synlige for deg, på din maskin. I bunn og grunn er det modding, som i spill: du bytter en modell, maler om grensesnittet, fjerner irriterende elementer. Nettstedet forblir det samme for alle andre, men for deg blir det akkurat slik du ønsker å se det.

💡 Rask oversikt:

• Installer Stylish og velg et ferdiglaget tema på Userstyles.org, nettstedet endres før det lastes inn
• Mestre Blokker element i uBlock Origin, fjern ethvert irriterende element fra et nettsted med to klikk
• Legg til et brukerskript via Tampermonkey, automatiser handlinger på favorittplattformene dine
• Åpne DevTools (F12) og rediger nettstedet som tekst, alle endringer forsvinner etter omlasting
• Konfigurer Burp Suite som en HTTP-proxy, fang opp og erstatt data i sanntid

1. Stylish, umiddelbar endring av nettstedets utseende

Stylish, min favorittutvidelse for kosmetisk nettlesertilpasning. Den legger til egendefinerte stiler på en side før den rendres. Ikke noe glimt av det opprinnelige designet som skjer med brukerskripter: du åpner YouTube og ser umiddelbart din rosa Hello Kitty, ikke standard hvit-rød drakt.

Utvidelsen er over ti år gammel, eies for tiden av Similarweb og har 2 millioner brukere. Userstyles.org-biblioteket inneholder over en halv million ferdiglagde temaer, fra mørke moduser for Google Docs til retro-wave for YouTube.

Hvorfor er Stylish fundamentalt bedre enn manuelle redigeringer i DevTools? Fordi stilene er vedvarende: du lukker nettleseren, åpner den i morgen, temaet er der fortsatt. I tillegg er det praktisk å bytte mellom temaer med ett klikk hvis et nettsted har flere temaer.

Hva du kan gjøre:

• Aktivere mørk modus på ethvert nettsted som ikke har det
• Gjenopprette det gamle nettsteddesignet etter en redesign (ja, noen har sannsynligvis allerede skrevet en slik stil)
• Øke skriftstørrelse eller kontrast for lesbarhet
• Skjule forstyrrende elementer som sticky headere eller abonnementspopuper

Å lage din egen stil krever CSS. Grunnleggende syntaks er enkel: selektor, egenskap, verdi. For komplekse stiler anbefaler jeg et alternativ, Stylus, en stilbehandler med åpen kildekode uten telemetri.

2. UBlock Origin, kirurgisk elementblokkering

uBlock Origin, dette er primært en annonseblokkerer, men «Blokker element»-funksjonen fortjener en egen plass på denne listen. Den lar deg fjerne hva som helst fra et nettsted: et irriterende banner, en brukeravatar som irriterer deg, en «3 plasser igjen på salg»-teller, en værwidget som tar opp halve siden.

Hver gang jeg ser internett uten en blokkerer, for eksempel på andres datamaskin, kan jeg ikke tro hvor mye søppel det er. Ser folk virkelig på YouTube med fem annonseinnslag i en ti minutters video?

Slik fungerer Blokker element: høyreklikk på et element → «Blokker element» → uBlock markerer målet og foreslår en CSS-selektor. Du kan gå høyere opp i DOM-treet og utvide kriteriene, for eksempel blokkere ikke et spesifikt banner, men hele containeren med annonse-iframe. Filteret lagres permanent.

Avansert teknikk, fanen «Mine filtre» i innstillinger. Du kan legge inn URL-filtre med jokertegn der for å forby lasting av hele kategorier av ressurser. Jeg brukte dette til å deaktivere problematiske JS-filer fra WordPress-plugins og -temaer når jeg søkte etter kompatibilitetskonflikter på klientsider.

3. Tampermonkey, skript for enhver anledning

Tampermonkey, det kraftigste verktøyet på denne listen. Det er en userscript-manager med 12 millioner installasjoner som lar deg kjøre din egen JavaScript på ethvert nettsted. Hvis Stylish endrer utseende og uBlock fjerner overflødig, så legger Tampermonkey til ny atferd.

Mitt viktigste scenario, kamp mot popup-vinduer som ber deg skru av annonseblokkering. Du kjenner opplegget: du besøker et nettsted, blokkereren fjerner annonser, og nettstedet oppdager dette og ruller ut et banner «Vennligst skru av blokkereren din». uBlock håndterer det noen ganger, men hvis nettstedet bruker randomiserte klasser og ID-er (for å slippe unna filtre), kommer Tampermonkey inn i bildet. Jeg skriver et script som søker etter et element med en bestemt ordlyd eller et bilde og fjerner hele den overordnede beholderen. Grovt, men det fungerer.

Mer fredelige scenarioer:

• Legg til en «Last ned alle»-knapp på en filside
• Fyll ut skjemaer automatisk med standarddata
• Aktiver HD-kvalitet på YouTube som standard (selv om det finnes dedikerte utvidelser for dette nå)
• Utvid funksjonaliteten for nettstedsadministrasjon ved å legge til hurtigtaster eller et panel for hurtighandlinger

Finn ferdige script på Greasy Fork og OpenUserJS. Det finnes tusenvis av script for alle anledninger, fra videonedlasting til forbedringer av GitHub-grensesnittet. For sensitive operasjoner (passord, betalinger) anbefaler jeg å deaktivere Tampermonkey, eller legge til nettsteder i svartelisten i utvidelsesinnstillingene.

4. Utviklerverktøy, lekeplass for eksperimenter

Jeg tilbringer mer tid i Chrome DevTools enn i noen IDE. Utvikling av plugins for WordPress er i stor grad prøving og feiling: forestilt → fikset i inspector → likt → kodet. Uten DevTools ville jeg vært ganger tregere.

For ikke-utviklere er utviklerverktøy en sandkasse der du midlertidig kan endre et nettsted og se resultatet umiddelbart. Åpne DevTools (F12), gå til Elements-fanen, velg Inspiser (pilen i hjørnet av panelet), og klikk på hvilken som helst del av siden. Rediger tekst, endre farger, flytt blokker, slett elementer. Etter at siden lastes på nytt, går alt tilbake til normalt.

Det vanligste scenarioet for ikke-programmerere, klargjøring av et skjermbilde eller en utskriftsversjon. Før du tar bildet, fjern alt unødvendig fra siden: annonseblokker, popup-vinduer, chat-widgeter, ekstra kolonner. Eksporter med Print Screen-knappen, så får du et rent og konsist bilde, som om nettstedet opprinnelig var designet slik.

På Network-fanen finnes det en annen kul funksjon: høyreklikk på en forespørsel → «Blokker forespørsels-URL» eller «Blokker forespørselsdomene». Jeg bruker dette når jeg trenger å sjekke hvordan et nettsted fungerer uten et bestemt script eller en bestemt font, for eksempel for å lokalisere kilden til en konflikt på et kundeprosjekt.

5. Burp Suite Community Edition, trafikkavlytting

Den mest hardcore metoden av de fem. Burp Suite, dette er en interaktiv HTTP-proxy: den sitter mellom nettleseren din og serveren og kan fange opp, stoppe og endre enhver forespørsel eller respons. Community Edition, gratisversjonen fra PortSwigger, er mer enn nok for «modding» av nettsteder.

Hvorfor trengs dette? Det finnes situasjoner der verken CSS eller klientside-JavaScript kan gi ønsket resultat fordi dataene kommer fra serveren allerede i «feil» form. Burp fanger opp serverresponsen før nettleseren behandler den og lar deg erstatte JSON, HTML eller headere i sanntid. Nettstedet rendres som om serveren sendte akkurat det du satte inn.

Virkelig case: i ett prosjekt returnerte API-et en produktliste med feltet "available": false for posisjoner som ikke var på lager. Jeg trengte å sjekke produktkortlayouten for ulike tilstander. I stedet for å gå inn i databasen eller be backend-utvikleren om å generere testdata, fanget jeg opp responsen i Burp, endret et par false til true, og så på et sekund «tilgjengelig»-produktlayouten.

Det vanskeligste med Burp er førstegangsoppsettet. Du må oppgi proxy-adressen (localhost:8080) i nettleserinnstillingene og installere Burp SSL-sertifikatet for å jobbe med HTTPS-nettsteder. Uten sertifikatet vil nettleseren klage over en «usikker tilkobling». I den offisielle PortSwigger-dokumentasjonen er denne prosessen beskrevet trinn for trinn.

⁉️🤔 Ofte stilte spørsmål

Er det lovlig å endre nettsteder på denne måten?

Ja, fordi endringene skjer utelukkende på din egen enhet. Du hacker ikke serveren, stjeler ikke data, omgår ikke en betalingsmur. Det tilsvarer å bytte tapet i en leilighet: veggene er de samme, det ser annerledes ut. Det eneste unntaket er automatiserte skript som skaper unødig belastning på serveren (for eksempel parsing i en løkke uten forsinkelse). Vær fornuftig.

Hvilket verktøy bør jeg velge hvis jeg ikke er programmerer i det hele tatt?

Start med Stylish: installer utvidelsen, gå til Userstyles.org, velg et tema, ferdig. For å blokkere irriterende elementer, bruk uBlock Origin med funksjonen Blokker element, den krever ikke kode. Tampermonkey og Burp Suite er for dem som er klare til å skrive eller i det minste lese kode.

Kan man ødelegge et nettsted med slike redigeringer?

For deg selv, ja, det kan du. Deler av siden kan slutte å fungere hvis du slettet feil element eller dekket over en viktig knapp med stilen din. Men dette fikses ved å deaktivere utvidelsen eller tilbakestille filtre. For andre brukere forblir nettstedet urørt, endringene dine er lokale.

Hva gjør jeg hvis et nettsted oppdager Tampermonkey og blokkerer innhold?

Noen nettsteder sjekker etter utvidelser via JavaScript. Prøv en alternativ behandler, Violentmonkey, den er mindre kjent og blir sjeldnere fanget opp av deteksjon. Eller kjør skriptet gjennom en snippet i DevTools (Sources-fanen → Snippets), dette er en innebygd Chrome-funksjon som ikke spores av nettstedet.

Er det en risiko for at selve utvidelsen spionerer på meg?

Spørsmålet er fornuftig. Stylish tilhørte en annen eier frem til 2017 og samlet faktisk inn data. Nå eies utvidelsen av Similarweb med en publisert personvernerklæring, innsamlingen er anonymisert og kan deaktiveres i innstillingene. Hvis du vil ha et helt åpent verktøy uten telemetri, installer Stylus (åpen kildekode-alternativ). Tilsvarende for skript: Tampermonkey samler inn anonym statistikk (versjon, språk, OS), deaktivert i innstillingene med avkrysningsboksen «Anonym statistikk».

Hvordan fungerer disse verktøyene på mobile enheter?

På Android i Firefox kan du installere uBlock Origin og Tampermonkey som tillegg, dette er en legitim metode. På iOS er situasjonen verre: Apple begrenser utvidelser. Et delvis alternativ er nettleseren Orion, som støtter Chrome- og Firefox-utvidelser på iOS. Stylish på mobil fungerer gjennom en egen app.

Er det verdt å endre nettsteder for å tilpasse dem til deg selv?

Hvis du har lest så langt, er svaret sannsynligvis «ja». Nettet er ikke et ferdig produkt, men råmateriale. Noen designet grensesnittet for en gjennomsnittsbruker, og du er ikke gjennomsnittlig. Du har dine egne vaner, din egen smak, dine egne irritasjonsmomenter.

Min personlige toppliste etter forholdet innsats-resultat: start med uBlock Origin (5 minutter på Blokker element, så er nettstedet allerede ryddig), legg til Stylish for favorittplattformene dine (ytterligere 10 minutter, så har du et mørkt tema der det aldri fantes et), og når du vil ha automatisering, åpne Greasy Fork og se etter et ferdig skript for oppgaven din. DevTools og Burp er for de tilfellene der de tre første verktøyene ikke strekker til.

Du kan begynne på fem minutter med én utvidelse, og om en måned vil du ikke kjenne igjen nettleseren din, etter å ha satt sammen en samling av temaer, skript og filtre for to dusin nettsteder. Dette er en hobby med lav inngangsterskel og et uendelig tak. Som Windows-skrivebordstilpasning på 2000-tallet, bare at det skaleres til hele internett.