Er zijn nogal wat bedrijven die een website hebben waarop ze hun producten tonen, waar de contactgegevens, locatie en openingstijden op staan. Maar er is niet een onderdeel "nieuws". Soms is dat met een reden, omdat er bijvoorbeeld niet zoveel "nieuws" is, en als het laatste bericht wat daar staat van 4 jaar geleden is, dat is niet echt "nieuws" meer. Bedrijven gebruiken daar vaak social media voor, een eigen Facebookpagina, een eigen Instagram-account. Handig om even snel een mooie foto, actie of bericht te delen welke snel gedeeld kan worden onder de volgers.
Op vrijdag 3 januari 2025 reed ik naar Heerenveen om "op de zaak te werken". Om 17.00 uur moest ik namelijk nog even naar Wijn en Spijs. Een buurtgenoot (Bouke) was deze dag 75 jaar geworden en had iedereen die in zijn straat woont uitgenodigd voor een feestje in het Dorpshuis. Via de buurt was er al wat geregeld (een vaartocht in een praam), maar ik wilde Bouke zelf ook nog wat geven. Wijn en Spijs heeft altijd wel leuke pakketjes liggen, dus wat biertjes, nootjes, worst en kaas, dat moet lukken. Maar... in de pauze hoorde ik van mijn collega's dat ze de dag ervoor gesloten waren. Of alleen gesloten voor het afhalen van broodjes, dat was niet helemaal duidelijk.
Ik wilde dus even controleren of ze wel open waren, omdat ik dan mogelijk nog wat anders moet regelen. Mailtje gestuurd, maar die middag geen reactie meer ontvangen. Rond 17.00 uur maar even heen gereden en toen bleken ze gewoon open te zijn, dus ik heb een mooi pakket voor Bouke kunnen regelen.
Bij mijn speurtocht naar "nieuwsberichten" kwam ik (natuurlijk) ook op de Facebookpagina van Wijn en Spijs. Ik was benieuwd of er ook nog ergens een bericht stond met "gewijzigde openingstijden in de Kerst en rond Nieuwjaar". Dus ik scrolde naar beneden en na een paar berichtjes kreeg ik "poef" de pop-up van Facebook dat ik, als ik meer wilde bekijken, moest inloggen of een Facebook-account aan moest maken. Nu ben ik "developer/ontwikkelaar", dus in mijn browser even via "inspect element" de pop-up opzoeken en uit de HTML verwijderen, daarna kan ik weer gewoon verder scrollen. Waarbij het wel zo is dat ik alleen het volgende bericht kan zien, wat daarop volgt wordt niet meer ingeladen.
Het niet inladen van de rest, dat is een "vervolgpuntje". Het gaat mij nu om deze pop-up. Ik kan deze handmatig verwijderen, maar dat is "gedoe". Andere mensen die ik ken en "iets minder technisch zijn", die kan ik dit niet uitleggen. Dus het zou handig zijn dat met een bepaalde browser plug-in je die pop-up "automatisch" kunt verwijderen.
Tijd om dat te bouwen! Oh ja, dit werkt alleen op je "computer" en niet op je mobiele telefoon. Op je iPhone mag/kun je geen extensies voor Chrome installeren. Wel voor Safari, alleen moet dat zo te zien via de Store. Mocht ik een poging wagen, dan is dit het startpunt.
Waar begin je dan? Eerst maar even zoeken op "create a plugin for Chrome", want zoals je hier op Browserstack kunt zien is dat de meest gebruikte browser. Daarmee kom ik op de site van developer.google.com.
Ik begin met het "simpele voorbeeld" van Hello World. Kwestie van een paar bestanden aanmaken, afbeelding downloaden en de map toevoegen aan de "uitgepakte extensies". Dat werkt!
Bij de vervolg-linkje staat "scripts in het actieve tabblad injecteren", dat lijkt wel op wat ik wil doen. In mijn script doe ik een console.log en een chrome.scripting.executeScript, maar zo te zien gebeurt er helemaal niets. Tenminste, dat denk ik, maar als je een console.log doet, dan zie je dat niet in de "normale console". Via chrome://extensions/ kun je klikken op het linkje "service worker" en krijg je een tabblad waarin je de console-output kunt bekijken. Zo kan ik mijn script tunen en na niet al te lange tijd lijk ik werkende code te hebben. Het is "alleen maar" het opvragen van alle div-items op een pagina en als deze een class __fb-light-mode heeft dan kun je deze verwijderen. De volgende dag kwam ik nog een ander scenario tegen, als je door een fotogalerij heen klikt, dan heeft die gallerij ook deze class. Dus als je vervolgens de pop-up krijgt en alle pop-ups met deze class verwijdert, dan ben je ook de Facebook-weergave kwijt. Zonet in mijn code gefixt.
Als je zelf de voorbeelden hebt geprobeerd uit te voeren, weet je nu hoe je een eigen extensie toe kunt voegen. Dus download de code vanaf mijn Github-repository op een goede locatie op jouw computer ( c:\chrome-extensions\remove-facebook-pop-up ) en voeg de pop-up toe aan jouw Chrome!
En nog een extraatje, toen ik aan mijn collega Jeroen Smink liet zien wat ik gemaakt had, deelde hij ook een extensie die hij zelf gebouwd had voor Microsoft Teams. Hij werkt vaak met zijn mail in de browser en als hij dan een vergadering heeft via Teams, dan klikt hij in de browser de link aan. Maar elke keer krijg je dan de vraag "of je niet de Teams applicatie wil starten". Dan moet je wat aanvinken en op een knop klikken. Overbodige handelingen. En met zijn extensie wordt dat nu automatisch voor hem afgehandeld en opent Teams automatisch in de browser. Broncode staat hier op zijn Github-repository.