Chrome'i laienduse loomine ja avaldamine 20 minutiga

Kas olete mõelnud, kuidas oleks Chrome'i laienduse loomine? Noh, ma olen siin, et teile öelda, kui lihtne see on. Järgige neid samme ja teie idee saab reaalsuseks ning saate mõne aja pärast Chrome'i veebipoes reaalse laienduse avaldada.

Mis on Chrome'i laiendus?

Chrome'i laiendused võimaldavad teil Chrome'i veebibrauserisse funktsionaalsust lisada, ilma et sukelduge põhjalikult natiivkoodi. See on suurepärane, sest saate Chrome'i jaoks luua uusi laiendusi põhitehnoloogiatega, mis on veebiarendajatele hästi tuttavad - HTML, CSS ja JavaScript. Kui olete kunagi veebilehe ehitanud, saate laienduse luua kiiremini kui lõunat süüa. Ainus asi, mida peate õppima, on see, kuidas Chrome'i mõne funktsionaalsuse lisamiseks mõne JavaScripti API kaudu, mille Chrome paljastab.

Kui te pole veel veebilehtede koostamisel kogenud, soovitan teil kõigepealt sukelduda mõnda tasuta ressurssi, et õppida koodimist, näiteks freeCodeCamp.

Mida soovite ehitada?

Enne alustamist peaksite olema umbes ülevaade sellest, mida soovite ehitada. See ei pea olema mingi uus murranguline idee, me saame seda lihtsalt oma lõbuks teha. Selles artiklis räägin teile oma ideest ja selle rakendamisest Chrome'i laienduses.

Plaan

Olen mõnda aega kasutanud Chrome'i laiendust Unsplash, mis võimaldab mul vaikekaardil kuvada kena taustapilte Unsplashist. Hiljem asendasin selle laiendusega Muzli Chrome, mis muudab vaikekaardi disainiuudiste ja kaadrite vooguks kogu veebist.

Kasutagem neid kahte laiendust inspiratsioonina uue ehitamiseks, kuid seekord filmisõpradele. Minu idee on näidata filmi juhuslikku taustpilti iga kord, kui avate uue vahelehe. Kerimisel peaks see muutuma populaarsete filmide ja telesaadete kenaks vooguks. Nii et alustame.

1. samm: asjade seadistamine

Esimene samm on nimega manifestifaili loomine manifest.json. See on JSON-vormingus metaandmete fail, mis sisaldab selliseid omadusi nagu laienduse nimi, kirjeldus, versiooninumber ja nii edasi. Selles failis räägime Chrome'ile, mida laiendus tegema hakkab ja milliseid õigusi see nõuab.

Filmilaiendi jaoks peab meil olema luba ActiveTabi juhtimiseks , nii et meie manifest.jsonfail näeb välja umbes selline:

{ “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”]}

Nagu näete, ütleme, et newtab.htmlsee on HTML-fail, mis tuleks renderdada iga kord, kui uus vaheleht avatakse. Selleks peab meil olema aktiivse vahelehe juhtimiseks luba , nii et kui kasutaja proovib laiendust installida, hoiatatakse teda kõigi laiendusele vajalike õigustega.

Veel üks huvitav asi manifest.jsonon brauseri toimingud. Selles näites kasutame seda pealkirja määramiseks, kuid on ka rohkem võimalusi. Näiteks hüpikakna kuvamiseks, kui klõpsate aadressiribal rakenduse ikoonil, peate tegema midagi järgmist:

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

Nüüd popup.htmlrenderdatakse see hüpikaknas, mis on loodud vastusena kasutaja klõpsamisele brauseritoimingul. See on tavaline HTML-fail, nii et see annab teile vaba võimaluse valitseda hüpikakna kuvamise üle. Pange lihtsalt osa oma võlust faili nimega popup.html.

2. samm: kontrollige, kas see töötab

Järgmine samm on newtab.htmlfaili loomine ja selle sisestamine Hello world:

  Test   

Hello World!

Kas see töötab, külastage chrome://extensionsoma brauserit ja veenduge, et paremas ülanurgas olev ruut Arendaja režiim oleks märgitud.

Klõpsake käsul Laadi pakkimata laiendus ja valige kataloog, kus teie laiendusfailid asuvad. Kui laiendus on kehtiv, on see kohe aktiivne, et saaksite avada uue vahelehe, et näha oma tere maailma.

3. samm: asjade toredaks muutmine

Nüüd, kui saime oma esimese funktsiooni tööle, on aeg see kenaks muuta. Saame lihtsalt oma uue vahekaardi kujundada, luues main.csslaienduste kataloogi faili ja laadides selle oma newtab.htmlfaili. Sama kehtib ka JavaScripti faili lisamise kohta kõigi aktiivsete funktsioonide jaoks, mille soovite lisada. Eeldades, et olete varem veebilehe loonud, saate nüüd oma võlu abil näidata kasutajatele kõike, mida soovite.

Plaani lõpetamine

Filmi laienduse lõpuleviimiseks vajasin veel vaid HTML-i, CSS-i ja JavaScripti, nii et minu arvates pole asjakohane sügavale koodi sukelduda, kuid tahaksin selle kiiresti läbi teha.

Ma tegin järgmist:

Minu idee jaoks vajasin toredaid taustapilte, nii et JavaScripti failis kasutasin TMDb API-d mõne populaarse filmi toomiseks, tegin nende taustpildid ja panin massiivi. Alati, kui leht seda laadib, valib ta juhuslikult selle massiivi seast ühe pildi ja määrab selle lehe taustaks. Selle lehe veidi huvitavamaks muutmiseks lisasin paremasse ülanurka ka praeguse kuupäeva. Ja lisateabe saamiseks võimaldab see kasutajatel klõpsata taustal, mis viib filmi IMDb lehe külastamiseni.

Kui kasutaja proovib alla kerida, asendasin ekraani populaarsete filmide kena kanaliga. Kasutasin sama API-d filmi kaartide loomiseks, millel oli pilt, pealkiri, hinnang ja häälte arv. Seejärel kuvatakse ühel neist kaartidest klõpsates haagise vaatamiseks nupuga ülevaade.

Tulemus

Nüüd on selle väikese manifest.jsonfaili ning lihtsalt HTML, CSS ja JavaScripti abil iga uus avatud vaheleht palju huvitavam:

4. samm: avaldage laiendus

Kui teie esimene Chrome'i laiendus näeb kena välja ja töötab nagu peaks, on aeg see Chrome'i poodi avaldada. Järgige lihtsalt seda linki, et minna oma Chrome'i veebipoe juhtpaneelile (kui te pole seda palutud, palutakse teil oma Google'i kontole sisse logida). Seejärel klõpsake Add new itemnuppu, nõustuge tingimustega ja lähete lehele, kuhu saate oma laienduse üles laadida. Nüüd tihendage kaust, mis sisaldab teie projekti, ja laadige see ZIP-fail üles.

Pärast faili edukat üleslaadimist näete vormi, kuhu peaksite lisama oma laienduse kohta teavet. Võite lisada ikooni, üksikasjaliku kirjelduse, üles laadida mõne ekraanipildi ja nii edasi.

Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the Preview changes button. When you’re happy with the result, hit Publish changesand that’s it, your done!

Now go to the Chrome Web Store and search for your extension by its title (It might take some time before it’s up there). If you’re interested, you can find mine here.

The only thing left to do is get some users. So you might want to share a post about your life changing Chrome extension on social media. Tell your friends to check it out. Add it to ProductHunt. And don’t forget to share your project here in the comments. I’m curious to see what you came up with!

Conclusion

As a web developer, it’s very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript and a basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within just 20 minutes. Building an extension that’s new, worthwhile or looks nice will take some more time. But it’s all up to you!

Kasutage oma loovust, et leida midagi huvitavat ja kui te kunagi ummikusse jääte, võib suurepärane Chrome'i laienduse dokumentatsioon teid tõenäoliselt aidata.

Mida sa siis ootad? On aeg asuda oma Chrome'i laienduse kallal töötama ja oma idee teoks tegema.

Ärge unustage oma projekti kommentaarides jagada ja vajutage plaksutamisnuppu, kui see artikkel teile kasulik oli. Kui teil on aega ja soovite kangelane olla, andke minu laiendusele positiivne hinnang. See oleks väga hinnatud!

Kas teil on küsimusi või tagasisidet? Andke mulle kommentaarides teada!

Täname lugemast! Loodan, et teave oli kasulik. Järgige mind keskkonnas, et leida rohkem tehnikaga seotud artikleid, või Twitteris ja Instagramis @jakeprins_nl.