Cum de a crea Extensii Chrome de la zero

Dacă doriți adăugați sau modificați anumite funcționalități în Google Chrome, trebuie să utilizați o extensie. Deși puteți descărca o extensie din Magazinul web Chrome, dar uneori aveți nevoie de o funcție specifică pe care nu o puteți găsi în nicio extensie existentă.

Vestea bună este că puteți să creați o extensie proprie pentru a adăuga sau a modifica funcționalitatea necesară sau pentru a crea un nou add-on sau o aplicație pentru Google Chrome, pe care o puteți face ulterior distribuie altor utilizatori utilizând Magazinul web Chrome.

În cele ce urmează, vă voi arăta cel mai simplu mod de a crea o extensie. Dacă aveți cunoștințe despre dezvoltarea web (HTML, CSS și JS), vă veți simți ca acasă. Dacă nu, priviți mai întâi aceste canale aflați elementele de bază ale dezvoltării web, apoi continuați mai jos.

Cerințe preliminare

Trebuie să aveți la îndeplinire următoarele cerințe înainte de a începe acest tutorial.

1. Trebuie să fiți familiarizați HTML, CSS și JavaScript. [Verificați resursele]
2. Trebuie să aveți a editor de coduri pentru a scrie extensia. [Comparați editori]
3. (Opțional) Dacă doriți să distribuiți extensia dvs. altor utilizatori, trebuie să aveți a contul de dezvoltator la Magazinul web Chrome. [Creează un cont]

Notă: Google vă cere să plătiți o mică taxă pentru crearea unui cont de dezvoltator la Magazinul web Chrome.

Creați o extensie

În acest tutorial, voi împărți procesul de creare a unui de-a-face pentru Google Chrome. Va fi o utilitate (după cum se arată mai jos) pentru a demonstra componentele esențiale și abilitățile oferite extensiilor.

1. Obțineți un șablon

Google Chrome, ca oricare altă platformă, necesită acest lucru extensii pentru a avea o structură setată, care pot părea complexe pentru începători. De aceea este bine să obțineți un șablon pentru o extensie care să ofere toate necesitățile.

Extensionizr este cel mai bun generator de boilerplate pentru extensiile cromate. Vă permite să alegeți unul dintre tipurile de extensii date - acțiunea browserului (o acțiune pentru toate paginile sau pentru browser), acțiune pagină (o acțiune pentru pagina curentă), sau extensie ascunsă (o acțiune de fundal care este de obicei ascunsă în interfața frontală).

În plus, oferă diverse opțiuni de reglaj fin includ / exclude suplimente necesare, permisiuni, etc Trebuie să selectați “Acțiune browser” ca tip de extensie și “Fără fundal” ca pagină de fundal pentru acest tutorial.

Când ați terminat alegerea opțiunilor pentru crearea extensiei de mostre, apăsați pe “Descarca-l!” în Extensizr. In cele din urma, extrage arhiva (.zip) într-un director și deschideți editorul de cod pentru a începe să scrieți extensia.

2. Codificați extensia

După ce ați descărcat și extras șablonul, veți vedea o structură de directoare după cum se arată în captura de ecran de mai jos. Șablonul este bine organizat și trebuie să știți că este cel mai important fișier “manifest.json“.

Să vedem și alte fișiere și foldere din acest director:

1. _locales: Este folosit pentru a să stocați informații despre limbă pentru o aplicație multilingvă.
2. css: Funcționează să stocheze bibliotecile frontaliere terțe, cum ar fi Bootstrap 4.
3. pictograme: Acesta este conceput pentru a avea icoane pentru extinderea dvs. în dimensiuni variate.
4. js: Este util să salvați terțe părți din bibliotecile back-end cum ar fi jQuery 3.
5. src: Acesta stochează codul actual pe care îl veți scrie pentru extensia dvs..

manifest.json

Conține metadate de bază despre aplicația dvs., care definește detaliile aplicației dvs. în browser. Puteți să-l editați pentru a seta numele, descrierea, site-ul, pictograma etc. a extensiei, împreună cu specificații precum acțiunile și permisiunile browserului.

De exemplu, în codul de mai jos, veți observa că am schimbat numele, descrierea și homepage_url împreună cu default_title în browser_action. Mai mult, I adăugat “depozitare” sub permisiuni deoarece trebuie să stocăm date în extensia noastră.

 "name": "Todoizr - to-do Simplified", "versiune": "0.0.1", "manifest_version": 2 "description_version" https://go.aksingh.net/todoizr "," icoane ": " 16 ":" iconițe / icon16.png "," 48 ":" iconițe / icon48.png "," 128 ":" iconițe / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title " browser_action / browser_action.html "," permisiuni ": [" stocare "] 

src \ browser_action

Acest director va păstra codul pentru acțiunea browserului. În cazul nostru, vom face codul ferestrei pop-up afișat la clic pe pictograma extensiei din browser. Extensia noastră va permite utilizatorilor să adauge și să vizualizeze elementele de lucru în fereastra pop-up.

Notă: Puteți oricând să începeți cu codul clonând acest depozit.

Codul inițial din șablon

Deși acest director avea doar un fișier HTML care conținea tot codul, am decis să îl împart în trei fișiere separate pentru o mai bună claritate. Acestea fiind spuse, fișierul HTML numit “browser_action.html” acum are următorul cod:

Mai mult, fișierul de stil numit “browser_action.css” are conținutul de mai jos în timp ce fișierul JavaScript este denumit “browser_action.js” este gol pentru moment.

 #mainPopup padding: 10px; înălțime: 200px; lățime: 400px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2;  

Proiectați interfața pop-up

După configurarea proiectului inițial, să proiectăm mai întâi interfața pop-up. eu am configura interfața cu o abordare minimalistă, afișând numele din partea de sus, urmat de un formular pentru adăugarea elementelor de rezolvat și o zonă de mai jos pentru vizualizarea elementelor adăugate. Este inspirat de designul simplist al “Forma stilului 5“.

În codul de mai jos, am adăugat două diviziuni - unul pentru afișarea formularului pentru a adăuga un element de realizat, iar celălalt pentru afișarea listei cu elemente deja adăugate. Acestea fiind spuse, noul cod pentru “browser_action.html” este după cum urmează:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Și fișierul de stil “browser_action.css” acum are următorul cod:

 @import url ("./form_style_5.css"); #mainPopup height: 200px; lățime: 300px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  / * Formularul elementului de completare * / .form-style-5 margin: auto; padding: 0px 20px;  .form-style-5: primul copil fundal: nici unul; . stil-stil-5 h1 culoare: # 308ce3; font-size: 20px; text-align: centru;  .formă-stil-5 de intrare [type = "text"] width: auto; plutește la stânga; marginea inferioară: dezactivată;  .form-stil-5 de intrare [tip = "buton"] background: # 308ce3; lățime: auto; float: dreapta; padding: 7px; frontieră: nici una; raza de graniță: 4 pixeli; font-size: 14px; . stil-stil-5 de intrare [tip = "buton"]: hover background: # 3868d5;  / * Listă de elemente obligatorii * / .form-style-5: last-child height: inherit; margin-bottom: 5px; . style-style-5 ul padding: 20px; . stil-stil-5 ul li font-size: 14px;  

În cele din urmă, fișierul de stil terță parte “form_style_5.css” are conținutul de mai jos. Este pur și simplu preluat de pe site-ul său pentru a inspira designul extensiei noastre.

 / * Formă de stil 5 de Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; padding: 10px 20px; fundal: # f4f7f8; margine: 10 pixeli auto; padding: 20px; fundal: # f4f7f8; raza de graniță: 8 pixeli; font-familie: Georgia, "Times New Roman", Times, serif;  .formul-forma-5-format border: none;  .form-stil-5 legende font-size: 1.4em; margin-bottom: 10px;  .formă-stil-5 etichetă display: bloc; margin-bottom: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], - 5 intrări [type = "email"], .form-style-5 input [type = "number"], .form-style-5 input [ = "timp"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 selectați font-family: , serif; fundal: rgba (255,255,255, .1); frontieră: nici una; raza de graniță: 4 pixeli; font-size: 16px; marja: 0; contur: 0; padding: 7px; lățime: 100%; dimensiunea cutiei: caseta de margine; -webkit-box-dimensioning: border-box; -moz-box-dimensionare: caseta de margine; fundal-culoare: # e8eeef; Culoare: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) inset; box-shadow: 0 1px 0 rgba (0,0,0,0.03) inset; margin-bottom: 30px;  .form-stil-5 intrare [tip = "text"]: focalizare, .form-stil-5 intrare [type = "datetime] focus, .form-style-5 input [type = "email"]: focalizare, .form-style-5 input [type = "number"]: : focus, .form-style-5 input [type = "time"]: focus, .form-style-5 input [type = "url"]: style-5 selectați: focus background: # d2d9dd;  .form-style-5 selectați -webkit-appearance: menulist-button; înălțime: 35px;  .form-style-5 .număr fundal: # 1abc9c; culoare: #fff; înălțime: 30px; lățime: 30px; afișare: inline-block; font-size: 0.8cm; margin-dreapta: 4px; linia-înălțime: 30px; text-align: centru; text-shadow: 0 1px 0 rgba (255,255,255,0.2); raza de graniță: 15px 15px 15px 0px; . form-style-5 input [type = "trimite"], .form-style-5 input [type = "button"] position: relative; afișare: bloc; zăpadă: 19px 39px 18px 39px; culoare: #FFF; marja: 0 auto; fundal: # 1abc9c; font-size: 18px; text-align: centru; font-style: normal; lățime: 100%; frontieră: 1px solid # 16a085; lățimea graniței: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 input [type = "trimite"]: hover, .form-style-5 input [tip = "buton"]: hover background: # 109177;  

Scrieți logica pop-up-ului

Odată ce terminăm cu front-ul extinderii, să scriem logica pentru funcționarea acesteia. Avem nevoie de extensia noastră pentru a putea adăugați elemente de rezolvat și afișați-le în fereastra pop-up. Deci, vom adăuga un buton de ascultare a butonului pentru a adăuga textul de intrare ca element de rezolvat și un ascultător de încărcare a paginii pentru a afișa acele elemente.

În codul de mai jos, vom folosi două funcții - sync.get () și sync.set (), care fac parte din “chrome.storage“. Avem nevoie de cea de-a doua pentru a salva elementele de rezolvat din spațiul de stocare, iar prima pentru a le recupera și a le arăta.

Acestea fiind spuse, mai jos este codul final al “browser_action.js” fişier. După cum puteți vedea mai jos, codul este foarte comentat pentru a vă ajuta să înțelegeți scopul acestuia.

 () [] todo ', funcția (rezultatul) var todo = [] dacă (result && result.todo && result.todo.trim ()! == ") / * Parse și a obține matricea așa cum este salvată ca un șir * / todo = JSON.parse (result.todo) console.log ('todo.length = + todo.length) pentru (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. Încărcați extensia

După ce ați terminat scrierea extensiei dvs., este timpul să-l testați prin caracteristica Google Chrome, care vă oferă să încărcați extensii neambalate, neambalate. Dar mai întâi, trebuie activați modul dezvoltator în browserul dvs.: faceți clic pe Opțiuni buton > alege “Mai multe unelte” > Extensii, și apoi treceți “Modul dezvoltator“.

Acum veți vedea mai multe butoane în bara de căutare. Aici faceți clic pe “Încărcați neambalat” buton. Acesta va cere directorul - să navigheze și să selecteze directorul extensiei dvs. și va încărca extensia. Dacă modificați sau actualizați codul extensiei dvs., puteți face clic pe butonul de reîncărcare pentru a încărca cele mai recente modificări.

În exemplul nostru, veți vedea pictograma extensiei lângă pictograma de profil pentru că am adăugat o acțiune de browser în extensia noastră de mostre. Puteți face clic pe pictograma respectivă adăugați și vizualizați elemente de rezolvat în extensia noastră, deoarece aceasta este acțiunea specificată.

Distribuiți o extensie

Deși este ușor de încărcat o extensie la Magazinul web Chrome, procesul este prea lung pentru a acoperi toate detaliile. Pe scurt, creați un cont de dezvoltator, împachetați extensia dvs., apoi trimiteți-o împreună cu detaliile sale de conținut (cum ar fi numele, pictograma, capturile de ecran etc.); așa cum este indicat în ghidul pas cu pas.

Ce urmează? Citiți și codați

După cum probabil ați așteptat, scopul acestui tutorial este să vă începeți cu dezvoltarea extensiei pentru Google Chrome. Am încercat să acoperim conceptele de bază; in orice caz, trebuie să știți mult mai mult pentru a face o dezvoltare extensivă serioasă.

Acestea fiind spuse, mai jos sunt câteva dintre meu resurse preferate pentru a învăța să dezvolte extensii pentru Google Chrome și alte browsere bazate pe Chromium:

1. Toate abilitățile, componentele și caracteristicile extensiilor.
2. Extensii de mostre de către echipa din spatele Google Chrome.

Dacă ați trecut prin aceste resurse și sunteți gata pentru o anumită provocare, încercați să adăugați funcții de mai jos în extensia pe care tocmai ați terminat-o:

1. O opțiune pentru ștergerea articolelor salvate.
2. O caracteristică pentru a afișa notificări atunci când ați adăugat un element.

Este vorba despre dezvoltarea primei dvs. extensii pentru cel mai popular browser. Ce extensie ați creat? Ai intrat într-o problemă? Te rog să-mi spui povestea scriind un comentariu de mai jos sau să-mi trimiți mesaje la @aksinghnet.

Nu în ultimul rând, rețineți că puteți să încercați Todoizr (extensia pe care am creat-o) la Magazinul web Chrome și să verificați codul complet în acest depozit.