Kako izrađivati ​​proširenja za Chrome iz početka

Ako to želiš dodati ili izmijeniti neke funkcije u Google Chromeu morate koristiti proširenje. Iako možete preuzeti proširenje iz Chrome web-trgovine, ponekad vam je potrebna određena funkcionalnost koju ne možete pronaći u postojećim proširenjima.

No, dobra vijest je da možete izraditi vlastito proširenje da biste dodali ili izmijenili potrebnu funkcionalnost ili izradili novi dodatak ili aplikaciju za Google Chrome, što možete kasnije distribuirati drugim korisnicima pomoću Chrome web-trgovine.

U nastavku ću vam pokazati najlakši način za stvaranje proširenja. Ako imate neko znanje web razvoja (HTML, CSS i JS), osjećat ćete se kao kod kuće. Ako ne, najprije ih gledajte naučiti osnove web razvoja, zatim nastavite ispod.

Preduvjeti

Prije početka ovog vodiča morate ispuniti sljedeće uvjete.

1. Moraš biti upoznat HTML, CSS i JavaScript. [Provjerite resurse]
2. Morate imati uređivač koda da biste napisali nastavak. [Usporedi urednike]
3. (Izborno) Ako želite distribuirati proširenje drugim korisnicima, morate imati račun razvojnog programera u Chrome web-trgovini. [Kreiraj račun]

Bilješka: Google traži od vas da platite malu naknadu za stvaranje računa razvojnog programera u Chrome web-trgovini.

Stvorite proširenje

U ovom tutorialu, podijelit ću proces stvaranja proširenje zadataka za Google Chrome. To će biti korisnost (kao što je prikazano u nastavku) da pokaže bitne komponente i sposobnosti koje se pružaju proširenjima.

1. Nabavite predložak

Google Chrome, kao i svaka druga platforma, zahtijeva svoje proširenja imaju postavljenu strukturu, što može izgledati složeno za početnike. Zato je dobro dobiti predložak za proširenje koji će pružiti sve potrebe.

Extensionizr je najbolji predloženi generator za kromirana proširenja. Omogućuje vam da odaberete jednu od navedenih vrsta proširenja - radnje preglednika (radnja za sve stranice ili preglednik), radnje stranice (radnja za trenutnu stranicu) ili skriveno proširenje (pozadinska radnja koja je obično skrivena u prednjem sučelju).

Štoviše, on nudi razne opcije finog podešavanja uključi / isključi potrebne dodatke, dozvole, itd. Morate odabrati “Akcija preglednika” kao vrstu proširenja i “Nema pozadine” kao pozadinsku stranicu za ovaj vodič.

Kada završite s izborom opcija za izradu uzorka proširenja, pritisnite tipku “Preuzmite ga!” u Extr. Konačno, izdvojite arhivu (.zip) u direktorij i otvorite uređivač koda da biste započeli pisanje proširenja.

2. Kodirajte proširenje

Nakon što preuzmete i ekstrahirate predložak, vidjet ćete strukturu direktorija kao što je prikazano na slici ispod. Predložak je uredno organiziran i morate znati da je najvažnija datoteka “manifest.json“.

Upoznajte se s drugim datotekama i mapama u ovom direktoriju:

1. _locales: Naviknut je pohraniti informacije o jeziku za višejezičnu aplikaciju.
2. cSS: Funkcionira za pohranu prednjih knjižnica trećih strana kao što je Bootstrap 4.
3. ikone: Dizajniran je tako da ima ikone za vaše proširenje u različitim veličinama.
4. JS: To je zgodno za spremanje knjižnice drugih proizvođača kao jQuery 3.
5. src: Ona pohranjuje stvarni kôd koji ćete napisati za svoje proširenje.

manifest.json

Sadrži osnovne metapodatke o vašoj aplikaciji, koja definira pojedinosti aplikacije za preglednik. Možete ga urediti kako biste postavili ime, opis, web-lokaciju, ikonu itd. Proširenja, kao i pojedinosti poput radnje i dozvole preglednika.

Na primjer, u donjem kodu primijetit ćete da sam promijenio ime, opis i početnu stranicu_url zajedno s default_title u browser_action. Štoviše, ja dodano “skladištenje” pod dozvolama kao što trebamo pohranjivati ​​podatke u proširenju.

 "name": "Todoizr - Pojednostavljeni zadatak", "verzija": "0.0.1", "manifest_version": 2, "opis": "Jednostavna aplikacija za svakoga.", "homepage_url": " https://go.aksingh.net/todoizr "," ikone ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Pojednostavljeni zadatak "," default_popup ":" src / browser_action / browser_action.html "," dozvole ": [" storage "] 

src \ browser_action

Ovaj direktorij sadrži kod za radnje preglednika. U našem slučaju, mi ćemo kodirajte skočni prozor prikazuje se klikom na ikonu proširenja u pregledniku. Naše proširenje omogućit će korisnicima dodavanje i prikaz stavki obveza u skočnom prozoru.

Bilješka: Uvijek možete započeti s kôdom tako da klonirate ovo spremište.

Inicijalni kôd iz predloška

Iako je ovaj direktorij imao samo HTML datoteku koja ima sav kôd, odlučio sam ga podijeliti u tri odvojene datoteke radi bolje jasnoće. To je rekao, HTML datoteku pod nazivom “browser_action.html” sada ima sljedeći kôd:

Štoviše, ime datoteke stila “browser_action.css” ima sljedeći sadržaj dok je JavaScript datoteka imenovana “browser_action.js” za sada je prazno.

 #mainPopup padding: 10px; visina: 200px; širina: 400px; obitelj fontova: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Dizajnirajte sučelje popup-a

Nakon postavljanja početnog projekta, najprije osmislimo sučelje skočnog prozora. imam postaviti sučelje s minimalističkim pristupom, prikazuje ime na vrhu, a zatim obrazac za dodavanje stavki zadataka i donje područje za pregled dodanih stavki. Inspiriran je jednostavnim dizajnom “Stil obrasca 5“.

U donjem kodu dodao sam dva dijela - jedan za prikazivanje obrasca za dodavanje stavke obveza, a drugi za prikaz popisa već dodanih stavki obveza. To je rekao, novi kod za “browser_action.html” je kako slijedi:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

I datoteku stila “browser_action.css” sada ima sljedeći kôd:

 @import url ("./form_style_5.css"); #mainPopup height: 200px; širina: 300px; obitelj fontova: Helvetica, Ubuntu, Arial, sans-serif;  / * Oblik zadatka * / .form-style-5 margin: auto; obloga: 0px 20px;  .form-style-5: prvo dijete pozadina: nema;  .form-style-5 h1 boja: # 308ce3; veličina fonta: 20px; poravnavanje teksta: centar;  .form-style-5 input [type = "text"] width: auto; plutajući: lijevo; margin-bottom: unset;  .form-style-5 input [type = "button"] pozadina: # 308ce3; width: auto; float: desno; obloga: 7px; granica: nema; granični radijus: 4px; veličina fonta: 14px;  .form-style-5 input [type = "button"]: hover pozadina: # 3868d5;  / * Popis zadataka * / .form-style-5: posljednje dijete height: inherit; margin-bottom: 5px;  .form-style-5 ul punjenje: 20px;  .form-style-5 ul li veličina fonta: 14px;  

Konačno, datoteka stila treće strane “form_style_5.css” ima sljedeći sadržaj. Jednostavno je preuzeta sa svoje web-stranice kako bi potaknula dizajn našeg proširenja.

 / * Stil 5 od Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; obloga: 10px 20px; pozadina: # f4f7f8; margina: 10px auto; padding: 20px; pozadina: # f4f7f8; granični polumjer: 8px; obitelj fonta: Georgia, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; margin-bottom: 10px;  .form-style-5 naljepnica display: block; margin-bottom: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], .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 [tip = "vrijeme"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 select font-family: Georgia, "Times New Roman", Times , serif; pozadina: rgba (255, 255, 255, .1); granica: nema; granični radijus: 4px; veličina fonta: 16px; margina: 0; obris: 0; obloga: 7px; širina: 100%; dimenzioniranje kutije: granični okvir; -webkit-box-sizing: granični okvir; -moz-box-sizing: granični okvir; boja pozadine: # e8eeef; color: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) umetak; kutija-sjena: 0 1px 0 rgba (0,0,0,0.03) umetak; margin-bottom: 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 = "number"]: fokus, .form-style-5 input [type = "search"] : focus, .form-style-5 input [type = "time"]: fokus, .form-style-5 input [type = "url"]: fokus, .form-style-5 textarea: fokus, .form style-5 select: focus pozadina: # d2d9dd;  .form-style-5 select -webkit-izgled: menulist-button; visina: 35px;  .form-style-5. broj pozadina: # 1abc9c; boja: #fff; visina: 30px; širina: 30px; prikaz: inline-blok; veličina fonta: 0.8em; margin-right: 4px; visina linije: 30px; poravnavanje teksta: centar; tekst-sjena: 0 1px 0 rgba (255,255,255,0.2); granični polumjer: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "button"] position: relative; prikaz: blok; obloga: 19px 39px 18px 39px; boja: #FFF; margin: 0 auto; pozadina: # 1abc9c; veličina fonta: 18px; poravnavanje teksta: centar; font-style: normal; širina: 100%; granica: 1px solid # 16a085; granica-širina: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover pozadina: # 109177;  

Napišite logiku popup-a

Kada završimo s front-end ekstenzijom, sada ćemo napisati logiku za njezin rad. Trebamo naše proširenje da bismo mogli dodajte stavke obveza i također ih prikažite u skočnom prozoru. Tako ćemo dodati slušatelja s klikom na gumb za dodavanje unesenog teksta kao zadatka i slušatelja učitavanja stranica da bi se prikazale te stavke.

U donjem kodu koristit ćemo dvije funkcije - sync.get () i sync.set (), koji su dio “chrome.storage“. Drugi nam je potreban da bismo spremili stavke obveza u pohrani i prvo ih preuzeli i prikazali.

U nastavku se nalazi konačni kod “browser_action.js” datoteka. Kao što možete vidjeti u nastavku, kôd je visoko komentiran kako bi vam pomogao razumjeti njegovu svrhu.

 function loadItems () / * Prvo preuzmite () podatke iz memorije * / chrome.storage.sync.get (['todo'], funkciju (rezultat) var todo = [] if (result && result.todo && result.todo.trim ()! == ") / * Analizirajte i dohvatite niz kako je spremljen kao 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. Umetnite nastavak

Nakon što ste završili s pisanjem proširenja, vrijeme je da ga testirate pomoću značajke Google Chromea koja nudi učitavanje neisporučenih proširenja. Ali prvo, morate omogućite način rada za razvojne programere u pregledniku: kliknite opcije dugme > izabrati “Više alata” > Proširenja, i zatim uključite “Način za razvojne programere“.

Sada ćete vidjeti više gumba ispod trake za pretraživanje. Ovdje kliknite “Učitavanje se raspakiralo” dugme. Tražit će direktorij - pregledavati i odabrati direktorij vašeg proširenja i učitat će proširenje. Ako uredite ili ažurirate kôd vašeg proširenja, možete kliknuti gumb za ponovno učitavanje za učitavanje najnovijih promjena.

U našem primjeru, vidjet ćete ikonu proširenja pored ikone profila jer smo u uzorak proširenja dodali radnju preglednika. Možete kliknuti tu ikonu na dodavanje i pregled stavki obveza u našem proširenju kao što je to navedena radnja.

Distribuirajte nastavak

Iako jest jednostavno učitavanje proširenja u Chrome web-trgovini proces je predug da bi pokrio sve pojedinosti. Ukratko, kreirate račun razvojnog programera, pakirate svoje proširenje, a zatim ga pošaljete zajedno s detaljima o sadržaju (kao što su ime, ikona, snimke zaslona itd.); kao što je navedeno u vodiču korak-po-korak.

Što dalje? Čitanje i kodiranje

Kao što ste očekivali, svrha ovog vodiča je da započnete s izradom proširenja za Google Chrome. Pokušao sam pokriti osnovne pojmove; međutim, morate znati puno više za ozbiljno proširenje.

To je rekao, ispod su neke od mojih omiljenih go-to resursa za učenje kako razviti proširenja za Google Chrome i druge preglednike na temelju Chromiuma:

1. Sve sposobnosti, komponente i značajke proširenja.
2. Primjeri proširenja tima za Google Chrome.

Ako ste prošli te resurse i spremni ste na neki izazov, pokušajte dodati niže navedene značajke u proširenju koje ste upravo završili:

1. Opcija za brisanje spremljenih stavki obveza.
2. Značajka za prikaz obavijesti nakon dovršetka dodavanja stavke.

To je sve o razvoju prvog proširenja za najpopularniji preglednik. Koje ste proširenje izradili? Jeste li ušli u problem? Molim vas da mi javite svoju priču tako što ćete napisati komentar ispod ili mi poslati poruku na @aksinghnet.

I na kraju, ali ne i najmanje važno, imajte na umu da možete isprobati Todoizr (proširenje koje smo izradili) u Chrome web-trgovini i provjeriti njegov potpuni kôd u ovom spremištu.