NemProgrammering.dk logo

Lær at lave Google Chrome extensions

gratis!
Lær at lave Google Chrome extensions
Gratis!
På dette gratis kursus vil du lære at lave dine helt egne extensions til den populære browser Google Chrome. Lær de grundlæggende teknikker og muligheder, så du selv kan gå ud og lave din egen extension.
Inkluderet:
Ubegrænset adgang Info
7 danske videolektioner
2 timers undervisning
Din underviser Benjamin Mikkelsen
Benjamin Mikkelsen
Teknisk Direktør og grundlægger ved Rabatta ApS
Skaber af Danmarks næststørste Chrome Extension
10 års erfaring med web programmering

Du har måske hørt om Chrome Extensions som uBlock Origin, Adblock Plus og Lastpass. I dette kursus vil Benjamin fra Rabatta, tage dig med på rejsen, når en ny Chrome Extension skal udvikles.

En Chrome Extension er en udvidelse til Googles populære browser. Udvidelserne kan gøre alt fra at, hjælpe med at automatisere opgaver, til at fuldstændigt ændre indholdet af hjemmesider. Mulighederne er mange og endnu ikke udforsket af særligt mange endnu. Der er derfor rig mulighed for, at kunne innovere og skabe breakthrough teknologier, hvis man kender til udviklingen af udvidelserne.

I kurset her vil du lære det grundlæggende om, hvorfor Chrome Extensions kan være et værdifuldt værktøj. Vi ser på, hvorfor du bør kaste dig over Chrome Extensions, og hvor let det er at komme i gang med. I kurset udvikler Benjamin et værktøj, der kan tjekke priserne på et websted, så du kan følge med i prisudviklingen og købe, når prisen er lavest.

Vi starter helt fra bunden og gennemgår præcist hvad en Chrome Extension er, og hvorfor de er vigtige. Herefter bevæger vi os ind i den basale struktur, som en Chrome Extension har, hvorefter vi introducerer de forskellige muligheder, der er med en Chrome Extension. Det hele følges undervejs op med udviklingen af en ny Chrome Extension, der til sidst udgives. Du vil altså få mulighed for at følge hele processen fra start til slut, og bygge din egen udvidelse ovenpå koden fra kurset.

Koden fra kurset vil være tilgængelig på Github, hvor ændringer eller udvidelser tages glædeligt imod. Håbet er derfor, at kurset giver nok forståelse således, at du kan bygge videre.

Chrome Extensions udvikles som regel i JavaScript, som Benjamin også bruger i udviklingen af dette kursus’ extension. Det anbefales, at man som minimum har kendskab til JavaScript som udviklingssprog før du går i gang med kurset, da Benjamin anvender begreber, der for den utrænede programmør kan være svære at forstå. Tag derfor et kursus i JavaScript før du kaster dig ud i at udvikle extensions til internet browsers, hvis du ikke har prøvet kræfter med sproget før.

Vi håber du, at du får blod på tanden til at komme i gang med udviklingen af din egen Chrome Extensions, så flere brugere kan få øjnene op for, hvor fedt et værktøj det er.

Lektioner i dette kursus

1 Introduktion til udvikling af Chrome Extensions 06:09

Chrome extensions er et nyttigt vætøj som kan buges til alverdens ting. Vi ser på hvad chrome extensions er, og hvordan de bruges.

2 Strukturen på Chrome Extensions 07:38

Strukturen for en Chrome Extension tager form som en manifest.json-fil. Manifest.json er meta data til browseren, der fortæller hvilke ændringer, Chrome extension'en kan foretage.

3 Sådan designer du et user interface til din Chrome Extension 04:26

Til en Chrome extension følger et popup-vindue, der skal være muligt at betjene for brugeren. I videoen her forklarer vi, hvordan en popup designes samt hvilke elementer det indeholder.

4 Sådan laver du et background-script til din Chrome Extension 08:05

Her forklares det, hvordan background-scriptet fungerer. Background-scriptet vil køre i baggrunden, når man starter sin Chrome extension. Med udviklingen af denne extension benytter vi et script, der kører på startup og event handlers.

5 Sådan arbejder man med og gemmer data i Chrome browseren 05:34

I denne episode forklarer vi, hvordan storage.js-scriptet fungerer. Vi laver vores egen fil for at simplificere adgangen til Chrome Storage API'en.

6 Sådan søger du på en hjemmeside efter data med dit content script 07:08

Her beskriver vi indholdet i inject.js og samspillet med de scripts. Vi bruger de funktioner vi oprettede i de andre .js-filer sammen med nye funktioner, så det gør os i stand til at gemme prisen.

7 Sådan får vi vores plugin til at fungrere med alle scripts 09:32

I sidste episode skal vi skrive popup.js-scriptet, der skal binde tidligere filer sammen med det UI, vi lavede i starten af kurset. Vi binder altså sløjfe på udvidelsen i episoden her.

Andre kurser fra NemProgrammering.dk

Denne side blev sidst opdateret: