Har du någonsin besökt en webbplats och tänkt: "Varför är inte den knappen där den borde vara?", "Vem valde den här giftgröna bakgrunden?", "Var är dark mode, utvecklare?!" Och sedan öppnade du DevTools och började redigera CSS direkt i inspektorn, bara för att se hur det skulle kunna se ut.

Jag gör det här hela tiden. Under åren jag har jobbat med webbplatser har jag byggt upp en arsenal av fem verktyg som låter mig forma om nästan vilken sajt som helst efter eget tycke. Det här är inte hacking, ändringarna syns bara för dig, på din maskin. I grunden är det moddning, som i spel: du byter ut en modell, målar om gränssnittet, tar bort irriterande element. Sajten förblir densamma för alla andra, men för dig blir den precis så som du vill ha den.

💡 Snabb översikt:

• Installera Stylish och välj ett färdigt tema på Userstyles.org, så ändras sajten innan den laddas
• Bemästra Block Element i uBlock Origin, ta bort vilket irriterande element som helst från en sajt med två klick
• Lägg till ett användarskript via Tampermonkey, automatisera åtgärder på dina favoritplattformar
• Öppna DevTools (F12) och redigera sajten som text, alla ändringar försvinner vid omladdning
• Konfigurera Burp Suite som en HTTP-proxy, fånga upp och ersätt data i farten

1. Stylish, omedelbar förändring av sajtens utseende

Stylish, mitt favorittillägg för kosmetiska ändringar i webbläsaren. Det applicerar anpassade stilar på en sida innan den renderas. Ingen flash av originaldesignen som kan uppstå med användarskript: du öppnar YouTube och ser direkt din rosa Hello Kitty, inte det vanliga vitröda temat.

Tillägget är över tio år gammalt, ägs för närvarande av Similarweb och har 2 miljoner användare. Userstyles.org-biblioteket innehåller över en halv miljon färdiga teman, från mörka lägen för Google Docs till retro-wave för YouTube.

Varför är Stylish fundamentalt bättre än manuella redigeringar i DevTools? För att stilarna är beständiga: du stänger webbläsaren, öppnar den imorgon, och temat finns fortfarande kvar. Dessutom är det smidigt att växla mellan teman med ett klick om en sajt har flera teman.

Vad du kan göra:

• Aktivera mörkt tema på vilken sajt som helst som saknar ett
• Återställ den gamla sajt-designen efter en omdesign (ja, någon har förmodligen redan skrivit en sådan stil)
• Öka teckenstorlek eller kontrast för bättre läsbarhet
• Dölj distraherande element som sticky headers eller prenumerations-popups

Att skapa din egen stil kräver CSS. Grundläggande syntax är enkel: selektor, egenskap, värde. För komplexa stilar rekommenderar jag ett alternativ, Stylus, en open source stilhanterare utan telemetri.

2. UBlock Origin, kirurgisk blockering av element

uBlock Origin, detta är i första hand en annonsblockerare, men dess "Block Element"-funktion förtjänar en egen plats på den här listan. Den låter dig ta bort vad som helst från en sajt: en irriterande banner, en användaravatar som stör dig, en "3 platser kvar till reapris"-räknare, en väderwidget som tar upp halva sidan.

Varje gång jag ser internet utan en blockerare, till exempel på någon annans dator, kan jag inte fatta hur mycket skräp det finns. Tittar folk verkligen på YouTube med fem annonsavbrott i en tiominutersvideo?

Så fungerar Block Element: högerklicka på ett element → "Block Element" → uBlock markerar målet och föreslår en CSS-selektor. Du kan gå högre upp i DOM-trädet och utöka kriterierna, till exempel blockera inte en specifik banner utan hela containern med annons-iframe. Filtret sparas permanent.

Avancerad teknik, fliken "Mina filter" i inställningarna. Där kan du ange URL-filter med jokertecken för att förbjuda inläsning av hela kategorier av resurser. Jag använde detta för att inaktivera problematiska JS-filer från WordPress-tillägg och teman när jag letade efter kompatibilitetskonflikter på kundsajter.

3. Tampermonkey, skript för alla tillfällen

Tampermonkey, det mest kraftfulla verktyget i den här listan. Det är en userscript-hanterare med 12 miljoner installationer som låter dig köra din egen JavaScript på vilken sajt som helst. Om Stylish ändrar utseende och uBlock tar bort överflöd, så lägger Tampermonkey till nytt beteende.

Mitt främsta scenario: kriget mot popup-fönster som blockerar adblockers. Du känner till upplägget: du besöker en sajt, blockeringen tar bort annonser, och sajten upptäcker detta och rullar ut en banner med texten "Inaktivera din blockerare". uBlock hanterar det ibland, men om sajten använder slumpade klasser och ID:n (för att slinka förbi filter) kommer Tampermonkey in i bilden. Jag skriver ett skript som söker efter ett element med en specifik text eller bild och tar bort hela den överordnade behållaren. Grovhugget, men det fungerar.

Mer fredliga scenarier:

• Lägg till en "Ladda ner alla"-knapp på en filsida
• Fyll automatiskt i formulär med standarddata
• Aktivera HD-kvalitet på YouTube som standard (även om det finns dedikerade tillägg för detta nu)
• Utöka funktionaliteten i en sajts admin genom att lägga till snabbtangenter eller en panel med snabbkommandon

Hitta färdiga skript på Greasy Fork och OpenUserJS. Det finns tusentals skript för alla möjliga tillfällen, från videonedladdning till förbättringar av GitHubs gränssnitt. För känsliga operationer (lösenord, betalningar) rekommenderar jag att du inaktiverar Tampermonkey, eller lägger till sajter på svartlistan i tilläggets inställningar.

4. Utvecklarverktyg, lekplats för experiment

Jag tillbringar mer tid i Chrome DevTools än i någon IDE. När jag utvecklar tillägg för WordPress är det till stor del trial and error: föreställde mig → fixade i inspektorn → gillade → kodade. Utan DevTools skulle jag vara många gånger långsammare.

För icke-utvecklare är utvecklarverktygen en sandlåda där du tillfälligt kan ändra en sajt och se resultatet direkt. Öppna DevTools (F12), gå till fliken Elements, välj Inspect (pilen i panelens hörn) och klicka på valfri del av sidan. Redigera text, ändra färger, flytta block, ta bort element. Efter en sidomladdning återgår allt till det normala.

Det vanligaste scenariot för icke-programmerare: förbereda en skärmdump eller utskriftsversion. Innan du fångar, ta bort allt onödigt från sidan: annonsblock, popup-fönster, chattwidgetar, extra kolumner. Exportera med knappen Print Screen, så får du en ren och koncis bild, som om sajten ursprungligen var designad på det sättet.

På fliken Network finns en annan cool funktion: högerklicka på valfri förfrågan → "Block request URL" eller "Block request domain". Jag använder detta när jag behöver kontrollera hur en sajt fungerar utan ett specifikt skript eller typsnitt, till exempel för att lokalisera källan till en konflikt i ett kundprojekt.

5. Burp Suite Community Edition, trafikinterception

Den mest hardcore metoden av de fem. Burp Suite, det här är en interaktiv HTTP-proxy: den sitter mellan din webbläsare och servern och kan fånga upp, stoppa och modifiera vilken förfrågan eller respons som helst. Community Edition, gratisversionen från PortSwigger, är mer än tillräcklig för att "modda" sajter.

Varför behövs det här? Det finns situationer där varken CSS eller JavaScript på klientsidan kan ge önskat resultat eftersom datan kommer från servern redan i "fel" form. Burp fångar upp serversvaret innan webbläsaren bearbetar det och låter dig byta ut JSON, HTML eller headers i farten. Sajten renderas som om servern skickade exakt det du bytte in.

Verkligt fall: i ett projekt returnerade API:et en produktlista med fältet "available": false för artiklar som inte fanns i lager. Jag behövde kolla produktkortets layout för olika tillstånd. Istället för att gå in i databasen eller be backendutvecklaren generera testdata fångade jag upp svaret i Burp, ändrade ett par false till true, och såg på en sekund layouten för "tillgänglig" produkt.

Det svåraste med Burp är grundinställningen. Du måste ange proxyadressen (localhost:8080) i webbläsarens inställningar och installera Burps SSL-certifikat för att kunna arbeta med HTTPS-sajter. Utan certifikatet kommer webbläsaren att klaga på en "osäker anslutning". I PortSwiggers officiella dokumentation beskrivs den här processen steg för steg.

⁉️🤔 Vanliga frågor

Är det lagligt att ändra sajter på det här sättet?

Ja, eftersom ändringarna enbart sker på din egen enhet. Du hackar inte servern, stjäl ingen data och kringgår ingen betalvägg. Det är som att byta tapet i en lägenhet: väggarna är desamma, det ser bara annorlunda ut. Enda undantaget är automatiserade skript som skapar överbelastning på servern (exempelvis parsning i en loop utan fördröjning). Var rimlig.

Vilket verktyg ska jag välja om jag inte alls är programmerare?

Börja med Stylish: installera tillägget, gå till Userstyles.org, välj ett tema, klart. För att blockera störande element, använd uBlock Origin med funktionen Blockera element, den kräver ingen kod. Tampermonkey och Burp Suite är för dig som är redo att skriva eller åtminstone läsa kod.

Kan man ha sönder en sajt med sådana här redigeringar?

För dig själv, ja, det kan du. Delar av sidan kan sluta fungera om du raderat fel element eller täckt över en viktig knapp med din stil. Men det fixas genom att inaktivera tillägget eller återställa filtren. För andra användare förblir sajten orörd, dina ändringar är lokala.

Vad gör man om en sajt upptäcker Tampermonkey och blockerar innehåll?

Vissa sajter kontrollerar efter tillägg via JavaScript. Testa en alternativ hanterare, Violentmonkey, den är mindre känd och fångas mer sällan upp av detektering. Eller kör skriptet via en snippet i DevTools (fliken Sources → Snippets), det är en inbyggd funktion i Chrome som sajten inte kan spåra.

Finns det en risk att själva tillägget spionerar på mig?

Frågan är befogad. Stylish tillhörde fram till 2017 en annan ägare och samlade faktiskt in data. Nu ägs tillägget av Similarweb med en publicerad integritetspolicy, insamlingen är anonymiserad och kan stängas av i inställningarna. Vill du ha ett helt öppet verktyg utan telemetri, installera Stylus (öppen källkod-alternativ). På samma sätt för skript: Tampermonkey samlar in anonym statistik (version, språk, OS), som stängs av i inställningarna med kryssrutan "Anonym statistik".

Hur fungerar de här verktygen på mobila enheter?

På Android i Firefox kan du installera uBlock Origin och Tampermonkey som tillägg, det är en legitim metod. På iOS är läget sämre: Apple begränsar tillägg. Ett delvis alternativ är webbläsaren Orion, som stöder Chrome- och Firefox-tillägg på iOS. Stylish på mobil fungerar via en separat app.

Är det värt att anpassa sajter efter sig själv?

Om du har läst så här långt är svaret förmodligen "ja". Webben är inte en färdig produkt, utan råmaterial. Någon designade gränssnittet för en genomsnittlig användare, och du är inte genomsnittlig. Du har dina egna vanor, din egen smak, dina egna irritationsmoment.

Min personliga topplista sorterad efter insats kontra resultat: börja med uBlock Origin (5 minuter på Blockera element, och sajten är redan ren), lägg till Stylish för dina favoritplattformar (ytterligare 10 minuter, och du har ett mörkt tema där det aldrig funnits något), och när du vill ha automatisering, öppna Greasy Fork och leta efter ett färdigt skript för din uppgift. DevTools och Burp är för de fall då de tre första verktygen inte räcker till.

Du kan börja på fem minuter med ett enda tillägg, och efter en månad känner du inte igen din webbläsare, efter att ha byggt ihop en samling teman, skript och filter för två dussin sajter. Det här är en hobby med låg tröskel och oändligt tak. Som att anpassa Windows-skrivbordet på 2000-talet, fast det skalas upp till hela internet.