Chrome er lett den mest populære nettleseren på planeten. Ifølge Statcounters undersøkelses markedsundersøkelse for nettleseren, tar Chrome hjem hele 65 prosent av markedet i desktop-nettlesere fra slutten av 2017.

Med den typen markedsdefinerende kraft har design for Chrome blitt en prioritet. Det samme gjelder for utvidelser: Chrome tilbyr den største brukerbasen for utvidelser langt, med titusenvis av utvidelser, temaer og apper som populerer Chrome Nettmarked.

Hvis du vil sette inn penger på trenden, kan du bygge din egen grunnleggende Chrome-utvidelse. Du trenger bare noen grunnleggende webutviklingsferdigheter (HTML, CSS og Javascript) samt en teskje JSON for å knytte det hele sammen.

Vi vurderer den mest grunnleggende strukturen som kreves for å bygge en grunnleggende Chrome-utvidelse i dette innlegget. For å få en grundig oversikt over mulighetene som er tilgjengelige, sjekk ut Chrome's Developer Extension Guide.

Skrive en grunnleggende Chrome Extension: Manifest Destiny

For denne opplæringen vil vi bygge en grunnleggende Chrome-utvidelse som viser en enkel popup-melding når den klikkes. Vi trenger et par viktige filer: et ikon ("icon.png"), en HTML-fil ("popup.html") og det viktigste manifestet ("manifest.json"). Alle disse filene vil ligge inne i en katalog med navnet på utvidelsen. I dette tilfellet heter det "Hello World."

En Chrome-utvidelse er definert av manifestet. Denne versjonen av JSON viser Chrome hvordan du tolker utvidelsen, hvilke filer som skal lastes, og hvordan du samhandler med brukeren.

Manifestfilen for vår svært grunnleggende forlengelse ser slik ut:

 {"manifest_version": 2, "navn": "Hello World!", "description": "Min første Chrome-utvidelse.", "browser_action": {"default_icon": "icon.png", "default_popup": "popup .html "}, " tillatelser ": [" activeTab "]}

Denne manifestfilen legger et ikon i brukerens verktøylinje som, når det klikker, laster inn innholdet i filen "popup.html." Følgende er nitty-gritty på resten av innholdet:

  • manifest_version forteller Chrome hvilken versjon av manifestmarkupen du jobber med. For moderne utvidelser må du sette dette til 2.
  • name viser navnet utvidelsen vil vises i Chrome-butikken og "Chrome: // utvidelser".
  • description viser beskrivende tekst som vises på "chrome: // extensions."
  • browser action laster ikonet inn i verktøylinjen. Det tillater også utvidelsen å svare på brukerinngang ved å vise et verktøytips, popup eller badge. Sjekk ut en fullstendig liste over alt "browser_action" kan gjøre.
  • default_icon viser banen til ikonet i utvidelsens katalog.
  • default_popup viser banen til filen som vil bli lastet når utvidelsesikonet er klikket.
  • permissions begrenser utvidelsens funksjonelle område. activeTab er den vanligste, slik at utvidelsen kan få tilgang til den activeTab kategorien. Google gir en liste over alle tillatelsene en utvidelse kan be om.

Hvis du vil ha et dypt dykk inn i alt som en Chrome-utvidelses manifest kan deklarere, sjekk ut Googles dokumenter på utvidelsesmanifestasjoner.

Skrive en grunnleggende Chrome Extension: Popups

Nå som vi har skrevet vår manifest, kan vi finne ut hva vår utvidelse vil vise. Det er opp til vår "popup.html" -fil, som vises når utvidelsen laster. Her er hva vi skal bruke for dette prosjektet:

 Hei Verden

Som du kan se, vil dette gjøre noe tekstformet med CSS. Hvis du vil legge til Javascript eller eksternt CSS til din utvidelse, krever det å deklarere skriptene i manifestet, under content_scripts tasten. Når du har det som er referert i manifestet, kan du laste inn disse skriptene som du normalt ville.

Skrive en Grunnleggende Chrome-utvidelse: Laster inn i Chrome

Når vi har skrevet grunnleggende koden for utvidelsen vår og funnet et passende ikon, kan vi laste det inn i Chrome.

1. Naviger til "chrome: // extensions" og slå på "Developer Mode" ved å merke av i avmerkingsboksen øverst til høyre.

2. Klikk på "Last utpakket utvidelse ..." -knappen og velg utvidelsens katalog.

3. Når utvidelsen er lastet, ser du ikonet i menylinjen.

4. Klikk på utvidelsen for å se dens (veldig enkel) effekt.

Konklusjon: Utvidelse av Chrome-utvidelsen din

Når du er ferdig med utvidelsen din og er klar til å publisere, må du opprette en Chrome-utviklerkonto. Det er ikke en nøyaktig enkel prosess, men Google gir fullstendige instruksjoner for publisering av Chrome-utvidelsen din her.

Det er åpenbart så mye mer du kan gjøre med Chrome-utvidelsen, men det er litt utenfor omfanget av dette innlegget. Hvis du vil lære mer om alt Chrome-utvidelser kan gjøre, kan du sjekke Googles Chrome Developer Extension Guide.