Slik lager du Chrome Extensions fra scratch

Hvis du vil legg til eller endre noen funksjonalitet i Google Chrome må du bruke en utvidelse. Selv om du kan laste ned en utvidelse fra Chrome Nettmarked, men noen ganger trenger du en bestemt funksjonalitet som du ikke finner i en eksisterende utvidelse.

Vel, den gode nyheten er at du kan lage din egen utvidelse for å legge til eller endre den nødvendige funksjonaliteten eller lage en ny tillegg eller app for Google Chrome, som du senere kan distribuere til andre brukere bruker Chrome Nettmarked.

I det følgende skal jeg vise deg enkleste måten å lage en utvidelse. Hvis du har litt kunnskap om webutvikling (HTML, CSS, og JS), vil du føle deg hjemme. Hvis ikke, se først på disse kanalene til lære grunnleggende om webutvikling, Fortsett deretter nedenfor.

Forutsetninger

Du må ha følgende krav fullført før du starter med denne opplæringen.

1. Du må være kjent med HTML, CSS og JavaScript. [Sjekk ressurser]
2. Du må ha en kode redaktør å skrive forlengelsen. [Sammenlign redaktører]
3. (Valgfritt) Hvis du ønsker å distribuere utvidelsen til andre brukere, må du ha en utvikler konto på Chrome Nettmarked. [Opprett en konto]

Merk: Google ber deg om å betale en liten avgift for å opprette en utviklerkonto i Chrome Nettmarked.

Opprett en utvidelse

I denne opplæringen skal jeg dele prosessen med å skape en to-do forlengelse for Google Chrome. Det skal være et verktøy (som vist nedenfor) for å demonstrere viktige komponenter og evnene til utvidelsene.

1. Få en mal

Google Chrome, som alle andre plattformer, krever det utvidelser å ha en sett struktur, som kan virke kompleks for nybegynnere. Derfor er det godt å få en boilerplate mal for en forlengelse som vil gi alle nødvendigheter.

Extensionizr er den beste boilerplate generatoren for kromutvidelser. Det gir deg mulighet til å velge en av de forlengede typene - nettleserhandling (en handling for alle sider eller nettleseren), sidehandling (en handling for gjeldende side), eller skjult forlengelse (en bakgrunnshandling som vanligvis er skjult i frontgrensesnittet).

Videre gir det ulike finjusterende alternativer til inkludere / utelukke nødvendige tilleggsprogrammer, tillatelser, etc. Du må velge “Nettleserhandling” som forlengelsestype og “Ingen bakgrunn” som bakgrunnssiden for denne opplæringen.

Når du er ferdig med å velge alternativene for å opprette prøveutvidelsen, trykker du på “Last det ned!” knappen i Extensionizr. Endelig, trekk ut arkivet (.zip) til en katalog og åpne kodeditoren din for å begynne å skrive utvidelsen.

2. Kode utvidelsen

Etter at du har lastet ned og hentet malen, ser du en katalogstruktur som vist på skjermbildet nedenfor. Malen er pent organisert, og du må vite at den viktigste filen er “manifest.json“.

La oss bli kjent med andre filer og mapper i denne katalogen også:

1. _locales: Det er vant til lagre språkinformasjon for en flerspråklig app.
2. css: Den fungerer for å lagre tredjeparts front-end-biblioteker som Bootstrap 4.
3. ikoner: Den er designet for å ha ikoner for utvidelsen din i varierte størrelser.
4. js: Det er praktisk å redde tredjeparts back-end biblioteker som jQuery 3.
5. src: Den lagrer den faktiske koden du vil skrive for din forlengelse.

manifest.json

Den inneholder grunnleggende metadata om appen din, som definerer appens detaljer til nettleseren. Du kan redigere den for å angi navnet ditt, beskrivelsen, nettsiden, ikonet, etc. sammen med spesifikasjoner som nettleserhandlinger og tillatelser.

For eksempel, i underkoden, vil du legge merke til at jeg endret navn, beskrivelse og homepage_url sammen med standard_title under browser_action. Dessuten, jeg la til “Oppbevaring” under tillatelser som vi trenger for å lagre data i utvidelsen vår.

 "name": "Todoizr - å gjøre forenklet", "versjon": "0.0.1", "manifest_version": 2, "beskrivelse": "Enkel å gjøre app for alle.", "homepage_url" https://go.aksingh.net/todoizr "," ikoner ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" ikoner / icon128 . "standard_locale": "en", "browser_action": "default_icon": "icons / icon19.png", "default_title": "Todoizr - Forenklet", "default_popup": "src / browser_action / browser_action.html "," permissions ": [" lagring "] 

src \ browser_action

Denne katalogen vil holde koden for nettleserhandling. I vårt tilfelle vil vi kode popup-vinduet vises ved å klikke på utvidelsesikonet i nettleseren. Vår utvidelse vil tillate brukere å legge til og vise gjøremål i popup-vinduet.

Merk: Du kan alltid hoppe med koden ved å klone dette depotet.

Innledende kode fra malen

Selv om denne katalogen bare hadde en HTML-fil som hadde all koden, har jeg besluttet å dele den i tre separate filer for bedre klarhet. Når det er sagt, heter HTML-filen “browser_action.html” har nå følgende kode:

Dessuten stilfilen heter “browser_action.css” har under innholdet mens JavaScript-filen heter “browser_action.js” er tom for nå.

 #mainPopup polstring: 10px; høyde: 200px; bredde: 400px; font-familie: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Design popup-grensesnittet

Etter å ha opprettet det opprinnelige prosjektet, la oss først designe grensesnittet til popup-vinduet. jeg har sette opp grensesnittet med en minimalistisk tilnærming, viser navnet øverst etterfulgt av et skjema for å legge til gjøremål og et område under for å vise de lagt elementene. Det er inspirert av den enkle utformingen av “Form Stil 5“.

I koden nedenfor har jeg lagt til to divider - en for å vise skjemaet for å legge til en gjøremål og den andre for å vise listen over allerede lagt til gjøremål. Når det er sagt, den nye koden for “browser_action.html” er som følgende:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Og stilfilen “browser_action.css” har nå følgende kode:

 @import url ("./form_style_5.css"); #mainPopup høyde: 200px; bredde: 300px; font-familie: Helvetica, Ubuntu, Arial, sans-serif;  / * Oppgaveformular * / .form-style-5 margin: auto; polstring: 0px 20px;  .form-style-5: første barn bakgrunn: ingen;  .form-style-5 h1 color: # 308ce3; skriftstørrelse: 20px; tekstjustering: center;  .form-style-5 input [type = "text"] bredde: auto; flyte: venstre; margin-bunn: unset;  .form-style-5 input [type = "button"] bakgrunn: # 308ce3; bredde: auto; flyte: høyre; polstring: 7px; grense: ingen; grense-radius: 4px; fontstørrelse: 14px;  .form-style-5 input [type = "button"]: svever bakgrunn: # 3868d5;  / * Gjøre oppføringsliste * / .form-style-5: siste barn høyde: arve; margin-bunn: 5px;  .form-style-5 ul polstring: 20px;  .form-style-5 ul li font-size: 14px;  

Til slutt, tredjeparts stilfilen “form_style_5.css” har nedenstående innhold. Det er ganske enkelt tatt fra nettsiden for å inspirere utformingen av vår utvidelse.

 / * Form Style 5 av Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 maksimal bredde: 500px; polstring: 10px 20px; bakgrunn: # f4f7f8; margin: 10px auto; polstring: 20px; bakgrunn: # f4f7f8; border-radius: 8px; font-familie: Georgia, "Times New Roman", Times, Serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; margin-bunn: 10px;  .form-style-5 label display: block; margin-bunn: 8px;  .form-style-5 input [type = "text"], .form-stil-5 input [type = "date"], .form-style-5 input [type = "datetime"] -5 input [type = "email"], .form-style-5 input [type = "tall"], .form-style-5 input [type = "søk"], .form-stil-5 inngang [type = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 velg font-family: Georgia, Times New Roman ", Times , serif; bakgrunn: rgba (255,255,255, .1); grense: ingen; grense-radius: 4px; skriftstørrelse: 16px; margin: 0; oversikt: 0; polstring: 7px; bredde: 100%; boks-størrelse: border-box; -webkit-boks-dimensjonering: border-box; -moz-box-size: border-box; bakgrunnsfarge: # e8eeef; color: # 8a97a0; -webkit-boks-skygge: 0 1px 0 rgba (0,0,0,0.03) innsett; boks-skygge: 0 1px 0 rgba (0,0,0,0.03) innsett; margin-bunn: 30px;  .form-style-5 input [type = "text"]: fokus, .form-style-5 input [type = "date"]: fokus, .form-style-5 input [type = "datetime"]: fokus, .form-style-5 input [type = "email"]: fokus, .form-style-5 input [type = "tall"]: fokus, .form-style-5 input [type = "søk"] : fokus, .form-style-5 input [type = "time"]: fokus, .form-style-5 input [type = "url"]: fokus, .form-style-5 textarea: fokus, stil-5 velg: fokus bakgrunn: # d2d9dd;  .form-style-5 velg -webkit-utseende: meny-knappen; høyde: 35px;  .form-style-5. nummer bakgrunn: # 1abc9c; farge: #fff; høyde: 30px; bredde: 30px; display: inline-block; fontstørrelse: 0.8em; margin-høyre: 4px; linjehøyde: 30px; tekstjustering: center; tekstskygge: 0 1px 0 rgba (255,255,255,0,2); border-radius: 15px 15px 15px 0px;  .form-stil-5 input [type = "submit"], .form-style-5 input [type = "knapp"] posisjon: relative; skjerm: blokk; polstring: 19px 39px 18px 39px; farge: #FFF; margin: 0 auto; bakgrunn: # 1abc9c; skriftstørrelse: 18px; tekstjustering: center; font-style: normal; bredde: 100%; grense: 1px solid # 16a085; kantbredde: 1px 1px 3px; margin-bunn: 10px;  .form-style-5 input [type = "submit"]: svever, .form-style-5 input [type = "button"]: svever bakgrunn: # 109177;  

Skriv popupens logikk

Når vi er ferdige med forlengelsens frontend, la oss nå skrive logikken for dens arbeid. Vi trenger vår utvidelse for å kunne Legg til gjøremål og vis dem også i popup-vinduet. Så vi vil legge til en knapp, klikk på lytteren for å legge til tekst som en gjøremål og en sidelastlytter for å vise disse elementene.

I koden nedenfor skal vi bruke to funksjoner - sync.get () og sync.set (), som er en del av “chrome.storage“. Vi trenger den andre til å lagre de oppgavene i lagringen, og den første til å hente dem og vise dem.

Når det er sagt, nedenfor er den endelige koden til “browser_action.js” fil. Som du kan se nedenfor, er koden svært kommentert for å hjelpe deg med å forstå formålet.

 funksjon loadItems () / * Får først () dataene fra lagringsenheten * / chrome.storage.sync.get (['todo'], funksjon (resultat) var todo = [] hvis (resultat && result.todo && result.todo.trim ()! == ") / * Parse og få arrayet som det er lagret som en streng * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) for (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Legg på forlengelsen

Når du er ferdig med å skrive forlengelsen din, er det på tide å teste det gjennom Google Chrome-funksjonen som tilbyr å laste ut utvidede utvidelser uten butikk. Men først må du aktiver utviklermodus i nettleseren din: klikk på opsjoner knapp > velge “Flere verktøy” > utvidelser, og deretter slå på “Utviklermodus“.

Nå ser du flere knapper under søkefeltet. Her klikker du på “Legg utpakket ut” knapp. Det vil be om katalogen - bla gjennom og velg utvidelsesmappen din, og den vil laste inn utvidelsen. Hvis du redigerer eller oppdaterer koden til utvidelsen, kan du klikke på Last inn knappen for å laste de nyeste endringene.

I vårt eksempel, Du vil se utvidelsesikonet ved siden av profilikonet fordi vi la til en nettleserhandling i vår prøveutvidelse. Du kan klikke på dette ikonet til legg til og se gjøremål i vår utvidelse som det er den angitte handlingen.

Distribuer en utvidelse

Selv om det er Lett å laste opp en utvidelse til Chrome Nettmarked, er prosessen for lang til å dekke alle detaljene. Kort sagt, du lager en utviklerkonto, pakker utvidelsen din, og sender den deretter sammen med innholdsdetaljene (som navn, ikon, skjermbilder, etc.); som oppført i sin trinnvise veiledning.

Hva nå? Les og kode

Som du kanskje har forventet, er formålet med denne opplæringen å komme i gang med utvidelsesutviklingen for Google Chrome. Jeg har forsøkt å dekke de grunnleggende konseptene; derimot, du trenger å vite mye mer for å gjøre seriøs utvidelsesutvikling.

Når det er sagt, nedenfor er noen av mine favoritt go-to ressurser for å lære å utvikle utvidelser for Google Chrome og andre Chrome-baserte nettlesere:

1. Alle evner, komponenter og funksjoner for utvidelser.
2. Eksempelutvidelser av teamet bak Google Chrome.

Hvis du har gått gjennom disse ressursene og er klar for en utfordring, kan du prøve å legge til under funksjoner i utvidelsen du nettopp har fullført, med å utvikle:

1. Et alternativ for å slette de lagrede oppgavene.
2. En funksjon for å vise varsler når du er ferdig med å legge til et element.

Det handler om å utvikle din første utvidelse for den mest populære nettleseren. Hvilken forlengelse skapte du? Fikk du inn i et problem? Gi meg beskjed om historien din ved å skrive en kommentar nedenfor eller sende meg beskjed på @aksinghnet.

Sist men ikke minst, gjør oppmerksom på at du kan prøve Todoizr (utvidelsen vi opprettet) i Chrome Nettmarked og sjekke den komplette koden i dette lagringsstedet.