Min första Chrome Extension

Publicerat av johan den

Som hobbyprogrammerare var kodningen av en Chrome Extension en rolig utmaning som löste ett återkommande problem i min vardag. Låt mig dela med mig av en överskådlig beskrivning av hur den fungerar.

Senaste halvåret har en för stor del av min tid gått till att kolla bostadsannonser. Mina besök på Hemnet följer en tydlig rutin. Först hittar jag en lägenhet jag tycker verkar intressant. Sen tar jag fram en miniräknare för att räkna ut hur stor kontantinsatsen skulle vara om jag slog till. När uträkningen är klar förstår jag att jag absolut inte har råd med den intressanta läggan, suckar och drömmer vidare.

Såhär kan en bostadsannons på Hemnet se ut.

Efter att ha reflekterat kring denna rutin insåg jag att ett av stegen borde gå att effektivisera, eller ta bort helt och hållet: uträkningen av kontaktinsatsen. Några googlingar senare var det klart att en Chrome Extension skulle vara lösningen på mitt ”problem”. Eller det som skulle effektivisera mitt strösurfande.

I början av det här projektet visste jag ingenting om hur en extension är uppbyggd eller hur den fungerar. Efter att ha gått igenom några tutorials (bland annat The Code Train’s videoserie) förstod jag att det skulle vara möjligt att skapa en extension som skulle kunna leverera det jag hade på min korta kravspecifikation:

  1. Hämta priset på bostaden.
  2. Räkna ut vad 15% av priset på bostaden är.
  3. Lägg till resultatet av förra steget på hemsidan.

Det är egentligen ingen komplicerad procedur, men det är en som jag behöver traggla mig igenom flera gånger om dagen med min nuvarande livsstil. Därför kändes det värt att lägga lite tid på att försöka se till att jag aldrig behöver räkna ut en bostads kontantinsats igen.


Tidigare har jag tagit grundläggande kurser i JavaScript och HTML, vilket var väldigt värdefullt i det här projektet. Jag tog mig även igenom en del utvecklar-dokumentation mig tid att försöka förstå hur en extension egentligen är uppbyggd. någon djupare teknisk förklaring kommer du tyvärr inte få här, men jag rekommenderar att kolla in developer.chrome.com om man är sugen på att lära sig mer.

Slarvigt uttryckt kan man säga att tekniken bakom en extension liknar en webbsidas, eller en popups. Det betyder också att utformningen görs på samma sätt som när man bygger en webbsida, och med hjälp av några få rader HTML bestämmer man vad som ska synas när användaren trycker på tillägets ikon i webbläsarens toolbar. Andra extensions brukar använder detta som ett utrymme för användaren att göra inställningar för hur en extension ska köras, men för mitt projekt behövs inget sånt. Nedan ser du den koden mitt tilläggs fönster:

Koden som bestämmer vad som ska synas när en användare klickar på den tilläggets ikon.

Precis som med webbsidor kan du styra utseendet med ett stylesheet, du kan lägga till knappar, checkboxar osv. Min väldigt grundläggande extension behövde inget av det, men det var en värdefull insikt inför framtida projekt. Eftersom att jag valde att gå med filosofin ”less is more” ser min extension ut såhär:

Skärmdump av hur Kontantinsatsen ser ut. Helt funktionsfri, men ack så vacker.

Funktionerna som krävdes

När det kommer till funktioner som används i min extension är det inte många. Fem för att vara exakt. Här kommer en kort (läs torr) beskrivning av vad varje funktion fyller för syfte:

  1. En funktion som hämtar priset på bostadsannonserna och gör om pris-strängen till en integer.
  2. En funktion som kontantinsatsen (priset * 0,15).
  3. En funktion som lägger till mellanslag för varje tusental. På ren svenska: formatera tillbaka priset till en sträng med mellanslag för tusentalen som jag tog bort i första steget.
  4. En funktion som lägger till ett ID till den div där priset finns på hemsidan.
  5. En funktion som skapar ett element och lägger till det i samma div som priset ligger i.

Efter kodande, felsökande och några pauser för att inte tappa allt förnuft lyckades jag till slut få alla funktioner att spela ihop och göra det jag ville. Här nedan kan du se det slutgiltiga resultatet.

Under husets pris står nu kontantinsatsen, uträknad och tydlig, så fort jag besöker en bostadsannons på Hemnet.

Tadaaa!! Det är inte ett enormt steg för mänskligheten, men det sparar mig kanske 15 sekunder per besökt bostadsannons. Förhoppningsvis tjänar jag igen tiden det tog att utveckla Kontantinsatsen inom kort. Oavsett hur det blir med den saken kan jag i alla fall vara nöjd över att ha klarat av utvecklingen av min första Chrome Extension.


0 kommentarer

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *