Chrome-utvidelser, et kraftig supplement i utviklingsprosessen

Chrome-utvidelser, et kraftig supplement i utviklingsprosessen

I et nylig utviklingsprosjekt hadde jeg bruk for informasjon i en cookie fra ett annet domene for å kunne simulere en single-sign-on situasjon. Nå er det ikke mulig for en web-side å hente ut informasjon i en cookie fra et annet domene, men ettersom cookien ligger på din maskin så er det fullt mulig å se denne informasjonen i nettleseren.

Faktisk tilbyr de fleste moderne nettlesere grensesnitt for å se og administrere cookies. Det er derimot ikke så lettvint, når det er noe man må gjøre mange ganger i løpet av en dag. Det finnes også mange nettleserutvidelser, som lar deg se og redigere innholdet i cookies. Men jeg fant ingen som passet akkurat mitt behov, så da tenkte jeg at jeg kunne lage en utvidelse i Chrome (Chrome-extension) selv. Denne artikkelen forutsetter at du leser den med Chrome, og at du er litt kjent med web-utvikling.

Farlige greier

Noen synes at det er litt skummelt at nettsteder laster ned informasjon til din datamaskin, og leser den igjen neste gang du besøker nettstedet. Og det kan være sant at såkalte tracking cookies ikke er til for ditt beste, men gjerne benyttes for å finne ut mer om deg og ditt liv på nettet. Det finnes mange gode verktøy og teknikker for å beskytte seg mot disse, søk på «privacy and third party cookies» så er du godt i gang. Men cookies benyttes også for at nettstedet skal kunne tilby deg en bedre brukeropplevelse og for eksempel for forsikre seg om at du er pålogget når du bytter mellom vinduer eller om browseren kræsjer. I denne artikkelen skal vi se litt på et eksempel på hvordan et nettsted bruker en cookie for å huske en viktig innstilling uten at du må logge deg på og lagre dette i en profil.

www.skatteetaten.no

Åpne utviklerverktøyet på Chrome. På min norske Chrome er det menyvalgene «Visning» --> «Utvikler» -->«Utviklerverktøy» eller høyreklikk et eller annet sted på siden og velg «Inspiser element.»

Finn fliken «Resources» og utvid «Cookies.» Det ligger tre cookies der, den siste heter «contrast» og har verdien normal. Dersom du klikker på "Høykontrast" øverst i høyre hjørne på siden, og deretter laster inn siden på nytt, så vil du se at verdien på cookien har endret seg til "highContrast". Dette har skatteetaten gjort slik neste gang brukeren kommer tilbake til skatteetaten.no vil innstillingene være de samme som da hun eller han forlot det. Det gir altså en bedre brukeropplevelse.

Utvikling

I denne artikkelen skal vi se på hvordan du kan lage en enkel extension, som henter ut verdien av cookien «contrast» fra www.skatteetaten.no. Du kan lage Chrome-extensions med HTML, CSS og JavaScript, velkjente teknologier for en front-end utvikler. Åpne kildefilene til dette prosjektet på GitHub, klon repo'et eller last ned til maskinen din, åpne pprosjektet og du finner følgende filer:

manifest.json

Manifest-filen inneholder meta-data om din extension, navn, versjon, beskrivelse, hvilke tillatelser det trenger og informasjon om side som skal vises og ikon.

icon

Ikonet er viktig for det skal kunne vises på verktøylinjen, velg en enkel illustrasjon med få farger. Bildet skal være firkantet 19 pixler, fortrinnsvis en PNG.

logo.png

Dette er en logo som vises i «popup.html»

popup.html

Dette er selve siden som vises inni popup-vinduet som opprettes når du klikker på ikonet. Dette er en vanlig HTML-side hvor du kan vise og samle inn informasjon.

popup.js

I denne filen styrer du hva som tegnes ut i «popup.html», i vårt eksempel henter vi inn alle cookies som befinner seg under kontroll av Chrome, looper igjennom til vi finner den vi skal ha, og viser innholdet i den.

Lokal testing

Vanligvis distribueres chrome-extensions via Chromes nettmarked, men det er ikke så hensiktsmessig når hensikten er å bruke det i utviklingsøyemed, eller under selve utviklingen av din extension. Dette har Google tenkt på; naviger til chrome://extensions; helt på toppen av siden kan du aktivere utviklermodus, som gir deg tilgang til å installere din uferdige extension. Ikonet bør vises med en gang om det ikke er feil i pakken, ellers vil du se en feilmelding.

Det er det som skal til

...for å bruke din extension lokalt på Chrome. Dersom du ønsker å distribuere den må du lese om pakking og hosting i seksjonen «Mer lesing» nedenfor. Der finner du også en link til APIet over tilgjengelig funksjonalitet. Det er mange muligheter, både for bruk i dine utviklingsprosjekter, eller annen moro!

Test selv!

Mer lesing

Chrome-extensions
Chrome-platform API-index
Publisering av extensions
Cookies på nettvett.no

Kildekoden til denne artikkelen

 

Om bloggeren:
Frontendutvikler. Glad i Javascript. Har hakket sammen websider siden midten av 90-tallet, og trives godt med det.

comments powered by Disqus