Kundebehandler Tanet Trimas hos Tripletex leter etter ny bolig. Og for å ikke betale mer enn nødvendig, begynte han og samboeren å sortere Finn-annonsene etter kvadratmeter-pris.
Men snodig nok får man ikke faktisk se kvadratmeter-prisen, så den måtte han regne ut manuelt selv. Dette ble raskt irriterende, og Trimas fikk en idé: Hva med en nettleser-utvidelse som faktisk viste kvadratmeter-prisen i Finn-søk?
- Jeg spurte samboeren om hun kunne tenke seg noe sånt, og når hun sa ja, satt jeg bare i gang, forteller Trimas til kode24.
Trimas hadde aldri laget en utvidelse til nettleseren før, men brukte bare et par dager på å lære seg teknikkene og få utvidelsen "Finn Pris-per-kvadratmeter" publisert i både Firefox og Chrome.
Sånn fikk han det til - og sånn får du til det samme.
Bare tre filer
- Jeg hadde null erfaring med å lage browser-extensions fra før. Så jeg starta rett og slett med masse googling og et par Youtube-videoer, for å komme i gang og skjønne hvilke konfigureringer som måtte til, forteller Trimas.
Nina skal få FINNs 800 mikrotjenester ut i skyen
Det å lage en utvidelse til nettleseren viser seg å ikke være så komplisert som mange kanskje tror. For sjekker du ut Trimas sitt ferdige produkt på GitHub, finner du bare tre filer:
- prisPerKvm.js: En Javascript-fil med selve koden til utvidelsen.
- manifest.json: Et manifest med diverse metadata om utvidelsen.
- finn-icon.png: Ikonet utvidelsen bruker.
- Og dette er altså alt som trengs for en nettleser-utvidelse?
- Det er i utgangspunktet det som trengs for en så liten ting som min utvidelse, ja. Så kan det jo selvsagt bli mer komplekst jo mer man ønsker, svarer Trimas.
Tilgang til fanen
Kort fortalt leser utvidelsen til Trimas ut lista over boligannonser på Finn.no, deler totalprisen på antall kvadratmeter og viser tallet ved hver annonse som kvadratmeterpris.
- Jeg bruker noe som heter Content Scripts, som kan targete selve DOM-en til den fanen man er på, forklarer han.
Chromes dokumentasjon for utvidelser forklarer Content Scripts slik:
"Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them and pass information to their parent extension."
Slike skript har altså tilgang til nettsida i den aktive fanen, og kan enkelt skrape informasjon fra den, og skrive HTML til den. For eksempel ved bruk av henholdsvis document.querySelector og document.createElement.
Og i manifestet kan du selv definere hvilke nettadresser som faktisk trigger skriptet til å kjøre.
Ute i Chrome og Firefox
Når du har skrevet en slik Javascript-snutt, fått deg et ikon og skrevet manifest-fila, har du alt som trengs for å faktisk få utvidelsen din publisert.
- Det var ikke noe særlig vanskelig. Det eneste som er viktig er å få en god nok beskrivelse, ikoner og et par skjermbilder. Min største frustrasjon var at Chrome skulle ha eksakte mål på skjermbilder og ikoner. Hvis man bomma der, så ble den avvist når man prøvde å laste den opp, smiler Trimas.
Den samme utvidelsen kunne sendes inn til både Chrome og Firefox sin utvidelsesbutikk, som en pakka ZIP-fil.
Begge nettleserne har egne administrasjonspaneler for opplasting og oppfølging av utvidelsene, men bare Chrome krevde betalt for å laste den opp; 5 dollar.
Og alt i alt er Trimas glad for at han bega seg ut i utvidelsenes vide verden - nå sitter han med massevis av tilbakemelding fra blant annet kode24-klubben og planer for videre utvikling.
- Det er ikke så spesielt vanskelig, så lenge du kan litt JavaScript og HTML, sier Trimas til kode24.
- Så jeg vil absolutt anbefale folk som ønsker å gjøre noe gøy, og lære seg noe nytt, å lage sine egne!
Finn-gjengen sender 1,4 millioner e-poster før lunsj
- Vi jobber som det passer oss best, forteller søk-utviklerne. Bli med på innsida av Finn.no.