Cum se scrie o extensie Chrome: Ghid pas cu pas cu exemplu de cod

Publicat: 2022-04-10

Extensiile de browser pot fi o modalitate excelentă de a vă folosi abilitățile de codare și de a crea ceva care vă va permite să faceți sarcini repetitive cu doar câteva clicuri. Dacă doriți să obțineți acest lucru, să învățați cum să scrieți o extensie Chrome este un început excelent.

Google Chrome oferă dezvoltatorilor de extensii multe API-uri diferite, cum ar fi adăugarea unei pagini noi, ferestre pop-up, crearea de notificări, configurarea unui motor de căutare implicit sau chiar crearea unui element de meniu contextual (meniul care apare când faceți clic dreapta pe o pagină).

Posibilitățile sunt nelimitate, dintr-o extensie care redă „Hello World!” la o extensie care vă permite să faceți o captură de ecran a paginii web.

Cum se scrie o extensie Chrome

Cuprins:

  • Structura extinderii
  • Se încarcă extensia
  • Adăugarea unei interfețe de utilizator pop-up
  • Utilizarea API-ului de notificări
  • Adăugarea unui element de meniu contextual
  • Utilizarea API-ului de stocare pentru a stoca date
  • Distribuirea extensiei
Cum să creați o extensie #Google #Chrome: ghid pas cu pas pentru începători
Faceți clic pentru a Tweet

În acest tutorial, vă vom arăta cum să scrieți o extensie Chrome care trimite notificări de browser dintr-un meniu pop-up. Vom folosi, de asemenea, meniul contextual și API-urile de stocare a datelor pentru a profita la maximum de el. Îi spunem Notificare! cu semnul exclamării!

Creați o extensie Google Chrome

Codul extensiei este public pe GitHub, așa că nu ezitați să îl folosiți.

Cum se scrie o extensie Chrome: structura

Înainte de a merge mai departe, ar trebui să consultați documentația pentru dezvoltatori Google Chrome pentru a afla despre dezvoltarea extensiilor Chrome în general.

De asemenea, dacă doriți să scrieți o extensie Chrome pentru Magazinul web Chrome, vă rugăm să consultați politica cu un singur scop.

Să începem prin a crea un nou folder numit notify pe dispozitivul tău. Acest folder va conține tot ceea ce va face parte din extensia dvs.

Acum, trebuie să creați un fișier manifest care va conține toate informațiile despre extensia noastră. Creați un fișier numit manifest.json și includeți următorul cod: 

 { "name" : "Notify!" , "description" : "A Google Chrome extension!" , "version" : "1.0" , "manifest_version" : 3 , "icons" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } }
 Limba codului: JSON / JSON cu comentarii ( json )

După cum puteți vedea, până acum, conține doar metainformații despre extensia dvs., cum ar fi numele, descrierea și versiunea acesteia. manifest_version îi spune lui Chrome ce versiune a API-ului extensiilor pe care o utilizați.

Se încarcă extensia

După ce aveți fișierul manifest, puteți încărca extensia în browserul Chrome:

Se încarcă o extensie în Google Chrome

Deschideți pagina de gestionare a extensiilor navigând la chrome://extensions sau o puteți deschide și din meniul Extensii din setări.

Odată ajuns acolo, activați modul Dezvoltator și utilizați butonul Încărcare despachetat pentru a selecta directorul extensiei.

Iată prelungirea ta! Acum că extensia dvs. este încărcată, o puteți îmbunătăți pas cu pas și puteți observa modificările.

Asigurați-vă că adăugați o pictogramă pentru extensia dvs. la assets/icons/ dosar, altfel va apărea o pictogramă implicită.

Adăugarea unei interfețe de utilizator pop-up

Să continuăm prin adăugarea unei interfețe de utilizator la extensie, de unde oamenii pot interacționa cu opțiunile oferite.

Există mai multe moduri de a face acest lucru, cum ar fi adăugarea unei pagini întregi, dar o fereastră pop-up este de obicei calea de urmat pentru majoritatea extensiilor.

Pentru a adăuga un pop-up la extensie, va trebui să adăugați acest lucru în fișierul manifest.json : 

 "action" : { "default_popup" : "popup.html" , "default_icon" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } },
 Limbajul codului: JavaScript ( javascript )

Cu aceasta, îi spuneți extensiei locația fișierului HTML al popup-ului și pictogramele implicite. Aceasta este doar pictograma implicită, deoarece API-ul vă permite să schimbați pictograma din mers. De exemplu, dacă creați un test Google PageSpeed, se pot afișa diferite pictograme pe site în funcție de clasamentul paginii.

Pop-up extensie

Popup-ul extensiei Google Chrome

Acum, puteți adăuga codul HTML al pop-up-ului dvs. la fișier, așa cum facem în exemplul nostru:

 <!DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "assets/css/popup.css" > </ head > < body > < div id = "notify-wrapper" > < div id = "notify-header" > < h1 > Notify! </ h1 > </ div > < div id = "notify-containers" > < div class = "notify-form" > < label for = "text" > Notification </ label > < textarea name = "text" id = "notify-text" placeholder = "Let's notify!" > </ textarea > </ div > < div class = notify-buttons > < p > Total: < span id = "notify-count" > </ span > </ p > < button class = "button" id = "notify-reset" > Reset </ button > < button class = "button primary" id = "notify-button" > Notify! </ button > </ div > </ div > </ div > < script src = "assets/js/popup.js" > </ script > </ body > </ html >
 Limbajul codului: HTML, XML ( xml )

Acest fișier HTML face, de asemenea, legături către o foaie de stil și un script pentru a adăuga stil și funcționalitate popup-ului nostru.

Dacă urmăriți, puteți obține codul CSS de aici. Vom adăuga JavaScript la fișier mai târziu în acest tutorial.

Până acum, ați creat o extensie Google Chrome care are un pop-up și ne-a luat doar câteva rânduri de cod. După cum am spus la început, crearea unei extensii Google Chrome este foarte ușoară!

Mergând mai departe în acest tutorial, vom adăuga funcționalitate acestei extensii și o vom face mai mult decât un substituent.

Utilizarea API-ului de notificări

După cum sugerează și numele extensiei, este o extensie de notificări, așa că haideți să adăugăm câteva!

Înainte de a utiliza unele dintre API-uri, trebuie să specificați permisiunile pentru acestea în fișierul manifest.json . Unul dintre motivele pentru a face acest lucru este ca utilizatorii extensiei să știe ce permisiuni solicită extensia înainte de a le instala.

Pentru notificări, procedați astfel: 

 "permissions" : [ "notifications" ],
 Limbajul codului: JavaScript ( javascript )

De asemenea, trebuie să adăugați un lucrător de service la extensie pentru a trimite notificări. Pentru asta, trebuie să adăugați acest lucru în manifest: 

 "background" : { "service_worker" : "background.js" },
 Limbajul codului: JavaScript ( javascript )

Aveți nevoie de un lucrător de service pentru API-ul de notificare, deoarece nu poate fi utilizat direct din fișierul popup.js .

În fișierul background.js , trebuie să adăugați următorul cod pentru a trimite o notificare: 

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : data.message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); } });
 Limbajul codului: JavaScript ( javascript )

Aici, folosim ascultătorul de evenimente onMessage pentru a obține declanșatorul pentru a împinge notificări din fereastra pop-up.

De asemenea, folosim metoda create pentru a crea o notificare nouă. Notificările pot fi de diferite tipuri, dar aici se folosește tipul „de bază”. Ar trebui să aruncați o privire la toate opțiunile disponibile.

Acum că metoda de create este în vigoare, o puteți declanșa din fișierul popup.js astfel: 

 const text = document .getElementById( 'notify-text' ); const notify = document .getElementById( 'notify-button' ); notify.addEventListener( 'click' , () => { chrome.runtime.sendMessage( '' , { type : 'notification' , message : text.value }); } );
 Limbajul codului: JavaScript ( javascript )

Aici, acțiunea sendMessage este folosită pentru a declanșa notificarea. Și voila! Avem o extensie care declanșează o notificare.

Chrome Notification API

Asigurați-vă că utilizați cea mai recentă versiune de Google Chrome și că i-ați acordat permisiunea de a declanșa notificări. Pe scurt, nu fi ca mine, care a petrecut ore întregi încercând să-și dea seama de ce nu apăreau notificările.

Adăugarea unui element de meniu contextual

După cum sa menționat în introducere, meniul contextual este meniul care apare la clic dreapta:

Meniul contextual Google Chrome

Pot exista multe motive pentru care extensia dvs. ar putea avea un element de meniu contextual. Un exemplu proeminent este să selectați un text cu cursorul și apoi să îl căutați pe Google.

Puteți adăuga în meniul contextual câte articole doriți, dar dacă extensia dvs. adaugă mai multe elemente, acestea vor fi restrânse sub un element părinte.

Pentru aceasta, trebuie să adăugați permisiuni la fișierul manifest: 

 "permissions" : [ "contextMenus" , "notifications" ],
 Limbajul codului: JavaScript ( javascript )

Acum că ați adăugat permisiuni pentru contextMenus , puteți adăuga acest lucru în fișierul background.js : 

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { notify( data.message ); } }); chrome.runtime.onInstalled.addListener( () => { chrome.contextMenus.create({ id : 'notify' , title : "Notify!: %s" , contexts :[ "selection" ] }); }); chrome.contextMenus.onClicked.addListener( ( info, tab ) => { if ( 'notify' === info.menuItemId ) { notify( info.selectionText ); } } ); const notify = message => { return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Limbajul codului: JavaScript ( javascript )

Codul de mai sus include, de asemenea, codul de la pasul anterior pentru declanșarea unei notificări care este acum extrasă în funcția de notify , astfel încât să poată fi reutilizată.

Acțiunea contextMenus.create este utilizată pentru a adăuga un articol în meniul contextual. Este conectat la onInstalled , deoarece trebuie inițializat o singură dată.

După aceea, în mod similar cu pasul anterior, folosim contextMenus.onClicked pentru a captura clicul și a declanșa o notificare.

Meniul contextual al Google Chrome

Poate fi o modalitate foarte ingenioasă de a include funcționalitatea extensiei dvs. Dacă te uiți în jur la extensiile utilizate pe browser, vei găsi multe extensii care folosesc inteligent acest spațiu pentru a îmbunătăți experiența extensiei lor.

Utilizarea API-ului de stocare pentru a stoca date

Acum că extensia dvs. are câteva funcții de prezentat, să aruncăm o privire la API-ul de stocare. API-ul de stocare este util atunci când doriți să stocați unele date despre utilizator în extensia dvs.

Există două tipuri de API de stocare: local și sincronizat. Stocarea locală, după cum sugerează și numele, este salvată în browser și rămâne locală. În comparație, stocarea sincronizată permite sincronizarea datelor între browsere folosind același cont Google. Pentru scopurile noastre, folosim stocarea locală.

Mai întâi, trebuie să adăugați permisiunea de stocare la fișierul manifest: 

 "permissions" : [ "contextMenus" , "notifications" , "storage" ],
 Limbajul codului: JavaScript ( javascript )

După aceasta, puteți utiliza metode de stocare, storage.local.get și storage.local.set , pentru a prelua sau salva datele.

Puteți adăuga următorul cod în fișierul popup.js : 

 const reset = document .getElementById( 'notify-reset' ); const counter = document .getElementById( 'notify-count' ); chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; counter.innerHTML = value; } ); chrome.storage.onChanged.addListener( ( changes, namespace ) => { if ( changes.notifyCount ) { let value = changes.notifyCount.newValue || 0 ; counter.innerHTML = value; } }); reset.addEventListener( 'click' , () => { chrome.storage.local.clear(); text.value = '' ; } );
 Limbajul codului: JavaScript ( javascript )

Acest cod face două lucruri:

  • Actualizează numărul de notificări în fereastra pop-up atunci când deschidem pop-up-ul sau valoarea de stocare se modifică. Pentru a asculta modificarea stocării, se folosește storage.onChanged .
  • În parte, ștergem spațiul de stocare atunci când utilizatorul face clic pe butonul de resetare.

Codul de mai sus face treaba de a obține cel mai recent număr și îl actualizează. Acum rămâne configurarea datelor. Pentru aceasta, puteți actualiza funcția noastră de notify cu aceasta: 

 const notify = message => { chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; chrome.storage.local.set({ 'notifyCount' : Number ( value ) + 1 }); } ); return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Limbajul codului: JavaScript ( javascript )

Aici, obținem cele mai recente date de stocare și apoi le actualizăm cu cel mai recent număr.

În mod similar, puteți utiliza chrome.storage.sync API pentru a sincroniza opțiunile dintre browsere.

Distribuirea extensiei

Felicitări! Ai făcut-o! Ați creat cu succes o extensie Google Chrome care utilizează multe părți diferite ale experienței Google Chrome, inclusiv:

  • Ferestre pop-up
  • Notificări API
  • Meniul contextual
  • API de stocare

Dacă doriți să vedeți codul pentru această extensie, îl puteți obține în acest depozit Notify GitHub.

Tuturor ne place să arătăm lumii munca grozavă pe care o facem. După ce extensia este completă, o puteți trimite în Magazinul web Chrome pentru ca alți utilizatori Chrome să o descarce.

Dacă doriți să explorați alte opțiuni pe care Google Chrome le oferă dezvoltatorilor de extensii, vă recomandăm să verificați documentația oficială.

Sper că acest articol și-a făcut rolul în a vă învăța cum să scrieți o extensie Chrome. Suntem încântați să vedem ce poți crea, așa că spune-ne despre aventurile tale cu dezvoltarea extensiei Google Chrome în secțiunea de comentarii de mai jos.

Te-ar putea interesa și:

  • 18 cele mai bune agenții WordPress pentru dezvoltare web, design, marketing și multe altele
  • 15 cele mai bune software-uri de design de site-uri disponibile pe piață chiar acum
  • 9 dintre cele mai bune soluții de creare de site-uri web comparate și testate
Cum să creați o extensie Google #Chrome: ghid pas cu pas pentru începători
Faceți clic pentru a Tweet

…

Nu uitați să vă alăturați cursului nostru rapid despre accelerarea site-ului dvs. WordPress. Cu câteva remedieri simple, puteți reduce timpul de încărcare chiar și cu 50-80%:

Abonați-vă acum imagine

Aspect și prezentare de Chris Fitzgerald și Karol K.