Zet websites naar je hand met Stylish en GreaseMonkey

© PXimport

Zet websites naar je hand met Stylish en GreaseMonkey

Geplaatst: 10 november 2016 - 12:25

Aangepast: 14 december 2022 - 14:39

Jochem de Goede

Met Stylish en GreaseMonkey is het mogelijk om websites naar je eigen hand te zetten, door eigen thema’s erop toe te passen en snelle en handige JavaScript-acties aan een website toe te voegen. We zetten de handigste stijlen en scripts voor je op een rij.

Je kunt websites natuurlijk gewoon bezoeken, maar wist je dat je er ook erg leuke dingen mee kunt doen? In deze masterclass laten we je zien hoe je aan de slag kunt gaan met Stylish. We laten zien wat het doet, hoe je stijlen kunt installeren en hoe je zelf aan de slag kunt met diverse stijlen voor websites. Lees ook: Je eigen WordPress-website - Deel 1.

Ook bekijken we GreaseMonkey, waarmee je met JavaScript handige acties kunt toevoegen aan verschillende websites, waarmee je productiever kunt werken. We nemen enkele handige acties met je door.

01 Stylish

Stylish is een extensie voor Mozilla Firefox, Google Chrome, Opera en Safari, waarmee je een eigen stijl op een website kunt toepassen. Het is mogelijk voor gebruikers om zelf thema’s in elkaar te zetten en daarmee dus websites aan te passen. Veel van die thema’s worden gedeeld op userstyles.org, waar meer dan 70.000 stijlen voor websites zijn te downloaden. Er is wel een klein functieverschil tussen de versie van Firefox en die van Chrome, maar in de toekomst worden de functionaliteiten van beide versies gelijkgetrokken. Zo is het in Firefox mogelijk om de browser-interface ook van een eigen stijl te voorzien. Je downloadt de extensie voor Chrome hier. Klik op Toev. aan Chrome / Extensie toevoegen. Voor Firefox ga je hiernaartoe en klik je op Toevoegen aan Firefox / Installeren / Nu herstarten.

Media has no description

© PXimport

02 Een stijl installeren

Na het herstarten van de browser verschijnt een bevestigingspagina van Stylish. Klik links op userstyles.org home om door de verschillende stijlen te kunnen bladeren. Deze stijlen zijn door andere gebruikers gemaakt en voor veel websites beschikbaar. Je kunt nu linksboven, onder de gele balk, een zoekterm invullen om een stijl te zoeken voor je favoriete website. Zoek bijvoorbeeld op youtube. Er verschijnen nu een hoop stijlen. Kies er eentje uit en klik op Install with Stylish en daarna op Installeren. De stijl is geïnstalleerd. Je kunt deze direct testen door naar www.youtube.com te gaan en de stijl in actie te zien. In ons geval zien we de Nyan Cat als voortgangsbalk in een YouTube-video, precies zoals we zagen op de voorbeeldpagina. Andere handige thema’s zijn bijvoorbeeld DarkTube waarmee YouTube helemaal in het donker wordt gehuld en een minimaal Facebook-thema genaamd Minimalist Facebook 2015. Maar er is natuurlijk veel meer beschikbaar op de website.

Media has no description

© PXimport

03 Zelf een stijl maken

Je kunt via de Stylish-knop in de browser zien welke stijlen er op dit moment op de website actief zijn. Om stijlen voor een specifieke website te zoeken, klik je op het Stylish-icoon en kies je voor de optie Stijlen zoeken voor deze website. Je wordt vervolgens doorgeleid naar de website van userstyles waar je, indien beschikbaar, alle stijlen voor die website kunt bekijken. Is er geen stijl beschikbaar, dan zou je zelf aan de slag kunnen. Daarvoor moet je wel CSS gaan gebruiken. Met een eigen stijl kunnen we bijvoorbeeld de Google-pagina aanpassen. Het zou leuk zijn om hier een eigen kleur en zelfs achtergrondafbeelding aan toe te voegen. Dat is met CSS zo gebeurd. Klik op het Stylish-pictogram en kies voor de optie Nieuwe stijl schrijven en daarna voor Voor deze URL (W), omdat we deze stijl nu alleen van toepassing willen hebben op de voorpagina van Google. Er opent een nieuw venster met daarin drie regels code, namelijk een namespace-definitie en een -moz-document-definitie waarin het domein bevindt voor waar de stijl gaan schrijven.

Media has no description

© PXimport

04 CSS

Voordat we doorgaan is het nodig om de basis van CSS te snappen. CSS is de taal om websites mee op te maken: om ze kleuren te geven, lettergroottes in te stellen en meer. HTML is de taal om websites in te delen in elementen, zoals H1 voor een header en DIV voor een onderdeel van een website. Met CSS is het de bedoeling om een element te ‘selecteren’ waarna je er een eigen stijl op kunt toepassen. Eén zo’n element is de ‘body’, dat is de gehele webpagina. Om de body te selecteren, typ je tussen de twee accolades bij @-moz-document simpelweg body { }.

Je hebt nu de gehele webpagina geselecteerd. Stel dat je nu een andere achtergrondkleur wilt instellen. Daarvoor bestaat het CSS-commando background-color: KLEUR;. Typ dat letterlijk zo tussen de haken van body, maar vervang KLEUR door bijvoorbeeld orange voor oranje. Klik op Voorbeeld om de stijl nu toe te passen. Als je nu terug naar het Google-tabblad gaat, zie je dat de achtergrond van Google oranje is geworden. Stel dat je nu een eigen afbeelding als achtergrond wilt instellen. Daarvoor gebruik je het volgende CSS-commando: background-image: url(‘PAD-NAAR-BESTAND’);. Vervang het pad naar het bestand door het daadwerkelijke pad. Staat het bestand op jouw harde schijf, dan zet je er file:/// voor, en zorg je dat je van alle slash-tekens in het pad forward slashes maakt. Afhankelijk van de grootte van het plaatje, kan het zijn dat je er maar een gedeelte van ziet.

Gelukkig gebruik je een moderne browser en kunnen we met CSS3 die fout eenvoudig corrigeren, namelijk door het commando background-size: cover; onder background-image toe te voegen. Heb je overigens gekozen voor een afbeelding van je harde schijf, dan is de afbeelding uiteraard alleen op deze computer zichtbaar.

Media has no description

© PXimport

05 Ontwikkelaarstools Chrome

Als je zelf meer wijzigingen wilt maken, is het nodig om de ontwikkelaarsgereedschappen van Firefox en/of Chrome te gebruiken. Dat klinkt misschien eng, maar het valt reuze mee. Stel je wilt op google.nl die balk onderaan weg hebben, dan ga je als volgt aan de slag (we kiezen nu even Chrome). Je klikt met de rechtermuisknop op deze balk in Google Chrome en kiest voor Inspecteren. Vervolgens opent er aan de rechterkant een blok. We zijn geïnteresseerd in het gedeelte bovenaan, dat is de broncode van de webpagina. Als het goed is, is er nu een div geselecteerd met als class genaamd fbar. Als je nu teruggaat naar Stylish, kun je die balk onderaan selecteren met .fbar { }. De punt voor de naam is om elementen met een specifieke class te selecteren. Je gebruikt een hekje (#) als je een element op een id wilt selecteren. Typ vervolgens display: none; tussen de haken van fbar om de div te laten verdwijnen. Klik opnieuw op Voorbeeld en de onderste balk is weg.

Media has no description

© PXimport

06 Ontwikkelaarstools Firefox

Afhankelijk van wat voor plaatje je hebt gekozen, kan sommige tekst onleesbaar zijn geworden doordat de afbeelding donker is. Om dat op te lossen gaan we als voorbeeld te tekst bovenaan de pagina wit maken. Dit keer zullen we dat in Firefox doen. Klik daarvoor met de rechtermuisknop op de tekst en kies voor Element inspecteren. Nu verschijnt onderaan in beeld de broncode van de pagina met een div geselecteerd. Als je met de muis over die broncode gaat, zie je het element dat die div representeert gemarkeerd op de webpagina zelf.

Om de kleur te wijzigen van de tekst, ga je – met de div geselecteerd – naar het tabblad Berekend dat je rechts in de ontwikkelaarstools vindt. Klap het attribuut color uit en je ziet dat de huidige kleur afkomstig is van #gb#gb a.gb_P. Dat is het element dat we moeten hebben. Ga terug naar Stylish en typ #gb#gb a.gb_P { }. Om de tekstkleur te veranderen, gebruik je het commando color: KLEUR; en vervang je het kleur-element met een daadwerkelijke kleur. In dit geval wordt het dan dus color: white;.

07 GreaseMonkey

Wat Stylish mogelijk maakt met opmaak en CSS, doet GreaseMonkey met JavaScript. GreaseMonkey maakt het mogelijk het web te verbeteren met handige acties. Denk aan extra functies voor websites als YouTube, Google en Facebook. GreaseMonkey is primair gericht op Firefox. Gebruikers van Google Chrome hebben als beste optie de extensie genaamd Tampermonkey. Daardoor kan het voorkomen dat niet alle scripts voor GreaseMonkey ook in Chrome werken. Je downloadt GreaseMonkey hier. Klik op Toevoegen aan Firefox / Installeren / Nu herstarten. Firefox start even opnieuw op, waarna je rechts een nieuw pictogram ziet dat van GreaseMonkey is. Tampermonkey voor Chrome vind je hier.

Media has no description

© PXimport

08 Scripts installeren

Om een script aan GreaseMonkey toe te voegen en actief te maken, moet je deze eerst weten te vinden. Er is geen centrale plek voor scripts, maar er zijn wel een aantal populaire websites waar zelfgemaakte scripts worden gedeeld. Een van die sites is www.greasyfork.org/nl. Een handig script is bijvoorbeeld het Spotify-webspeler-script dat je hier vindt. Dit script voegt notificaties toe voor elk liedje dat je afspeelt, met artiest, album en titel.

Je installeert dit script door op de knop Installeer dit script te klikken. Vervolgens klik je op Install en klik je op Ok. In Chrome klik je eveneens op Installeer dit script en daarna op Install. Als je nu naar de Spotify-webspeler gaat, zie je dat de website vraagt om notificaties te mogen tonen. Ga daarmee akkoord. Zodra je een liedje afspeelt, zie je de notificatie van de browser verschijnen. Om je scripts te beheren, klik je in Firefox op het pijltje van het GreaseMonkey-icoon. Onderaan zie je de actieve scripts, die je met een klik op de knop kunt uitschakelen. In Chrome klik je op het Tampermonkey-icoon en zie je direct het actieve script bovenaan, met ernaast een aan/uitschakelaar.

09 Bierdopje-ondertiteling

Bierdopje.com is een website waar je vroeger vaak zelfgemaakte Nederlandse ondertiteling vond voor veel populaire series. Helaas eiste BREIN dat er geen ondertiteling meer verspreid werd. Met het GreaseMonkey-script is het mogelijk om grotendeels de functionaliteit van het originele Bierdopje weer te herstellen. Je downloadt en installeert het script zoals beschreven in stap 8. Als je daarna naar Bierdopje.com gaat, zie je daar nu landvlaggen bij elke serie staan. Nog handiger: je ziet ernaast ook een downloadknop staan, waarmee je direct automatisch op de betreffende nzb-zoekmachine naar die serie zoekt met een optimale zoekopdracht. Dan hoef je dat dus zelf niet meer te doen en kun je de serie meteen binnenhalen.

Media has no description

© PXimport

10 Afbeeldingen

Een ander handig GreaseMonkey-script is die van Mouseover Popup Image Viewer. Hiermee wordt het mogelijk om automatisch een afbeelding in een pop-up weer te geven wanneer je met de muis over een afbeelding met een link gaat. Je vindt dit script hier. Om het te testen, kun je bijvoorbeeld naar www.reddit.com gaan. Wanneer je met de muis over een thumbnail van een post gaat, zie je direct de grote afbeelding. Hetzelfde geldt als je naar Google Afbeeldingen gaat en daar zoekt naar een foto, en het werkt ook prima op Twitter, Instagram, Tumblr, Wikipedia en veel meer diensten.

11 YouTube +

Veel scripts richten zich op YouTube. Een zo’n script is bijvoorbeeld YouTube +. Functies van dit script zijn onder andere dat video’s in een eigen pop-up afgespeeld kunnen worden en dat video’s frame voor frame bekeken kunnen worden. Ook handig is de mogelijkheid om de lijst met zoekresultaten om te toveren naar een roosterweergave, voor een duidelijker overzicht. De complete, en zeer lange, lijst van verbeteringen en functies die YouTube + doorvoert, kun je hier lezen. YouTube + heeft wel alleen ondersteuning voor de HTML5-speler van YouTube, maar die is op het platform toch al standaard, dus dat zou geen probleem moeten zijn.

Als je na de installatie naar www.youtube.com gaat, zie je naast de Sign in-knop een afspeelknop, dat is de knop om dit script mee in te stellen. Klik op de ballon om het script te configureren. Op de configuratiepagina vind je links tabbladen voor de verschillende opties: General, Video en Blacklist. Op General vinden wij de opties Disable hovercards handig, evenals Hide footer en helemaal al Hide recommended channels sidebar. Klik op Save om de wijzigingen op te slaan en direct actief te maken. Bij Video is het handig om Disable annotations aan te zetten. Je kunt hier ook de standaardvideokwaliteit instellen, door die bij Default video quality te selecteren.

12 Meer YouTube

Er zijn nog meer handige YouTube-scripts. Wil je dat bij elke YouTube-video een downloadlinkje wordt toegevoegd om de video te downloaden? Geen extra websites, vreemde diensten of dubieuze downloadknoppen, gewoon een no-nonsense-script. Eenzelfde script om mp3’s te downloaden bestaat ook. Kijk je YouTube-filmpjes liever in een donker thema zodat het iets rustiger aan de ogen is en de video meer tot leven komt? Ga dan hiernaartoe. Nog eentje: hier vind je een ander handig script dat YouTube-links overal op het web vertaalt naar de titel van de video. Als je vervolgens op die link klikt, speelt de video direct in een pop-up op de pagina af, zodat je niet naar YouTube hoeft om de video te bekijken.

Media has no description

© PXimport

13 Google

Op Greasy Fork en andere websites bevinden zich ook behoorlijk wat scripts om Google en de verschillende diensten van de zoekgigant mee te verbeteren. We sommen er een paar op. Met dit script ga je met een klik op een afbeelding van Google Afbeeldingen, direct naar de bronpagina in plaats van eerst naar Googles eigen miniweergave.

Met dit script worden de zoekresultaten van Google niet langer opgedeeld in pagina 1, 2, et cetera, maar blijf je oneindig lang scrollen en laden de volgende pagina’s automatisch.

Met Google site: Tool heb je meer opties om de zoekresultaten te beheren. Je kunt dan op de groene links van een resultaat klikken en bijvoorbeeld alleen op dit domein zoeken of dit domein juist uitsluiten van de zoekresultaten.

Met deze extensie worden directe links toegevoegd aan de zoekresultaten en word je niet eerst langs Google geleid en pas daarna naar de daadwerkelijke website, zodat je sneller bij je doel aankomt en meer privacy hebt.

GoogleMonkeyR verandert de pagina van zoekresultaten zelfs helemaal. Je kunt het aantal kolommen op de zoekpagina instellen, resultaten nummeren, automatisch meer resultaten laden, bepaalde Google-elementen verbergen en een achtergrondkleur instellen voor de zoekresultaten. Na installatie kun je GoogleMonkeyR configureren door op het tandwiel rechtsboven op de pagina te klikken en te kiezen voor GoogleMonkeyR Settings.

14 Adware

Om het web als geheel beter te gebruiken, kun je het AntiAdware-script gebruiken, dat je online hier vindt. Daarmee worden ongewenste extra aanbiedingen op veel websites geblokkeerd. Denk bijvoorbeeld aan een extra aanbieding als je Adobe Flash of Adobe Reader downloadt. Het script heeft ondersteuning voor ongeveer veertig sites, waaronder dus Adobe maar ook bijvoorbeeld voor SourceForge.

Media has no description

© PXimport

Deel dit artikel
Voeg toe aan favorieten