de Jake Prins

Cum să creați și să publicați o extensie Chrome în 20 de minute

Cum sa creati si sa publicati o extensie Chrome in
Fotografie de Mikes Photos: https://www.pexels.com/photo/acoustic-amplifier-artist-audio-114820/

V-ați întrebat vreodată cum ar fi să creați o extensie Chrome? Ei bine, sunt aici să vă spun cât de ușor este. Urmați acești pași și ideea dvs. se va transforma în realitate și veți putea publica o extensie reală în Magazin web Chrome imediat.

Ce este o extensie Chrome?

Extensiile Chrome vă permit să adăugați funcționalitate browserului web Chrome fără a vă scufunda profund în codul nativ. Este minunat, deoarece puteți crea noi extensii pentru Chrome cu tehnologii de bază pe care dezvoltatorii web sunt foarte familiarizați – HTML, CSS și JavaScript. Dacă ați construit vreodată o pagină web, veți putea crea o extensie mai repede decât puteți lua masa. Singurul lucru pe care trebuie să-l învățați este cum să adăugați unele funcționalități la Chrome prin intermediul unor API-uri JavaScript expuse de Chrome.

Dacă nu aveți încă experiență în crearea de pagini web, vă recomand să vă scufundați mai întâi în câteva resurse gratuite pentru a afla cum să codificați, cum ar fi Routech.

Ce vrei să construiești?

Înainte de a începe, ar trebui să aveți o idee aproximativă despre ceea ce doriți să construiți. Nu trebuie să fie o idee nouă revoluționară, putem face acest lucru doar pentru distracție. În acest articol, vă voi spune despre ideea mea și despre modul în care am implementat-o ​​într-o extensie Chrome.

Planul

Am folosit Unsplash Extensie Chrome pentru o perioadă care îmi permite să am imagini de fundal frumoase Unsplash în fila mea implicită. Ulterior l-am înlocuit cu Muzli Extensie Chrome care transformă fila implicită într-un flux de știri și imagini de proiectare de pe web.

Să folosim aceste două extensii ca inspirație pentru a construi ceva nou, dar de data aceasta, pentru iubitorii de filme. Ideea mea este să arăt o imagine de fundal aleatorie a unui film de fiecare dată când deschideți o filă nouă. Pe scroll ar trebui să se transforme într-un flux frumos de filme și emisiuni TV populare. Deci sa începem.

Pasul 1: Configurarea lucrurilor

Primul pas este crearea unui fișier manifest denumit manifest.json. Acesta este un fișier de metadate în format JSON care conține proprietăți precum numele extensiei, descrierea, numărul versiunii și așa mai departe. În acest fișier îi spunem Chrome ce va face extensia și ce permisiuni necesită.

Pentru extensia de film trebuie să avem permisiunea de a controla activeTab, deci a noastră manifest.json fișierul arată cam așa:

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

După cum puteți vedea, spunem asta newtab.html va fi fișierul HTML care ar trebui redat de fiecare dată când se deschide o filă nouă. Pentru a face acest lucru, trebuie să avem permisiunea de a controla activeTab, astfel încât atunci când un utilizator încearcă să instaleze extensia, acesta va fi avertizat cu toate permisiunile de care are nevoie extensia.

Cum sa creati si sa publicati o extensie Chrome in

Un alt lucru interesant în interiorul manifest.json sunt acțiunile browserului. În acest exemplu îl folosim pentru a seta titlul, dar există mai multe opțiuni. De exemplu, pentru a afișa un popup ori de câte ori faceți clic pe pictograma aplicației din bara de adrese, tot ce trebuie să faceți este ceva de genul acesta:

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

Acum, popup.html va fi redat în fereastra pop-up creată ca răspuns la clicul unui utilizator pe acțiunea browserului. Este un fișier HTML standard, deci vă oferă o domnie gratuită asupra a ceea ce afișează fereastra pop-up. Pune doar o parte din magia ta într-un fișier numit popup.html.

Pasul 2: Testați dacă funcționează

Următorul pas este crearea fișierului newtab.html fișier și puneți un ‘Hello world‘:

<!doctype html><html>  <head>    <title>Test</title>  </head>  <body>    <h1>Hello World!</h1>  </body></html>

Pentru a testa dacă funcționează, vizitați chrome://extensions în browserul dvs. și asigurați-vă că Modul dezvoltator este bifată caseta de selectare din colțul din dreapta sus.

1611904931 164 Cum sa creati si sa publicati o extensie Chrome in
Modul dezvoltator Chrome

Clic Încărcați extensia neambalată și selectați directorul în care trăiesc fișierele dvs. de extensie. Dacă extensia este validă, aceasta va fi activă imediat, astfel încât să puteți deschide o filă nouă pentru a vedea „Hello world”.

Pasul 3: Faceți lucrurile plăcute

Acum, când am funcționat prima noastră funcție, este timpul să o facem plăcută. Putem pur și simplu stiliza noua noastră filă prin crearea unui main.css în directorul nostru de extensii și încărcați-l în newtab.html fişier. Același lucru este valabil atunci când includeți un fișier JavaScript pentru orice funcționalitate activă pe care doriți să o includeți. Presupunând că ați creat deja o pagină web, acum puteți folosi magia pentru a le arăta utilizatorilor orice doriți.

Finalizarea planului

Tot ce am avut nevoie pentru a finaliza extensia filmului a fost HTML, CSS și JavaScript, așa că nu cred că este relevant să scufundăm adânc în cod, dar aș vrea să îl parcurg rapid.

Iată ce am făcut:

Pentru ideea mea, aveam nevoie de niște imagini de fundal frumoase, așa că în fișierul JavaScript am folosit API TMDb să aducă niște filme populare, le-a luat imaginile de fundal și le-a pus într-o serie. Ori de câte ori pagina se încarcă, acum alege în mod aleatoriu o imagine din acea matrice și o setează ca fundal al paginii. Pentru a face această pagină un pic mai interesantă, am adăugat și data curentă în colțul din dreapta sus. Și pentru mai multe informații, permite utilizatorilor să facă clic pe fundal, ceea ce duce la vizitarea filmului IMDb pagină.

Am înlocuit ecranul cu un flux frumos de filme populare atunci când utilizatorul încearcă să deruleze în jos. Am folosit același API pentru a crea cărți de filme cu imagini, titlu, rating și număr de voturi. Apoi, făcând clic pe una dintre acele cărți, afișează prezentarea generală cu un buton pentru a viziona un trailer.

Rezultatul

Acum, cu acel mic manifest.json fișier și doar câteva HTML, CSS și JavaScript, fiecare filă nouă pe care o deschideți pare mult mai interesantă:

Cum sa creati si sa publicati o extensie Chrome in
Vizualizați rezultatul final aici.

Pasul 4: publicați extensia

Când prima dvs. extensie Chrome arată frumos și funcționează așa cum ar trebui, este timpul să o publicați în Magazinul Chrome. Pur și simplu urmați acest link pentru a accesa tabloul de bord al Magazinului web Chrome (vi se va cere să vă conectați la contul dvs. Google dacă nu sunteți). Apoi faceți clic pe Add new item , acceptați termenii și veți accesa pagina de unde puteți încărca extensia. Acum comprimați folderul care conține proiectul dvs. și încărcați fișierul ZIP respectiv.

1611904934 689 Cum sa creati si sa publicati o extensie Chrome in
Magazin web Chrome

După ce ați încărcat cu succes fișierul, veți vedea un formular în care ar trebui să adăugați câteva informații despre extensia dvs. Puteți adăuga o pictogramă, o descriere detaliată, puteți încărca câteva capturi de ecran și așa mai departe.

Asigurați-vă că furnizați câteva imagini frumoase pentru a vă arăta proiectul. Magazinul poate folosi aceste imagini pentru a vă promova proiectul revoluționar. Cu cât oferiți mai multe imagini, cu atât extensia dvs. va fi mai vizibilă. Puteți previzualiza aspectul extensiei dvs. în interiorul magazinului web făcând clic pe Preview changes buton. Când ești mulțumit de rezultat, lovește Publish changes și atât, gata!

Acum du-te la Magazin web Chrome și căutați extensia dvs. după titlul acesteia (s-ar putea să dureze ceva timp până să ajungă acolo sus). Dacă sunteți interesat, îl puteți găsi pe al meu aici.

Singurul lucru care rămâne de făcut este să obțineți unii utilizatori. Așadar, poate doriți să distribuiți o postare despre viața dvs. care schimbă extensia Chrome pe social media. Spune-le prietenilor tăi să verifice. Adăugați-l la ProductHunt. Și nu uitați să împărtășiți proiectul dvs. aici în comentarii. Sunt curios să văd cu ce ai venit!

Concluzie

Ca dezvoltator web, este foarte ușor să creați o extensie Chrome într-un timp scurt. Tot ce aveți nevoie este HTML, CSS, JavaScript și cunoștințe de bază despre cum să adăugați funcționalități prin intermediul unora dintre API-urile JavaScript expuse de Chrome. Configurarea dvs. inițială poate fi publicată în Magazinul web Chrome în doar 20 de minute. Construirea unei extensii noi, care merită sau care arată frumos va dura ceva mai mult timp. Dar totul depinde de tine!

Folosește-ți creativitatea pentru a veni cu ceva interesant și, dacă te blochezi vreodată, excelenta extensie Chrome documentație probabil te poate ajuta.

Deci ce mai aștepți? Este timpul să începeți să lucrați la propria extensie Chrome și să vă transformați ideea în realitate.

Nu uitați să împărtășiți proiectul în comentarii și să apăsați butonul de batere dacă acest articol v-a fost util. Dacă ai timp și vrei să fii un erou, dă-i extensia mea un rating pozitiv. Ar fi foarte apreciat!

Aveți întrebări sau feedback? Anunță-mă în comentarii!

Mulțumesc pentru lectură! Sper că informațiile au fost utile. Urmăriți-mă pe Medium pentru mai multe articole legate de tehnologie sau pe Twitter și Instagram @jakeprins_nl.