U ovom ću vas članku podučavati kako sami napraviti Chrome Proširenje. Temeljim na lekcijama naučenim tijekom stvaranja TalkToMe, proširenja za Chrome koje pomaže slabovidima čitajući sadržaj web mjesta i krećući se na druge web stranice.
Objasnit ću osnove postavljanja vašeg proširenja, uključujući:
- Konfiguriranje datoteka za postavljanje
- Priprema za stavljanje u Chrome trgovinu
Konfiguriranje datoteka za postavljanje
Prvo idite na chrome: // extensions u svom pregledniku ili jednostavno kliknite "Više alata" i "Proširenja" na izborniku Chrome. To bi vas trebalo dovesti do stranice Upravljanje proširenjima, gdje možete uključiti način za programere (trebao bi biti u gornjem desnom kutu).
Zatim ćete morati napraviti manifest.jsondatoteku u novom direktoriju za svoje proširenje. Ova datoteka pruža važne informacije za vaše proširenje kako bi funkcionirale, poput dopuštenja i datoteka skripti na koje ćete povezati svoj projekt. Evo kako bi trebao izgledati sadržaj vašeg manifesta:
{ "name": "Chrome Extension Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2}Da biste svoj direktorij prenijeli na stranicu Upravljanje proširenjima, kliknite gumb "Učitaj nepakirano" i odaberite svoj direktorij. Ovo će povezati vaše datoteke s internetskim korisničkim sučeljem.
Još jedna važna datoteka koju ćete morati konfigurirati je background.js, a to je pozadinska skripta vašeg projekta.
Uzorak pozadinske skripte ima ovu vrstu strukture:
chrome.runtime.onInstalled.addListener(function() { // add an action here});Uvijek će se izvoditi dok je vaše proširenje uključeno i korisno je za preslušavanje različitih događaja, poput pritiska na tipkovnici, ili za navigaciju na različite stranice.
Možete čak imati i više pozadinskih skripti. Samo ih sve morate prvo registrirati u datoteci manifesta. Da biste to učinili, jednostavno strukturirajte manifest.jsovako, kako izgleda datoteka manifesta našeg proširenja:
{ "name": "Chrome Extension Example", ... "background": { "scripts": [ "js/es6-promise.auto.min.js", "js/defaults.js", "js/speech.js", "js/document.js", "js/events.js", "js/stt.js", "js/listen.js" ], "persistent": false }}Sad će vam trebati datoteka ne samo za funkciju vašeg proširenja, već i za korisničko sučelje. Da biste to učinili, napravite datoteku koja se zove popup.html. Skočni prozor je mali prozor koji se pojavljuje nakon što se klikne na ikonu vašeg proširenja. Na primjer, evo skočnog prozora za proširenje Cookie Manager Firefox.
popup.htmlDatoteka može biti vrlo jednostavna. Ispod je neki kod za stvaranje skočnog prozora jednim gumbom. Jednostavno je kao dodati oznake gumba za otvaranje i zatvaranje u tijelo dokumenta i nekoliko pravila stila.
button { height: 30px; width: 30px; outline: none; } ; Naravno, popup.htmlkôd našeg proširenja ima mnogo više komponenata od ove. Slobodno dodajte više gumba, tablica stilova i bilo čega drugog što smatrate prikladnim za vašu ideju proširenja.
Vrijeme je za konfiguriranje skočnog koda i ikone. Međutim, za ikonu ćete morati dodati kôd na dva mjesta, "default_icon" i "icons". Svojstvo "default_icon" koristi se za ikone na alatnoj traci, a "icons" se koristi za slike prikazane na stranici Extension Management.
Vratite se manifest.jsoni dodajte sljedeće redove koda, zamjenjujući putove slika prema zadanoj ikoni vlastitim slikama. Također možete staviti iste slike i za "default_icon" i za "ikone". I, ne trebate stavljati slike istih dimenzija kao one navedene u nastavku. Na primjer, ako imate samo slike veličine 16 x 16 i 48 x 48, slobodno izbrišite ostala dva retka koja određuju 32 i 128 piksela.
{ "name": "Chrome Extension Example", ... "page_action": { "default_popup": "popup.html", "default_icon": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" } }, "icons": { "16": "images/img16.png", "32": "images/img32.png", "48": "images/img48.png", "128": "images/img128.png" }}Ovo su datoteke koje su ključne za izgradnju kromiranog proširenja:
- datoteka manifesta,
- pozadinske skripte i
- skočna datoteka
Neke druge datoteke koje biste možda željeli konfigurirati su:
options.htmlioptions.js
options.jspružit će vašim korisnicima širu paletu mogućnosti kada je u pitanju korištenje vašeg proširenja. Pobrinut će se za izgled stranice s opcijama (vrlo je slična popup.html), dok options.jsće se nositi s funkcionalnošću.
Te su datoteke neobavezne, ali ako ih odlučite dodati, ne zaboravite konfigurirati options.htmlu manifestu i povezati options.jsdatoteku dodavanjem <; / script> neposredno prije završne HTML oznake.
{ "name": "Chrome Extension Example", ... "options_page": "options.html"}Da biste vidjeli svoje proširenje na djelu, spremite sve datoteke i kliknite "Ponovno učitaj" dok ste na stranici Upravljanje proširenjima. Na alatnoj traci trebali biste vidjeti svoju ikonu. Da biste pogledali stranicu s opcijama, također možete kliknuti "Pojedinosti" ispod vašeg proširenja i pomaknuti se dolje gdje piše "Opcije proširenja".
Objavljivanje vašeg projekta u web trgovini
Dakle, razvili ste i testirali svoje proširenje. Sada ga trebate distribuirati!
Da biste započeli s prijenosom projekta, prvo ga pretvorite u .zip datoteku. Datoteka bi trebala sadržavati manifest.jsondatoteku. Zatim provjerite imate li račun razvojnog programera tako da posjetite nadzornu ploču za programere Chrome Webstore.
Kliknite gumb "Dodaj novu stavku" i trebao bi vam omogućiti da tamo prenesete svoju .zipdatoteku. Ako ne želite registrirati plaćanja za svoju aplikaciju, možete preskočiti korak postavljanja sustava plaćanja. Kad stavite svoj projekt u web trgovinu, morat ćete platiti jednokratnu naknadu za programera u iznosu od 5 USD.
Također, ne zaboravite uključiti detaljan opis i slike vašeg proširenja kako bi potencijalni korisnici točno znali što vaš projekt radi!
Once all of this is complete, you’ll receive an app ID and an OAuth token. The app ID is used for making requests to Google APIs, while the OAuth token is used for making Web Store payments.
Congratulations, you have now published your extension! ?
If you enjoyed this post, check out this next article. We’ll be diving deeper into how to configure audio features in your Chrome extension, just like we did for TalkToMe.