Construirea unei extensii Chrome poate fi copleșitoare. Este diferit de a crea o aplicație web prin faptul că nu doriți să puneți prea mult JavaScript peste browser, deoarece extensia dvs. va fi rulată împreună cu site-ul web pe care îl vizitați. De asemenea, nu obțineți, de obicei, avantajul grupării și depanării disponibile cu pachetele și cadrele de astăzi.

Când am decis să construiesc o extensie Chrome, am constatat că numărul de postări pe blog și articole despre construirea unuia este destul de mic. Și există și mai puține informații atunci când doriți să utilizați una dintre cele mai noi tehnologii precum TailwindCSS.

În acest tutorial vom descoperi cum să construim o extensie Chrome utilizând Parcel.js pentru grupare și vizionare și TailwindCSS pentru stilizare. Vom vorbi, de asemenea, despre cum să separați stilul dvs. de site-ul web pentru a evita coliziunea CSS – dar mai multe despre asta mai târziu.

Există câteva tipuri de extensii Chrome demne de menționat:

  • Scripturi de conținut: Primul tip de extensie Chrome este cel mai frecvent. Acesta rulează în contextul unei pagini web și poate fi folosit pentru a modifica conținutul acesteia. Acesta este tipul de extensie pe care îl vom crea.
  • Pop-up: Extensiile bazate pe ferestre pop-up folosesc pictograma extensiei din dreapta barei de adrese pentru a deschide un popup care poate conține orice conținut HTML care vă place.
  • Opțiuni UI: Ai ghicit! Aceasta este o interfață de utilizare pentru personalizarea opțiunilor ca extensie. Este accesibil făcând clic dreapta pe pictograma extensiei și selectând „opțiuni” sau navigând la pagina extensiei din lista extensiilor Chrome chrome://extensions
  • Extensie DevTools: „O extensie DevTools adaugă funcționalitate Chrome DevTools. Poate adăuga noi panouri UI și bare laterale, poate interacționa cu pagina inspectată, poate obține informații despre solicitările de rețea și multe altele”. –Documentația Google Chrome

În acest tutorial vom crea o extensie Chrome utilizând numai scripturi de conținut, afișând conținut pe pagina web și interacționând cu DOM.

Cum să grupați extensia Chrome utilizând Parcel.js V2

Parcel.js este un pachet de aplicații web cu configurare zero. Poate folosi orice fel de fișier ca punct de intrare. Este simplu de utilizat și va funcționa pentru orice tip de aplicație, inclusiv extensiile Chrome.

Mai întâi creați un folder nou numit demo-extension (asigura-te ca ai yarn sau npm instalat, voi folosi yarn pentru această postare):

$ mkdir demo-extension && cd demo-extension && yarn init -y

În continuare vom instala Parcel ca dependență locală:

$ yarn add -D parcel@next

Acum creați un nou director numit src:

$ mkdir src

Adăugarea unui fișier manifest

Fiecare extensie de browser are nevoie de un fișier manifest. Aici definim versiunea și metadatele despre extensia noastră, dar și scripturile utilizate (conținut, fundal, popup, .etc) și permisiunile, dacă există.

Puteți găsi schema completă în documentația Chrome: https://developer.chrome.com/extensions/manifest

Să mergem mai departe și să adăugăm un fișier nou în src numit manifest.json cu acest conținut:

Acum, înainte de a intra în mai multe detalii despre modul în care funcționează extensiile cromate și despre tipul de lucruri pe care le puteți crea cu ele, vom configura TailwindCSS

Cum se folosește TailwindCSS cu extensia Chrome

TailwindCSS este un cadru CSS care folosește clase de utilități de nivel inferior pentru a crea componente UI vizuale reutilizabile, dar și personalizabile.

Tailwind poate fi instalat în două moduri, dar cel mai comun mod de a-l utiliza este prin pachetul său NPM:

$ yarn add tailwindcss

De asemenea, continuați și adăugați autoprefixer și postcss-import:

$ yarn add -D autoprefixer postcss-import

Aveți nevoie de acestea pentru a adăuga prefixele furnizorului la stilurile dvs. și pentru a putea scrie sintaxă cum ar fi @import "tailwindcss/base" pentru a importa fișiere Tailwind direct din node_modules, respectiv.

Acum că îl avem instalat, să facem un nou fișier în directorul nostru rădăcină și să-l numim postcss.config.js. Acesta este fișierul de configurare pentru PostCSS și va conține, deocamdată, aceste linii:

Ordinea pluginurilor contează aici!

Asta este! Asta este tot ce aveți nevoie pentru a începe să utilizați TailwindCSS în extensia dvs. Chrome.

Creați un fișier numit style.css în interiorul tău src și includeți fișierele Tailwind:

Eliminați CSS neutilizate folosind PurgeCSS

De asemenea, să ne asigurăm că importăm doar stilurile pe care le folosim activând capacitatea de purjare a Tailwind.

Creați un nou fișier de configurare Tailwind executând:

$ npx tailwindcss init: aceasta va crea un nou tailwind.config.js fişier.

Pentru a elimina CSS neutilizate, vom adăuga fișierele noastre sursă în câmpul de purjare astfel:

Acum CSS-ul nostru va fi eliminat, iar stilurile neutilizate vor fi eliminate atunci când creați pentru producție.

Cum să activați reîncărcarea rapidă în extensia Chrome

Încă un lucru înainte de a adăuga conținut la extensia noastră: să activăm reîncărcarea la cald.

Chrome nu reîncarcă fișierele sursă atunci când efectuați modificări noi – trebuie să apăsați butonul „Reîncărcați” de pe pagina de extensii. Din fericire, există un pachet NPM care ne reîncarcă la cald.

$ yarn add crx-hotreload

Pentru a-l utiliza, vom crea un nou fișier numit background.js în interiorul nostru src folder și import crx-hotreload

În cele din urmă indicați spre background.js în manifest.json deci poate fi servit cu extensia noastră (reîncărcarea la cald este dezactivată în mod implicit în producție):

Suficient cu configurarea. Să construim un mic formular de script în cadrul extensiei noastre.

Tipuri de scripturi într-o extensie Chrome

După cum sa menționat la începutul acestei postări, în extensiile Chrome există câteva tipuri de scripturi pe care le puteți utiliza.

Scripturi de conținut sunt scripturi care rulează în contextul paginii web vizitate. Puteți rula orice cod JavaScript care este altfel disponibil în orice pagină web obișnuită (inclusiv accesarea / manipularea DOM).

Un script de fundal, pe de altă parte, este locul în care puteți reacționa la evenimentele browserului și are acces la API-urile extensiei Chrome.

Adăugarea unui script de conținut

Creați un fișier nou numit content-script.js sub src pliant.

Să adăugăm acest formular HTML la fișierul nou creat:

Stilul unei extensii de browser nu este atât de simplu pe cât ați putea crede, deoarece trebuie să vă asigurați că stilurile site-ului web nu sunt afectate de propriile stiluri.

Pentru a le separa, vom folosi ceva numit Shadow DOM. Shadow DOM este o tehnică puternică de încapsulare pentru stiluri. Acest lucru înseamnă că stilul este cuprins în arborele Shadow. Prin urmare, nimic nu este scurs pe pagina web vizitată. De asemenea, stilurile exterioare nu înlocuiesc conținutul Shadow DOM, deși variabilele CSS pot fi încă accesibile.

A gazda umbra este orice element DOM la care am vrea să atașăm arborele nostru Shadow. A Rădăcina umbrei din ce se întoarce attachShadow iar conținutul său este cel care este redat.

Ai grijă, singura modalitate de a stiliza conținutul unui copac Shadow este prin înclinarea stilurilor. Parcel V2 are o nouă funcție încorporată în care puteți importa conținutul unui pachet și îl puteți folosi ca text compilat în fișierele dvs. JavaScript. Apoi, coletul îl va înlocui în momentul ambalării.

Am făcut exact asta cu style.css pachet. Acum putem încorpora CSS automat la Shadow DOM la momentul construirii.

Acum trebuie să spunem browserului despre acest fișier nou, să mergem mai departe și să-l includem adăugând aceste linii la manifestul nostru:

Pentru a ne servi extensia, vom adăuga câteva scripturi la package.json:

În cele din urmă puteți fugi yarn watch, mergi la chrome://extensions, și asigurați-vă Mod dezvoltator este activat în partea dreaptă sus a paginii. Faceți clic pe „Încărcați ambalajul” și selectați dist dosar sub demo-extension.

  • Dacă primiți această eroare: Error: Bundles must have unique filePaths îl puteți repara pur și simplu eliminând fișierul main câmp în dumneavoastră package.json

Cum să publicați extensia dvs. în Magazinul web Google Chrome

Înainte de a merge mai departe în acest sens, să adăugăm un nou script NPM care ne va ajuta să comprimăm fișierele de extensie, așa cum ne cere Chrome.

Dacă nu ați instalat zip totuși, vă rugăm să faceți acest lucru:

  • MacOS: brew install zip
  • Linux: sudo apt install zip
  • Pentru Windows, puteți utiliza comanda Powershell Compress-Archive în mod similar: powershell Compress-Archive -Path .\dist\ -Destination .\chrome-extension.zip

Acum tot ce trebuie să faci este să te îndrepți spre Tabloul de bord pentru dezvoltatori Chrome Web Store să vă configurați contul și să publicați extensia?

  • Puteți găsi demo-ul complet pentru acest tutorial găzduit pe contul meu GitHub Aici

Concluzie

În cele din urmă, extensiile Chrome nu sunt atât de diferite de aplicațiile web. Astăzi ați învățat cum să dezvoltați o extensie folosind cele mai noi tehnologii și practici în dezvoltarea web.

Sperăm că acest tutorial v-a ajutat să accelerați puțin dezvoltarea extensiei!

Dacă vi s-a părut util acest lucru, vă rugăm să trimiți un mesaj despre acesta și să mă urmărești la @marouanerassili.

Mulțumesc!