Kako ustvariti razširitve za Chrome iz nič

Če želite dodate ali spremenite nekatere funkcije v Google Chromu morate uporabiti razširitev. Čeprav lahko prenesete razširitev iz spletne trgovine Chrome, včasih pa potrebujete določeno funkcijo, ki je ni mogoče najti v nobeni obstoječi razširitvi.

Dobra novica je, da lahko ustvarite lastno razširitev, da dodate ali spremenite zahtevano funkcionalnost ali ustvarite nov dodatek ali aplikacijo za Google Chrome, ki jo lahko pozneje distribuirati drugim uporabnikom v Spletni trgovini Chrome.

V nadaljevanju vam bom pokazal najlažje ustvarite razširitev. Če poznate razvoj spletnih strani (HTML, CSS in JS), se boste počutili kot doma. Če ne, najprej preglejte te kanale spoznajo osnove spletnega razvoja, nato nadaljujte spodaj.

Predpogoji

Preden začnete s to vadnico, morate izpolniti naslednje zahteve.

1. Morate biti seznanjeni z HTML, CSS in JavaScript. [Preverite vire]
2. Moraš imeti urejevalnik kod , da napišete končnico. [Primerjaj urednike]
3. (Izbirno) Če želite razširitev razširiti drugim uporabnikom, morate imeti a račun razvijalca v spletni trgovini Chrome. [Ustvari račun]

Opomba: Google vas prosi, da za ustvarjanje računa za razvijalce v spletni trgovini Chrome plačate majhno pristojbino.

Ustvarite razširitev

V tej vadnici bom delil postopek ustvarjanja razširitev opravil za Google Chrome. To bo koristnost (kot je prikazano spodaj) za prikaz bistvenih komponent in zmožnosti, ki so na voljo za razširitve.

1. Pridobite predlogo

Google Chrome, tako kot vsaka druga platforma, zahteva svoje razširitve imajo določeno strukturo, kar se zdi za začetnike zapleteno. Zato je dobro dobiti predlogo za podaljšek, ki bo zagotavljal vse potrebno.

Extensionizr je najboljši generator za kromirane razširitve. Omogoča vam, da izberete eno od podanih vrst razširitev - delovanje brskalnika (dejanje za vse strani ali brskalnik), Dejanje strani (dejanje za trenutno stran) ali skrita razširitev (dejanje v ozadju, ki je običajno skrito v sprednjem vmesniku).

Poleg tega ponuja različne možnosti prilagoditve vključi / izključi potrebne dodatke, dovoljenja, itd. Izbrati morate “Dejanje brskalnika” kot podaljšek in “Brez ozadja” za ozadje te vadnice.

Ko končate z izbiro možnosti za ustvarjanje vzorčne razširitve, pritisnite tipko “Prenesite ga!” v razdelku Razširitev. Končno, izvlecite arhiv (.zip) v imenik in odprite urejevalnik kode, da začnete pisati pripono.

2. Kodirajte razširitev

Ko prenesete in izvlečete predlogo, boste videli strukturo imenika, kot je prikazano na spodnjem posnetku zaslona. Predloga je lepo urejena in morate vedeti, da je najpomembnejša datoteka “manifest.json“.

Spoznajmo tudi druge datoteke in mape v tem imeniku:

1. _locales: Včasih je shranite informacije o jeziku za večjezično aplikacijo.
2. css: Deluje za shranjevanje zunanjih knjižnic tretjih oseb, kot je Bootstrap 4.
3. ikone: Zasnovan je tako, da ima ikone za vašo razširitev v različnih velikostih.
4. js: Prihaja priročno za shranjevanje knjižnice drugih proizvajalcev kot jQuery 3.
5. src: Shrani dejansko kodo, ki jo boste napisali za svojo razširitev.

manifest.json

Vsebuje osnovnih metapodatkov o vaši aplikaciji, ki določa podrobnosti aplikacije v brskalniku. Uredite ga lahko tako, da nastavite ime razširitve, opis, spletno mesto, ikono itd dejavnosti in dovoljenja brskalnika.

Na primer, v spodnji kodi boste opazili, da sem spremenil ime, opis in domačo stran_url skupaj z default_title v brskalniku. Poleg tega sem dodal “shranjevanje” pod dovoljenji ker moramo shraniti podatke v razširitvi.

 "name": "Todoizr - Poenostavljeno opravilo", "različica": "0.0.1", "manifest_version": 2, "opis": "Aplikacija za preprosto opravilo za vse.", "homepage_url": " https://go.aksingh.net/todoizr "," ikone ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" ikone / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - To-do Simplified "," default_popup ":" src / browser_action / browser_action.html "," dovoljenja ": [" storage "] 

src \ t

Ta imenik bo vseboval kodo za delovanje brskalnika. V našem primeru bomo kodirajte pojavno okno prikazano ob kliku ikone razširitve v brskalniku. Naša razširitev bo uporabnikom omogočila dodajanje in ogledovanje elementov opravil v pojavnem oknu.

Opomba: Kode lahko vedno začnete s kloniranjem tega skladišča.

Začetna koda iz predloge

Čeprav je ta imenik imel samo HTML datoteko, ki ima vso kodo, sem se odločila, da jo razdelim v tri ločene datoteke za boljšo jasnost. V tem primeru je datoteka HTML imenovana “browserтени.html” zdaj ima naslednjo kodo:

Poleg tega je ime slog ime “browser_action.css” ima spodnjo vsebino, medtem ko je datoteka JavaScript imenovana “browser_action.js” je za zdaj prazen.

 #mainPopup polnilo: 10px; višina: 200px; širina: 400px; družina pisav: Helvetica, Ubuntu, Arial, sans-serif;  h1 velikost pisave: 2em;  

Oblikujte vmesnik popup-a

Po nastavitvi začetnega projekta najprej oblikujemo vmesnik pojavnega okna. imam vzpostaviti vmesnik z minimalističnim pristopom, prikazuje ime na vrhu, ki mu sledi obrazec za dodajanje elementov opravil in spodnje območje za ogled dodanih elementov. Navdihuje ga poenostavljeno oblikovanje “Slog obrazca 5“.

V spodnji kodi sem dodal dva oddelka - enega za prikaz obrazca za dodajanje postavke opravila, drugega pa za prikaz seznama že dodanih elementov opravil. To pomeni, da je nova koda za “browserтени.html” kot sledi:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

In slog datoteko “browser_action.css” zdaj ima naslednjo kodo:

 @import url ("./ form_style_5.css"); #mainPopup višina: 200px; širina: 300px; družina pisav: Helvetica, Ubuntu, Arial, sans-serif;  / * Obrazec za opravila * / .form-style-5 margin: auto; oblazinjenje: 0px 20px;  .form-style-5: prvi otrok ozadje: nič;  .form-style-5 h1 barva: # 308ce3; velikost pisave: 20 px; text-align: center;  .form-style-5 input [type = "text"] width: auto; plovec: levo; margin-bottom: unset;  .form-style-5 input [type = "button"] ozadje: # 308ce3; width: auto; float: desno; oblazinjenje: 7px; meja: nič; obrobni polmer: 4px; velikost pisave: 14px;  .form-style-5 input [type = "button"]: hover ozadje: # 3868d5;  / * Seznam opravil * / .form-style-5: zadnji otrok height: inherit; margin-bottom: 5px;  .form-style-5 ul polnilo: 20px;  .form-style-5 ul li velikost pisave: 14px;  

Nazadnje, slog datoteke tretje osebe “form_style_5.css” ima spodnjo vsebino. Preprosto jo vzamemo s spletne strani, da bi navdihnili oblikovanje naše razširitve.

 / * Slog obrazca 5 od Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; oblazinjenje: 10px 20px; ozadje: # f4f7f8; margin: 10px auto; oblazinjenje: 20px; ozadje: # f4f7f8; obrobni polmer: 8px; družina pisav: Georgia, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legend velikost pisave: 1.4em; margin-bottom: 10px;  .form-style-5 nalepka prikaz: blok; margin-bottom: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "datum"], .form-style-5 input [type = "datetime"], .form-style -5 input [type = "email"], .form-style-5 input [type = "number"], .form-style-5 input [type = "search"], .form-style-5 input [type] = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 select font-family: Georgia, "Times New Roman", Times , serif; ozadje: rgba (255,255,255, .1); meja: nič; obrobni polmer: 4px; velikost pisave: 16px; margin: 0; oris: 0; oblazinjenje: 7px; širina: 100%; velikost škatle: obrobno polje; -webkit-box-sizing: mejna škatla; -moz-box-sizing: border-box; barva ozadja: # e8eeef; barva: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) inset; box-shadow: 0 1px 0 rgba (0,0,0,0.03) inset; margin-bottom: 30px;  .form-style-5 input [type = "text"]: fokus, .form-style-5 input [type = "date"]: fokus, .form-style-5 input [type = "datetime"]: focus, .form-style-5 input [type = "email"]: fokus, .form-style-5 input [type = "number"]: fokus, .form-style-5 input [type = "search") : focus, .form-style-5 vnos [type = "time"]: fokus, .form-style-5 input [type = "url"]: fokus, besedilo -form-style-5: fokus, .form style-5 select: focus ozadje: # d2d9dd;  .form-style-5 select -webkit-izgled: menulist-button; višina: 35px;  .form-style-5 .številka ozadje: # 1abc9c; barva: #fff; višina: 30px; širina: 30px; prikaz: inline-block; velikost pisave: 0.8em; margin-right: 4px; višina vrstice: 30px; text-align: center; besedilna senca: 0 1px 0 rgba (255,255,255,0.2); obrobni polmer: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "button"] position: relative; prikaz: blok; oblazinjenje: 19px 39px 18px 39px; barva: #FFF; margin: 0 auto; ozadje: # 1abc9c; velikost pisave: 18 px; text-align: center; slog pisave: normalno; širina: 100%; meja: 1px trdna # 16a085; meja-širina: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover ozadje: # 109177;  

Napišite logiko popup-a

Ko končamo s sprednjim delom razširitve, naj zdaj napišemo logiko za njegovo delovanje. Potrebujemo našo razširitev, da bomo lahko dodajte elemente opravil in jih prikažite v pojavnem oknu. Torej bomo dodali poslušalca klikov gumbov, da bi vneseno besedilo dodali kot postavko opravila, in poslušalec obremenitve strani, ki bo prikazal te elemente.

V spodnji kodi bomo uporabili dve funkciji - sync.get () in sync.set (), ki so del “chrome.storage“. Potrebujemo drugega, da shranimo postavke opravil v pomnilnik in jih prvi naložimo in prikažemo.

V nadaljevanju je podana končna koda “browser_action.js” mapa. Kot lahko vidite spodaj, je koda zelo komentirana, da vam pomaga razumeti njen namen.

 function loadItems () / * Najprej pridobite () podatke iz pomnilnika * / chrome.storage.sync.get (['todo'], funkcijo (rezultat) var todo = [] if (rezultat && rezultat.todo && result.todo.trim ()! == ") / * Razčlenite in dobite matriko, kot je shranjena kot niz * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) za (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. Naložite razširitev

Ko ste končali s pisanjem razširitve, je čas, da ga preizkusite s funkcijo Google Chrome, ki omogoča nalaganje nepakiranih razširitev, ki niso shranjene. Ampak najprej moraš omogočite način razvijalca v brskalniku: kliknite opcije gumb > izberite “Več orodij” > Razširitve, in nato vklopite “Način razvijalca“.

Zdaj boste v vrstici za iskanje videli več gumbov. Tukaj kliknite “Nalaganje je razpakirano” gumb. Zahteval bo imenik - brskanje in izbiro imenika vaše razširitve in naloži razširitev. Če kodo razširitve uredite ali posodobite, lahko kliknete gumb za ponovno nalaganje, da naložite zadnje spremembe.

V našem primeru, videli boste ikono razširitve poleg ikone profila, ker smo v vzorec priponke dodali dejanje brskalnika. To ikono lahko kliknete dodajanje in pregledovanje opravil v našem podaljšku, kot je to določeno dejanje.

Razdeli razširitev

Čeprav je preprosto naložite razširitev v Spletni trgovini Chrome je postopek predolg, da bi zajel vse podrobnosti. Skratka, ustvarite račun razvijalca, pakirate razširitev in ga nato pošljete skupaj s podrobnostmi o vsebini (na primer ime, ikona, posnetki zaslona itd.); kot je navedeno v vodniku po korakih.

Kaj je naslednje? Branje in kodiranje

Kot ste morda pričakovali, je namen te vadnice, da začnete z razvojem razširitve za Google Chrome. Poskušal sem zajeti osnovne koncepte; vseeno, morate vedeti veliko več za resen razvoj razširitve.

To je spodaj nekaj mojih najljubši viri za učenje razvijanja razširitev za Google Chrome in druge brskalnike, ki temeljijo na Chromiumu:

1. Vse sposobnosti, komponente in značilnosti razširitev.
2. Vzorec razširitev skupine za Google Chrome.

Če ste uporabili ta sredstva in ste pripravljeni na nekaj izzivov, spodaj dodajte funkcije v razširitvi, ki ste jo pravkar končali.

1. Možnost brisanja shranjenih opravil.
2. Funkcija za prikaz obvestil, ko je dodajanje elementa končano.

To je vse, kar potrebujete za razvoj prve razširitve za najbolj priljubljen brskalnik. Kakšno razširitev ste ustvarili? Si prišel v težavo? Prosim, da mi sporočite svojo zgodbo s pisanjem komentarja ali sporočilom v @aksinghnet.

Nazadnje, vendar ne najmanj pomembno, upoštevajte, da lahko preizkusite Todoizr (razširitev, ki smo jo ustvarili) v Spletni trgovini Chrome in preverite njeno celotno kodo v tem skladišču.