Een onderscheid in meerdere Gmail tabs
Een van mijn jaarlijkse tradities is een zoektocht naar de ideale e-mailclient. Eentje die vlekkeloos overweg kan met zowel Google Mail accounts als meer traditionele mail providers. Even traditioneel is de uiteindelijke conclusie dat ik het best gedij met wat Gmail-tabs in mijn browser, hoewel ook dat verre van optimaal is. Tijd voor een browserextensie op maat!
Het probleem met meerdere Google accounts
Je kan perfect tegelijkertijd aangemeld zijn met meerdere Google accounts. Of dan elke Google service meteen werkt zoals je verwacht is een open vraag. Google zal immers de account waarmee je het eerst heb aangemeld gaan gebruiken als de default. Dat zal met andere woorden de account zijn die gebruikt wordt als je YouTube, Gmail, Drive, Search Console of andere Google service opent in je browser.
In de URL zal je dan dingen als /u/1/ en /u/2/ of authuser=0 en authuser=1 zien verschijnen.
Je kan wel switchen tussen accounts via je profielfoto rechtsboven, maar het is verre van optimaal.
Of je kan je afmelden bij al je Google accounts en daarna weer aanmelden in de "juiste" volgorde.
Ja, daar heb ik dus geen zin in.
Browserprofielen
Praktisch elke browser op de computer beschikt over de optie om verschillende profielen aan te maken. Het doel is je werk, projecten en privé gescheiden te houden door elk profiel een eigen opslagruimte te geven voor o.a. favorieten, cookies en bezochte websites. Omdat ik niet dag in dag uit met meerdere browservensters te maken wil hebben is dit geen optie.
Firefox containers
Mijn dagelijkse browser op mijn computer is Mozilla Firefox. Daar heb je al enkele jaren de mogelijkheid om containers te gebruiken. Kort gezegd: je kan een container maken voor bijvoorbeeld elk project, elke Google account, online shopping of zelfs om je Facebook-account (en cookies!) volledig te isoleren.
Containers zijn dus een soort van mini-browserprofiel toegepast op tabs. Je kan per container een kleur instellen zodat je aan elke tab in je browser meteen kan zien tot welke container die behoort. Met een extra extensie kan je forceren dat bepaalde sites in een bepaalde container geopend moeten worden, zodat bijvoorbeeld je uurregistratie altijd geopend wordt in je "Werk"-container, of Facebook in je Facebook-container.
Ik heb enkele maanden deze oplossing gebruikt. Maar na een tijdje zal je je opnieuw moeten aanmelden bij Google en als je dan niet goed oplet heb je je in de Werk-container aangemeld met je persoonlijke account en vice versa.
Ja, daar heb ik dus ook geen zin meer in.
Vereisten
Ik wil de tabs met Gmail vastpinnen en zonder de tab te moeten openen:
- Weten om welke Gmail-account het gaat
- Of er ongelezen berichten zijn; het maakt me niet uit hoeveel.
Het vastpinnen van de tabs biedt verschillende voordelen. Ze tonen enkel het favicon (de afbeelding die je normaal in elke tab in je browser ziet) waardoor ze minimale ruimte innemen. Belangrijk want deze tabs blijven altijd zichtbaar, hoeveel andere tabs je ook opent.
Ze bevinden zich bovendien aan de linkerkant waardoor ik ze makkelijk kan openen met een keyboard shortcut (⌘+1 om de eerste tab te openen, ⌘+2 voor de tweede tab, etc.). Dat ze enkel het favicon tonen en de titel achterwege laten zou je als een nadeel kunnen beschouwen, maar in de realiteit wordt de titel van inactieve tabs toch onleesbaar zodra je een tiental tabs open hebt staan.
Google biedt zelf een oplossing voor de tweede eis. In de instellingen van Gmail kan je een optie activeren om in het favicon aan te geven hoeveel ongelezen berichten je hebt. Ik werk in grote lijnen via het "inbox zero"-principe. Je zal dus geen 1724 ongelezen berichten in mijn inbox vinden. Een indicatie of er wel of niet ongelezen berichten zijn volstaat.
We zijn er zo heel dicht bij, maar ik schiet niets op met enkele identieke Gmail favicons naast elkaar.
Er zijn best wel wat browserextensies te vinden die hiervoor een oplossing bieden, maar ik heb een gezonde aversie voor het installeren van willekeurige extensies die zo toegang krijgen tot mijn e-mail accounts.
Er zijn tal van voorbeelden te vinden van (semi-)populaire extensies die gekocht worden door organisaties met het uitdrukkelijke doel er misbruik van te maken. Ik ben daarom zeer selectief in wat ik toevoeg én heb natuurlijk al te vaak goesting om te prullen met wat nieuws.
Tijd dus voor een browserextensie op maat: Favemail.
Favemail
Het principe van de uiteindelijke versie van de extensie is simpel: pas een custom favicon toe die afhangt van (a) de Gmail-account en (b) of er ongelezen berichten zijn.
Favicon
De basis van het favicon is een svg-bestand. Svg is immers een tekstbestand wat ervoor zorgt dat het gemakkelijker te manipuleren is dan een png of jpg. Dit bestand werd zo opgesteld dat we er eenvoudig een kleur op kunnen toepassen, zowel voor het symbool op de voorgrond als de achtergrondkleur. Het resultaat is dat je met dit ene bestand door middel van kleur kunt aangeven om welke account het gaat (eis #1) en door het inkleuren van ofwel voor- ofwel achtergrond kunt aangeven of er ongelezen berichten zijn (eis #2).
Bepalen welke account gebruikt wordt
Extensies met toegang tot de inhoud van webpagina's kunnen allerlei nuttige (en gevaarlijke) dingen doen. Ze kunnen bijvoorbeeld informatie uit de pagina's halen of informatie toevoegen of wijzigen. De informatie uit een pagina halen is meestal tricky; een update van de websitebouwer kan ervoor zorgen dat je extensie de nodige info plots niet meer terugvindt. Of de pagina's kunnen zo complex zijn dat het in de praktijk onmogelijk is om op een stabiele manier de informatie te lokaliseren binnen de pagina.
Een voorbeeld van zo'n complexe app: Google Mail. Gelukkig vinden we voor onze doeleinden alle informatie terug in het meest stabiele onderdeel van de structuren van Google Mail: de titel en de favicon link.
De titel laat ons weten om welke account het gaat en volgt deze formaten:
Voor mij volstaat het om het derde en tevens laatste element van de titel te nemen en dit als invoer gebruiken om een kleur te genereren.
Je kan dus verder gaan en (ook) het e-mailadres (2e element) gebruiken, dat encoderen en zo een kleur berekenen. Het belangrijkste is dat de kleur voor een specifieke account altijd dezelfde is. Herkenbaarheid is wat we willen.
Om die herkenbaarheid te bestendigen wordt er binnen Google Mail ook een 3 pixel dikke lijn in dezelfde kleur toegepast bovenaan het scherm.
Eindresultaat
Zo beschik ik met een simpele browserextensie over een oplossing voor een probleem dat me al lang dwarszat. In een oogwenk zie ik welke account in welke tab zit én of er ongelezen e-mails zijn.
Browserextensies als redder in nood
Met browserextensies krijg je als gebruiker meer controle over wat er wordt getoond op specifieke websites, en hoe. Denk maar aan de zeer populaire adblockers die niet alleen advertenties blokkeren, maar je vaak ook toelaten om bepaalde elementen op een website te verwijderen.
Je kan zoals je ziet ook met browserextensies aan de slag om vlotter te werken met websites en webapps. Zelfs zonder medewerking van de bouwer. Dus als je telkens zit te zuchten wanneer je weer eens op die ene link moet klikken om wat op te zoeken of in te vullen: misschien is er een betere manier!
De code van Favemail is beschikbaar op GitHub voor wie er zelf wat mee wil prullen. Leef je uit.
Ben je geen ontwikkelaar, maar wel geïntrigeerd door wat een browserextensie op maat voor jou zou kunnen betekenen? Hmm, was er maar een eenvoudige manier om erachter te komen...