🦁Gastblogger Jouke
Wat het schrijven van een eigen Chrome extensie de gemeente Gouda opleverde.
Toen Zaaksysteem.nl binnen de gemeente Gouda geïntroduceerd werd, was er behoefte aan een duidelijk onderscheid tussen de verschillende omgevingen van het systeem. Dit als extra voorzorgsmaatregel ter voorkoming van de nachtmerrie van elke beheerder: het onbedoeld wijzigen van de productieomgeving omdat de verkeerde omgeving open staat. *Brrrrrr*. Jouke Ypma (Systeembeheerder ICT Gouwe-IJssel - gemeente Gouda) vertelt er in deze blog meer over.
In Gouda gebruiken wij voor incidentmanagement de on-premise versie van TOPdesk. Daarmee is het op dit moment al mogelijk om per installatie de vormgeving aan te passen door te kiezen voor verschillende kleuren. Zo is de primaire kleur van onze productieomgeving blauw, van de testomgeving rood en van de acceptatieomgeving groen. Omdat deze instellingen zijn opgeslagen buiten de database (per server), blijft dit onaangetast bij updates of kopieën van de database.
Uiteraard hebben we de vraag voor een soortgelijke oplossing voor het zaaksysteem, bij Zaaksysteem.nl neergelegd. Helaas bleek de implementatie hiervan nogal wat voeten in de aarde te hebben. Daarom zijn we op zoek gegaan naar een alternatief.
De beoogde oplossing
Als de kleur niet vanuit de site zelf ingesteld kan worden, dan is er zeker nog een andere oplossing: De vormgeving veranderen binnen de browser. Hiervoor zijn per browser verschillende extensies beschikbaar. Zo is er voor Google Chrome bijvoorbeeld de ‘Stylebot’ extensie, waarmee je zelf de ‘stylesheets’ kan aanpassen voor iedere site. Dit blijft dan bewaard voor elk toekomstig bezoek, uiteraard zolang de extensie geïnstalleerd is. Deze instellingen zijn vervolgens alleen zichtbaar voor jou en dus niet in de browser van andere gebruikers. Ideaal natuurlijk!
Wel kleven er een paar nadelen aan het gebruik van een algemene extensie zoals deze. Het vereist allereerst wat kennis over hoe css werkt (of over vormgeving van sites in het algemeen). Daarnaast zijn de instellingen niet blijvend zichtbaar wanneer je gebruik maakt van meerdere apparaten, zijn instellingen niet makkelijk te exporteren voor andere gebruikers, en verandert er bij het verkeerd instellen van deze extensie wellicht meer dan je wilt. En niet te vergeten, moeten gebruikers de extensie opnieuw instellen als er ooit een wijziging in de opbouw van de website van het zaaksysteem komt.
Het ontwikkelen van een eigen extensie
Gezien alle nadelen, besloten we daarom zelf een extensie te schrijven. Dat klinkt heel lastig, maar in dit geval viel dat reuze mee. Dat kwam vooral omdat de Google-tutorial voor het schrijven van een Chrome extensie precies dit onderwerp (vormgeving aanpassen van een site) behandelde. Kwam dat even goed uit! Wel was de informatie uit de tutorial heel summier. De extensie die ze daarin maken, werkt namelijk maar op één enkele site. Dit was niet echt in lijn met onze wens, waarbij de extensie werkt op meerdere sites en zelf in te stellen is. Ook wilden we de instellingen kunnen importeren en exporteren, zodat alle beheerders dezelfde instellingen kunnen gebruiken.
Conclusie tot zover? Met wat algemene kennis van JavaScript en hier en daar wat Google speurwerk over permissies, zijn we een heel eind gekomen!
Hobbels en valkuilen
Natuurlijk zijn er ook wel wat hindernissen voor het succesvol inzetten van een extensie. Let op het volgende:
- Tot je de extensie publiceert op de Chrome Web Store, moet de browser in ‘developers modus’ staan om de extensie ‘handmatig’ te laden.
- Om een extensie te publiceren op de Web Store, heb je dan eerst een ‘developers account’ nodig. Deze moet dan geverifieerd worden via een creditcard transactie.
- De extensie moet na uitbrengen en na elke update nog een keer handmatig gecontroleerd worden door Google zelf.
Mocht dus blijken dat er een kleine bug in de extensie zit, dan moet er direct een nieuwe versie gemaakt worden en gaat de wachttijd (controle door Google) weer opnieuw in. Zorg er dus voor dat je de extensie goed en uitgebreid test, zodat je een stabiele versie uitbrengt op de store.
Daarnaast is Google ook nog redelijk streng over het gebruik van "permissies" binnen de extensies (zoals ze verleend worden via het manifest). Zo moet er een goede reden voor zijn dat je elke pagina mag inzien en wijzigen, de permissie die wij hier gebruiken. Mocht die reden er niet zijn of mocht Google het idee hebben dat je misbruik maakt van de gegevens op de site, dan wordt deze extensie geweigerd. Dit om malafide extensies in de Web Store te voorkomen.
Probeer je overigens ook te houden aan een herkenbaar ontwerp. Zo zag de pagina met opties er in de eerste versie uit als een reeks tekstvelden met verschillende gekleurde blokjes, om op die manier een kleur te kiezen. Praktisch was het wel, maar intuïtief totaal niet! Daarom hebben we uiteindelijk besloten om de pagina te laten vormgeven volgens de basis van Material Design. Het hoeft niet 100% volgens de regels te zijn. Maar het herkenbaar maken van knoppen en opties scheelt al heel veel.
Het leveren van de extensie
Omdat de extensie uiteindelijk wel onderhevig is aan wijzigingen van het zaaksysteem, hebben we in overleg met Zaaksysteem.nl besloten om het project open source te maken via gitlab en de extensie te delen op de Chrome Web Store. Dit zorgt ervoor dat bij wijziging van de site van Zaaksysteem.nl, wij direct de juiste style regels kunnen aanpassen binnen de extensie. Wil je ook aan de slag met deze extensie binnen jouw organisatie? Check het hier.
