Sådan oprettes en Chrome-udvidelse - en tutorial til udvikling af browserplugin

Opbygning af en Chrome-udvidelse kan være overvældende. Det er anderledes end at opbygge en webapp, fordi du ikke vil lægge for meget JavaScript overhead på browseren, da din udvidelse køres sammen med det websted, du besøger. Du får normalt ikke fordelen ved bundling og fejlretning, der er tilgængelig med nutidens bundlere og rammer.

Da jeg besluttede at opbygge en Chrome-udvidelse, fandt jeg ud af, at antallet af blogindlæg og artikler om at bygge en er ret lille. Og der er endnu mindre information, når du vil bruge en af ​​de nyere teknologier som TailwindCSS.

I denne vejledning finder vi ud af, hvordan man bygger en Chrome-udvidelse ved hjælp af Parcel.js til bundling og ser og TailwindCSS til styling. Vi vil også tale om, hvordan du adskiller din styling fra webstedet for at undgå kollision med CSS - men mere om det senere.

Der er et par typer Chrome-udvidelser, der er værd at nævne:

  • Indholdsscripts : Den første type Chrome-udvidelse er den mest almindelige. Den kører i sammenhæng med en webside og kan bruges til at ændre dens indhold. Dette er den type udvidelse, vi opretter.
  • Pop-up : Pop-up-baserede udvidelser bruger udvidelsesikonet til højre for adresselinjen til at åbne en popup, der kan indeholde ethvert HTML-indhold, som du kan lide.
  • Option UI : Du gættede det! Dette er et brugergrænseflade til tilpasning af indstillinger som en udvidelse. Det er tilgængeligt ved at højreklikke på udvidelsesikonet og vælge "indstillinger" eller ved at navigere til udvidelsessiden fra Chrome-udvidelseslistenchrome://extensions
  • DevTools-udvidelse : "En DevTools-udvidelse tilføjer funktionalitet til Chrome DevTools. Den kan tilføje nye UI-paneler og sidebjælker, interagere med den inspicerede side, få oplysninger om netværksanmodninger og mere". -Google Chrome-dokumentation

I denne vejledning opbygger vi en Chrome-udvidelse, der kun bruger indholdsscripts ved at vise indhold på websiden og interagere med DOM.

Sådan bundter du din Chrome-udvidelse ved hjælp af Parcel.js V2

Parcel.js er en nulkonfigurations-webapplikationsbundler. Det kan bruge enhver form for fil som et indgangspunkt. Det er nemt at bruge og fungerer til enhver form for app inklusive Chrome-udvidelser.

Opret først en ny mappe kaldet demo-extension(sørg for at du har yarneller npminstalleret, jeg skal bruge yarntil dette indlæg):

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

Dernæst installerer vi Parcel som en lokal afhængighed:

$ yarn add -D [email protected]

Opret nu en ny mappe kaldet src:

$ mkdir src

Tilføjelse af en manifestfil

Hver browserudvidelse har brug for en manifestfil. Det er her, vi definerer version og metadata om vores udvidelse, men også de anvendte scripts (indhold, baggrund, popup, .etc) og eventuelle tilladelser.

Du kan finde det fulde skema i Chromes dokumentation: //developer.chrome.com/extensions/manifest

Lad os gå videre og tilføje en ny fil, der srckaldes manifest.jsonmed dette indhold:

Inden vi går nærmere ind på, hvordan chrome-udvidelser fungerer, og hvilken slags ting du kan lave med dem, skal vi oprette TailwindCSS

Sådan bruges TailwindCSS med din Chrome-udvidelse

TailwindCSS er en CSS-ramme, der bruger værktøjsklasser på lavere niveau til at skabe genanvendelige men også tilpasselige visuelle UI-komponenter.

Tailwind kan installeres på to måder, men den mest almindelige måde at bruge den på er via sin NPM-pakke:

$ yarn add tailwindcss

Gå også videre og tilføj autoprefixerog postcss-import:

$ yarn add -D autoprefixer postcss-import

Du har brug for disse for at tilføje leverandørpræfikser til dine stilarter og for at kunne skrive syntaks som @import "tailwindcss/base"at importere henholdsvis Tailwind-filer direkte fra node_modules.

Nu hvor vi har det installeret, lad os lave en ny fil inde i vores rodmappe og kalde den postcss.config.js. Dette er konfigurationsfilen til PostCSS, og den indeholder indtil videre disse linjer:

Ordren på plugins betyder noget her!

Det er det! Det er alt hvad du behøver for at komme i gang med at bruge TailwindCSS i din Chrome-udvidelse.

Opret en fil, der hedder style.cssinde i din srcmappe, og inkluder Tailwind-filer:

Fjern ubrugt CSS ved hjælp af PurgeCSS

Lad os også sørge for, at vi kun importerer de stilarter, vi bruger, ved at aktivere Tailwind's udrensningskapacitet.

Opret en ny Tailwind-konfigurationsfil ved at køre:

$ npx tailwindcss init: dette vil oprette en ny tailwind.config.jsfil.

For at fjerne ubrugt CSS skal vi tilføje vores kildefiler til rensningsfeltet som dette:

Nu renses vores CSS, og ubrugte stilarter fjernes, når du bygger til produktion.

Sådan aktiveres Hot Reloading i din Chrome-udvidelse

En ting mere, før du tilføjer noget indhold til vores udvidelse: lad os aktivere varm genindlæsning.

Chrome genindlæser ikke kildefilerne, når du foretager nye ændringer - du skal trykke på knappen "Genindlæs" på siden med udvidelser. Heldigvis er der en NPM-pakke, der genindlæser for os.

$ yarn add crx-hotreload

For at bruge det opretter vi en ny fil, der hedder background.jsinde i vores srcmappe og importerescrx-hotreload

Endelig peg på background.jsind, manifest.jsonså det kan serveres med vores udvidelse (varm genindlæsning er deaktiveret i produktionen som standard):

Nok med konfiguration. Lad os bygge en lille scriptformular inden for vores udvidelse.

Typer af scripts i en Chrome-udvidelse

Som nævnt i begyndelsen af ​​dette indlæg, i Chrome-udvidelser er der et par typer scripts, du kan bruge.

Indholdsscripts er scripts, der kører i sammenhæng med den besøgte webside. Du kan køre enhver JavaScript-kode, der ellers er tilgængelig på en hvilken som helst almindelig webside (inklusive adgang til / manipulering af DOM).

Et baggrundsscript er derimod, hvor du kan reagere på browserhændelser, og det har adgang til Chrome-udvidelses-API'erne.

Tilføjelse af et indholdsscript

Opret en ny fil kaldet content-script.jsunder srcmappen.

Lad os tilføje denne HTML-formular til vores nyoprettede fil:

Styling af en browserudvidelse er ikke så ligetil som du måske tror, ​​fordi du skal sørge for, at webstedsstilarterne ikke påvirkes af dine egne stilarter.

For at adskille dem skal vi bruge noget, der hedder Shadow DOM . Shadow DOM er en stærk indkapslingsteknik til stilarter. Dette betyder, at styling er afpasset til Shadow-træet. Derfor lækker intet til den besøgte webside. Også udvendige stilarter tilsidesætter ikke Shadow DOM's indhold, selvom CSS-variabler stadig kan være tilgængelige.

En skyggehost er ethvert DOM-element, som vi gerne vil knytte vores Shadow-træ til. En Shadow Root er det, der returneres fra, attachShadowog dets indhold er det, der bliver gengivet.

Pas på , den eneste måde at style indholdet af et Shadow-træ på er ved at indføje stilarter. Parcel V2 har en ny indbygget funktion, hvor du kan importere indholdet af en pakke og bruge den som kompileret tekst i dine JavaScript-filer. Derefter udskifter Parcel det på emballeringstidspunktet.

Det gjorde vi netop med vores style.csspakke. Nu kan vi integrere CSS automatisk i Shadow DOM ved byggetid.

Nu skal vi fortælle browseren om denne nye fil, lad os gå videre og medtage den ved at tilføje disse linjer til vores manifest:

For at tjene vores udvidelse skal vi tilføje et par scripts til vores package.json:

Endelig kan du køre yarn watch, gå til chrome://extensionsog sørge for, at Developer Mode er aktiveret øverst til højre på siden. Klik på "Load Unpacked", og vælg distmappen under demo-extension.

  • Hvis du får denne fejl: Error: Bundles must have unique filePathsDu kan bare rette den ved at fjerne mainfeltet i dinpackage.json

Sådan offentliggør du din udvidelse til Google Chrome Webshop

Før vi går nærmere ind i dette, skal vi tilføje et nyt NPM-script, der hjælper os med at komprimere udvidelsesfilerne som krævet af Chrome.

Hvis du ikke har installeret zipendnu, skal du gøre det:

  • MacOS: brew install zip
  • Linux: sudo apt install zip
  • Til Windows kan du bruge powershell-kommandoen på Compress-Archivesamme måde:powershell Compress-Archive -Path .\\dist\\ -Destination .\\chrome-extension.zip

Nu er alt hvad du skal gøre, gå til Chrome Web Store Developer Dashboard for at oprette din konto og offentliggøre din udvidelse?

  • Du kan finde den komplette demo til denne tutorial hostet på min GitHub-konto her

Konklusion

I sidste ende adskiller Chrome-udvidelser sig ikke så meget fra webapps. I dag lærte du, hvordan du udvikler en udvidelse ved hjælp af de nyeste teknologier og fremgangsmåder inden for webudvikling.

Forhåbentlig hjalp denne tutorial dig med at fremskynde din udvidelsesudvikling lidt!

Hvis du fandt dette nyttigt, bedes du Tweet om det og følge mig på @marouanerassili.

Tak skal du have!