Sådan oprettes Chrome Extensions fra bunden

Hvis du vil Tilføj eller modificer nogle funktioner i Google Chrome skal du bruge en udvidelse. Selvom du kan downloade en udvidelse fra Chrome Webshop, men nogle gange har du brug for en bestemt funktionalitet, som du ikke kan finde i en eksisterende udvidelse.

Nå er den gode nyhed, at du kan oprette din egen udvidelse for at tilføje eller ændre den nødvendige funktionalitet eller lave en ny tilføjelse eller app til Google Chrome, som du senere kan distribuere til andre brugere bruger Chrome Webshop.

I det følgende vil jeg vise dig nemmeste måde at oprette en udvidelse på. Hvis du har viden om webudvikling (HTML, CSS og JS), vil du føle dig hjemme. Hvis ikke, skal du først se disse kanaler til lære det grundlæggende i webudvikling, Fortsæt derefter nedenfor.

Forudsætninger

Du skal have følgende krav færdige, inden du begynder med denne vejledning.

1. Du skal være bekendt med HTML, CSS og JavaScript. [Check ressourcer]
2. Du skal have en kode editor at skrive forlængelsen. [Sammenlign redaktører]
3. (Valgfrit) Hvis du ønsker at distribuere din udvidelse til andre brugere, skal du have en udvikler konto på Chrome Webshop. [Opret en konto]

Bemærk: Google beder dig om at betale et lille gebyr for at oprette en udviklerkonto i Chrome Webshop.

Opret en udvidelse

I denne vejledning skal jeg dele processen med at skabe en to-do forlængelse til Google Chrome. Det vil være et hjælpeværktøj (som vist nedenfor) for at demonstrere væsentlige komponenter og evnerne til udvidelserne.

1. Få en skabelon

Google Chrome, som enhver anden platform, kræver dens udvidelser til at have en indstillet struktur, som kan virke kompleks for begyndere. Derfor er det godt at få en boilerplate skabelon til en udvidelse, der vil give alle fornødenheder.

Extensionizr er den bedste boilerplate generator til kromudvidelser. Det giver dig mulighed for at vælge en af ​​de givne udvidelsestyper - browser handling (en handling for alle sider eller browseren), side handling (en handling for den aktuelle side), eller skjult udvidelse (en baggrundsaktion, der normalt er skjult i frontgrænsefladen).

Desuden giver det forskellige finjusterende muligheder til inkludere / ekskludere nødvendige tilføjelser, tilladelser, etc. Du skal vælge “Browser handling” som udvidelsestype og “Ingen baggrund” som baggrundssiden for denne vejledning.

Når du er færdig med at vælge mulighederne for at oprette din prøveudvidelse, skal du trykke på “Hent det!” knappen i Extensionizr. Langt om længe, Udpak arkivet (.zip) til en mappe og åbn din kodeditor for at begynde at skrive udvidelsen.

2. Kode udvidelsen

Når du har downloadet og hentet skabelonen, kan du se en mappestruktur som vist på nedenstående skærmbillede. Skabelonen er pænt organiseret, og du skal vide, at den vigtigste fil er “manifest.json“.

Lad os også kende andre filer og mapper i denne mappe:

1. _locales: Det er vant til butikssprog information til en flersproget app.
2. css: Det fungerer til at gemme tredjeparts front-end biblioteker som Bootstrap 4.
3. ikoner: Det er designet til at have ikoner til din udvidelse i varierede størrelser.
4. js: Det er praktisk at spare tredjeparts back-end biblioteker som jQuery 3.
5. src: Den gemmer den egentlige kode, som du vil skrive til din udvidelse.

manifest.json

Den indeholder Grundlæggende metadata om din app, som definerer din apps detaljer til browseren. Du kan redigere det for at angive din udvidelses navn, beskrivelse, hjemmeside, ikon mv. Sammen med detaljer som browser handlinger og tilladelser.

F.eks. I nedenstående kode vil du bemærke, at jeg har ændret navn, beskrivelse og homepage_url sammen med default_title under browser_action. Desuden er jeg tilsat “opbevaring” under tilladelser da vi skal gemme data i vores udvidelse.

 "name": "Todoizr - Forenklet", "version": "0.0.1", "manifest_version": 2, "beskrivelse": "Enkel at gøre app til alle.", "homepage_url": " https://go.aksingh.net/todoizr "," ikoner ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" ikoner / icon128 . "default_propup": "src / browser_action / browser_action.html "," tilladelser ": [" storage "] 

src \ browser_action

Denne mappe holder koden til browser handling. I vores tilfælde vil vi kode popup vinduet vises ved at klikke på udvidelsens ikon i browseren. Vores udvidelse vil give brugerne mulighed for at tilføje og få vist opgaver i popup-vinduet.

Bemærk: Du kan altid springe i gang med koden ved at klone dette depot.

Indledende kode fra skabelonen

Selv om denne mappe kun havde en HTML-fil, der havde al koden, har jeg besluttet at opdele det i tre separate filer for bedre klarhed. Når det er sagt, HTML-filen navngivet “browser_action.html” har nu følgende kode:

Desuden stilfilen hedder “browser_action.css” har nedenstående indhold, mens JavaScript-filen hedder “browser_action.js” er tom for nu.

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

Design popupens grænseflade

Efter opsætningen af ​​det oprindelige projekt, lad os først designe grænsefladen af ​​popup-vinduet. jeg har konfigurere grænsefladen med en minimalistisk tilgang, viser navnet øverst efterfulgt af en formular for at tilføje to-do elementer og et område nedenfor for at se de tilføjede elementer. Det er inspireret af det simplistiske design af “Form Style 5“.

I koden nedenfor har jeg tilføjet to divs - en til visning af formularen for at tilføje en opgave og den anden til at vise listen over allerede tilføjede ting. Når det er sagt, den nye kode for “browser_action.html” er som følgende:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

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

 @import url ("./form_style_5.css"); #mainPopup højde: 200px; bredde: 300px; font-familie: Helvetica, Ubuntu, Arial, sans-serif;  / * Opgavt vareformular * / .form-style-5 margin: auto; polstring: 0px 20px;  .form-style-5: first-child background: none;  .form-style-5 h1 farve: # 308ce3; skrifttypestørrelse: 20px; tekst-align: center;  .form-style-5 input [type = "text"] bredde: auto; flyde: venstre; margin-bund: unset;  .form-style-5 input [type = "knap"] baggrund: # 308ce3; bredde: auto; flyde: højre; polstring: 7px; grænse: ingen; grænse-radius: 4px; skrifttypestørrelse: 14px;  .form-style-5 input [type = "knap"]: svever baggrund: # 3868d5;  / * Opgaveliste liste * / .form-style-5: sidste barn højde: arve; margin-bund: 5px;  .form-style-5 ul polstring: 20px;  .form-style-5 ul li font-size: 14px;  

Endelig, tredjeparts stilfilen “form_style_5.css” har nedenstående indhold. Det er simpelthen taget fra sit websted for at inspirere udformningen af ​​vores udvidelse.

 / * Form Style 5 af Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 maxbredde: 500px; polstring: 10px 20px; baggrund: # f4f7f8; margin: 10px auto; polstring: 20px; baggrund: # f4f7f8; grænse-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-bund: 10px;  .form-style-5 label display: block; margin-bund: 8px;  .form-style-5 input [type = "tekst"], .form-stil-5 input [type = "dato"], .form-stil-5 input [type = "datetime"] -5 input [type = "email"], .form-style-5 input [type = "number"], .form-stil-5 input [type = "søgning"], .form-style-5 input [type = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 vælg font-family: Georgia, Times New Roman ", Times , serif; baggrund: rgba (255,255,255, .1); grænse: ingen; grænse-radius: 4px; skrifttypestørrelse: 16px; margen: 0; omrids: 0; polstring: 7px; bredde: 100%; box-dimensionering: border-box; -webkit-box-dimensionering: grænse-boks; -moz-box-dimensionering: border-box; baggrundsfarve: # e8eeef; color: # 8a97a0; -webkit-boks-skygge: 0 1px 0 rgba (0,0,0,0.03) input; box-skygge: 0 1px 0 rgba (0,0,0,0,03) input; margin-bund: 30px;  .form-style-5 input [type = "tekst"]: 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 = "number"]: fokusér .form-style-5 input [type = "search"] : fokus, .form-style-5 input [type = "time"]: fokus, .form-style-5 input [type = "url"]: fokus, .form-style-5 textarea: fokus, style-5 select: fokus background: # d2d9dd;  .form-style-5 vælg -webkit-udseende: menulist-knap; højde: 35px;  .form-style-5. number background: # 1abc9c; farve: #fff; højde: 30px; bredde: 30px; display: inline-block; skrifttypestørrelse: 0,8em; margen-højre: 4px; linjens højde: 30px; tekst-align: center; tekstskygge: 0 1px 0 rgba (255,255,255,0,2); grænse-radius: 15px 15px 15px 0px;  .form-stil-5 input [type = "submit"], .form-style-5 input [type = "knap"] position: relative; display: blok; polstring: 19px 39px 18px 39px; farve: #FFF; margin: 0 auto; baggrund: # 1abc9c; skrifttypestørrelse: 18px; tekst-align: center; skrifttypestil: normal; bredde: 100%; grænse: 1px fast # 16a085; kantbredde: 1px 1px 3px; margin-bund: 10px;  .form-style-5 input [type = "submit"]: sving, .form-style-5 input [type = "knap"]: sving baggrund: # 109177;  

Skriv popupens logik

Når vi er færdige med forlængelsens front-end, lad os nu skrive logikken for dens arbejde. Vi har brug for vores udvidelse for at kunne Tilføj to-do elementer og også vise dem i popup-vinduet. Så vi vil tilføje en knap klikke på lytteren for at tilføje den indlæste tekst som en opgave og en sideindlæsning for at vise disse elementer.

I koden nedenfor skal vi bruge to funktioner - sync.get () og sync.set (), som er en del af “chrome.storage“. Vi har brug for den anden til at gemme de ting, der skal gøres i lageret, og den første til at hente dem og vise dem.

Når det er sagt, nedenfor er den endelige kode for “browser_action.js” fil. Som du kan se nedenfor, er koden stærkt kommenteret for at hjælpe dig med at forstå dets formål.

 funktion loadItems () / * Får først () dataene fra lageret * / chrome.storage.sync.get (['todo'], funktion (resultat) var todo = [] hvis (resultat && result.todo && result.todo.trim ()! == ") / * Parse og hent arrayet som det er gemt 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. Indlæs forlængelsen

Når du er færdig med at skrive din udvidelse, er det tid til at teste det gennem Google Chrome's funktion, der giver mulighed for at indlæse udvidelser uden for butik, der ikke er pakket. Men først skal du aktivere udvikler tilstand i din browser: klik på muligheder knap > vælge “Flere værktøjer” > Udvidelser, og skift derefter til “Udviklertilstand“.

Nu vil du se flere knapper under søgelinjen. Klik her på knappen “Læg udpakket” knap. Det vil bede om biblioteket - gennemse og vælg din udvidelses mappe, og det vil indlæse udvidelsen. Hvis du redigerer eller opdaterer koden til din udvidelse, kan du klikke på Reload-knappen for at indlæse de seneste ændringer.

I vores eksempel, Du vil se udvidelsens ikon ved siden af ​​profilikonet, fordi vi tilføjede en browserhandling i vores eksempeludvidelse. Du kan klikke på ikonet til Tilføj og se opgaveløsninger i vores udvidelse, da det er den angivne handling.

Fordel en udvidelse

Selvom det er nemt at uploade en udvidelse til Chrome Webshop, er processen for lang til at dække alle detaljer. Kort sagt opretter du en udviklerkonto, pakker din udvidelse og sender den sammen med dens indholdsoplysninger (som navn, ikon, skærmbilleder osv.); som angivet i sin trinvise vejledning.

Hvad er det næste? Læs og kode

Som du måske har forventet, er formålet med denne vejledning at komme i gang med udvidelsesudviklingen for Google Chrome. Jeg har forsøgt at dække de grundlæggende begreber; imidlertid, du skal vide meget mere for at gøre en seriøs forlængelsesudvikling.

Når det er sagt, nedenfor er nogle af mine yndlings go-to ressourcer for at lære at udvikle udvidelser til Google Chrome og andre Chrome-baserede browsere:

1. Alle evner, komponenter og funktioner i udvidelser.
2. Eksempeludvidelser af holdet bag Google Chrome.

Hvis du har gennemgået disse ressourcer og er klar til en udfordring, kan du prøve at tilføje nedenstående funktioner i den udvidelse, du netop har afsluttet med at udvikle:

1. En mulighed for at slette de gemte opgaver.
2. En funktion til at vise underretninger, når de er færdige med at tilføje et emne.

Det handler om at udvikle din første udvidelse til den mest populære browser. Hvilken udvidelse har du oprettet? Kom du ind i et problem? Lad mig vide din historie ved at skrive en kommentar nedenfor eller sende mig besked på @aksinghnet.

Sidst men ikke mindst, bemærk at du kan prøve Todoizr (den udvidelse vi oprettet) på Chrome Webshop og tjekke den komplette kode i dette lager.