Kako stvoriti i objaviti proširenje za Chrome za 20 minuta

Jeste li se ikad zapitali kako bi bilo stvoriti proširenje za Chrome? Pa, ovdje sam da vam kažem koliko je lako. Slijedite ove korake i vaša će se ideja pretvoriti u stvarnost te ćete začas moći objaviti stvarno proširenje u Chrome web trgovini.

Što je proširenje za Chrome?

Proširenja za Chrome omogućuju vam dodavanje funkcionalnosti web pregledniku Chrome bez dubokog uranjanja u izvorni kôd. To je sjajno jer možete stvoriti nova proširenja za Chrome s osnovnim tehnologijama koje web programeri dobro poznaju - HTML, CSS i JavaScript. Ako ste ikad izgradili web stranicu, moći ćete stvoriti proširenje brže nego što možete ručati. Jedino što morate naučiti je kako Chromeu dodati neke funkcije putem nekih JavaScript API-ja koje Chrome izlaže.

Ako još nemate iskustva u izradi web stranica, preporučujem da prvo zaronite u neke besplatne resurse kako biste naučili kodirati, poput freeCodeCamp.

Što želite sagraditi?

Prije nego što započnete, trebali biste imati okvirnu ideju o tome što želite izgraditi. To ne treba biti neka nova revolucionarna ideja, to možemo učiniti samo iz zabave. U ovom ću vam članku govoriti o svojoj ideji i kako sam je implementirao u proširenje za Chrome.

Plan

Neko sam vrijeme koristio proširenje Unsplash Chrome koje mi omogućuje da na zadanoj kartici imam lijepe pozadinske slike Unsplasha. Kasnije sam ga zamijenio proširenjem Muzli Chrome koje pretvara zadanu karticu u feed vijesti o dizajnu i fotografijama s weba.

Upotrijebimo ova dva proširenja kao inspiraciju za izgradnju nečeg novog, ali ovaj put za ljubitelje filmova. Moja je ideja prikazati slučajnu pozadinsku sliku filma svaki put kada otvorite novu karticu. Na pomicanju to bi se trebalo pretvoriti u lijep feed popularnih filmova i TV emisija. Pa krenimo.

Korak 1: Postavljanje stvari

Prvi korak je stvaranje datoteke manifesta s imenom manifest.json. Ovo je datoteka s metapodacima u JSON formatu koja sadrži svojstva poput naziva vašeg proširenja, opisa, broja verzije i tako dalje. U ovoj datoteci kažemo Chromeu što će ekstenzija raditi i koja dopuštenja zahtijeva.

Za produženje filma trebamo imati dozvolu za kontrolu activeTab , tako da naša manifest.jsondatoteka izgleda otprilike ovako:

{ “manifest_version”: 2, “name”: “RaterFox”, “description”: “The most popular movies and TV shows in your default tab. Includes ratings, summaries and the ability to watch trailers.”, “version”: “1”, “author”: “Jake Prins”,
"browser_action": { "default_icon": "tab-icon.png", “default_title”: “Have a good day” },
“chrome_url_overrides” : { “newtab”: “newtab.html”},
 “permissions”: [“activeTab”]}

Kao što vidite, kažemo da newtab.htmlće to biti HTML datoteka koja bi se trebala prikazati svaki put kada se otvori nova kartica. Da bismo to učinili, trebamo imati dozvolu za kontrolu aktivne kartice , pa će korisnik, kada pokuša instalirati proširenje, biti upozoren sa svim dozvolama koje proširenje treba.

Još jedna zanimljiva stvar manifest.jsonsu radnje preglednika. U ovom primjeru koristimo ga za postavljanje naslova, ali postoji više mogućnosti. Na primjer, za prikaz skočnog prozora kad god kliknete ikonu aplikacije unutar adresne trake, sve što morate učiniti je nešto poput ovog:

“browser_action”: { “default_popup”: “popup.html”, },

Sada popup.htmlće se prikazati u skočnom prozoru koji je stvoren kao odgovor na korisnikov klik na akciju preglednika. To je standardna HTML datoteka, tako da vam daje mogućnost vladavine onim što se prikazuje. Samo stavite malo svoje čarolije u datoteku s imenom popup.html.

Korak 2: Testirajte radi li

Sljedeći je korak stvoriti newtab.htmldatoteku i staviti " Hello world":

  Test   

Hello World!

Da biste testirali radi li, posjetite chrome://extensionssvoj preglednik i provjerite je li potvrđen potvrdni okvir Developer mode u gornjem desnom kutu.

Kliknite Učitaj raspakirano proširenje i odaberite direktorij u kojem žive vaše datoteke proširenja. Ako je proširenje valjano, odmah će biti aktivno, tako da možete otvoriti novu karticu da biste vidjeli svoj 'Hello world'.

Korak 3: Učiniti stvari lijepima

Sad kad imamo prvu značajku koja radi, vrijeme je da to učinimo lijepim. Našu novu karticu možemo jednostavno oblikovati stvaranjem main.cssdatoteke u našem direktoriju ekstenzije i učitavanjem u našu newtab.htmldatoteku. Isto vrijedi i za uključivanje JavaScript datoteke za bilo koju aktivnu funkcionalnost koju biste željeli uključiti. Pod pretpostavkom da ste ranije stvorili web stranicu, sada možete koristiti svoju čaroliju kako biste korisnicima pokazali sve što želite.

Završavam plan

Sve što mi je dalje trebalo da dovršim produženje filma bili su HTML, CSS i JavaScript, pa mislim da nije relevantno zaranjati duboko u kôd, ali volio bih to brzo proći.

Evo što sam učinio:

Za moju ideju trebale su mi neke lijepe pozadinske slike, pa sam u JavaScript datoteci koristio TMDb API za dohvaćanje nekih popularnih filmova, uzeo njihove pozadinske slike i stavio ih u niz. Kad god se stranica učita, ona nasumce odabere jednu sliku iz tog niza i postavi je kao pozadinu stranice. Da ovu stranicu učinim malo zanimljivijom, dodao sam i trenutni datum u gornjem desnom kutu. A za više informacija omogućuje korisnicima da kliknu pozadinu koja vodi do posjeta IMDb stranici filma.

Zaslon sam zamijenio lijepim feedom popularnih filmova kad se korisnik pokuša pomaknuti prema dolje. Isti API koristio sam za izradu kartica filmova sa slikom, naslovom, ocjenom i brojanjem glasova. Zatim, klikom na jednu od tih kartica, prikazat će se pregled s gumbom za gledanje najave.

Rezultat

Sad s tom malom manifest.jsondatotekom i samo nekim HTML-om, CSS-om i JavaScriptom, svaka nova kartica koju otvorite izgleda puno zanimljivije:

Korak 4: objavite svoje proširenje

Kada vaše prvo proširenje za Chrome izgleda lijepo i bude funkcioniralo kako treba, vrijeme je da ga objavite u trgovini Chrome. Jednostavno slijedite ovu vezu da biste otišli na nadzornu ploču Chrome web trgovine (morat ćete se prijaviti na svoj Google račun ako niste). Zatim kliknite Add new itemgumb, prihvatite uvjete i otići ćete na stranicu na koju možete učitati svoje proširenje. Sada stisnite mapu koja sadrži vaš projekt i prenesite tu ZIP datoteku.

Nakon uspješnog prijenosa datoteke, vidjet ćete obrazac u koji biste trebali dodati neke podatke o svom proširenju. Možete dodati ikonu, detaljan opis, prenijeti neke snimke zaslona itd.

Obavezno navedite lijepe slike kako biste pokazali svoj projekt. Trgovina može koristiti ove slike za promociju vašeg revolucionarnog projekta. Što više slika pružite, to će istaknuto biti istaknuto. Klikom na Preview changesgumb možete pregledati kako vaše proširenje izgleda unutar web trgovine . Kad ste zadovoljni rezultatom, pogodite i to je to, gotovo!Publish changes

Sada idite u Chrome web trgovinu i potražite svoje proširenje prema njegovom naslovu (Može proći neko vrijeme dok ne bude gore). Ako ste zainteresirani, moju možete pronaći ovdje.

Preostalo je samo privući neke korisnike. Stoga biste možda htjeli na društvenim mrežama podijeliti post o proširenju vašeg Chromeovog životnog vijeka. Recite prijateljima da to provjere. Dodajte ga na ProductHunt. I ne zaboravite podijeliti svoj projekt ovdje u komentarima. Radoznao sam vidjeti što ste smislili!

Zaključak

Kao web programer, vrlo je lako stvoriti proširenje za Chrome u kratkom vremenu. Sve što vam treba je malo HTML-a, CSS-a, JavaScript-a i osnovno znanje o tome kako dodati funkcionalnost putem nekih JavaScript API-ja koje Chrome izlaže. Vaše početno postavljanje može se objaviti u Chrome web trgovini u roku od samo 20 minuta. Izgradnja produžetka koji je nov, isplati se ili izgleda lijepo potrajat će još neko vrijeme. Ali sve ovisi o vama!

Use your creativity to come up with something interesting and if you ever get stuck, the excellent Chrome extension documentation can probably help you out.

So what are you waiting for? It’s time to start working on your own Chrome extension and turning your idea into reality.

Don’t forget to share your project in the comments and hit the clap button if this article was any useful to you. If you got some time and want to be a hero, give my extension a positive rating. That would be highly appreciated!

Got questions or feedback? Let me know in the comments!

Thanks for reading! Hope the information was helpfull. Follow me on Medium for more tech related articles or on Twitter and Instagram @jakeprins_nl.