Chrome er nemt den mest populære webbrowser på planeten. Ifølge Statcounters underskriftsmarkedsundersøgelse for pc-browsere, tager Chrome hjem en kæmpe 65% af markedet i stationære browsere i slutningen af ​​2017.

Med den slags markedsdefinerende kraft er design for Chrome blevet en prioritet. Det samme gælder for udvidelser: Chrome tilbyder den største brugerbase til udvidelser langt, med titusindvis af udvidelser, temaer og apps, der populerer Chrome Webshop.

Hvis du ønsker at indbetale trenden, kan du bygge din egen grundlæggende Chrome-udvidelse. Du skal bare bruge nogle grundlæggende webudviklingsfærdigheder (HTML, CSS og Javascript) samt en teskefuld JSON for at knytte det hele sammen.

Vi gennemgår den mest grundlæggende struktur, der kræves for at opbygge en grundlæggende Chrome-udvidelse i dette indlæg. For at få en tilbundsgående oversigt over mulighederne, skal du se Chrome's Developer Extension Guide.

Skrivning af en grundlæggende Chrome Extension: Manifest Destiny

Til denne vejledning opbygger vi en grundlæggende Chrome-udvidelse, der viser en simpel popup-besked, når den klikkes. Vi skal bruge et par vigtige filer: et ikon ("icon.png"), en HTML-fil ("popup.html") og det vigtige manifest ("manifest.json"). Alle disse filer vil ligge inde i en mappe med navnet på din udvidelse. I dette tilfælde hedder det "Hello World."

En Chrome-udvidelse er defineret af dens manifest. Denne uddrag af JSON viser Chrome, hvordan man fortolker udvidelsen, hvilke filer, der skal indlæses, og hvordan man interagerer med brugeren.

Manifestfilen til vores meget grundlæggende udvidelse ser sådan ud:

 {"manifest_version": 2, "navn": "Hej verden!", "beskrivelse": "Min første Chrome udvidelse.", "browser_action": {"default_icon": "icon.png", "default_popup": "popup .html "}, " tilladelser ": [" activeTab "]}

Denne manifestfil vil sætte et ikon i brugerens værktøjslinje, der, når det klikkes, indlæser indholdet af filen "popup.html." Følgende er den nitty-gritty på resten af ​​indholdet:

  • manifest_version fortæller Chrome hvilken version af den manifest-markup du arbejder med. For moderne udvidelser skal du indstille dette til 2.
  • name viser navnet, som udvidelsen vises i Chrome Butik og "Chrome: // udvidelser."
  • description viser den beskrivende tekst, der vises på "chrome: // extensions."
  • browser action indlæser ikonet i værktøjslinjen. Det tillader også udvidelsen at reagere på brugerindgang ved at vise et værktøjstip, popup eller badge. Tjek en komplet liste over alt "browser_action" kan gøre.
  • default_icon viser stien til ikonet fra udvidelsesmappen.
  • default_popup viser stien til filen, der vil blive indlæst, når udvidelsens ikon er klikket.
  • permissions begrænser udvidelsens funktionelle område. activeTab er den mest almindelige, hvilket gør det muligt for udvidelsen at få adgang til fanen på den forreste side. Google giver en liste over alle tilladelser, som en udvidelse kan anmode om.

Hvis du ønsker et dybt dykke ind i alt, hvad en Chrome-udvidelses manifest kan erklære, skal du tjekke Googles dokumenter på udvidelsesmanifester.

Skrivning af en grundlæggende Chrome Extension: Popups

Nu hvor vi har skrevet vores manifest, kan vi finde ud af, hvad vores udvidelse vil vise. Det er op til vores "popup.html" -fil, som vises, når udvidelsen indlæses. Her er hvad vi vil bruge til dette projekt:

 Hej Verden

Som du kan se, vil dette gøre nogle tekstformater med CSS. Hvis du vil tilføje Javascript eller ekstern CSS til din udvidelse, kræver det at deklarere scripts i manifestet under content_scripts tasten. Når du har det, der henvises til i manifestet, kan du indlæse disse scripts som du normalt ville.

Skrivning af en grundlæggende Chrome Extension: Indlæser i Chrome

Når vi har skrevet den grundlæggende kode til vores udvidelse og fundet et passende ikon, kan vi indlæse det i Chrome.

1. Naviger til "chrome: // extensions" og tænd "Developer Mode" ved at markere afkrydsningsfeltet øverst til højre.

2. Klik på knappen "Udvid udpakket udvidelse ..." og vælg udvidelsesmappen.

3. Når udvidelsen er indlæst, vil du se dens ikon i menulinjen.

4. Klik på udvidelsen for at se dens (meget enkel) effekt.

Konklusion: Udvidelse af din Chrome Extension

Når du er færdig med din udvidelse og er klar til at offentliggøre, skal du oprette en Chrome-udvikler-konto. Det er ikke en nøjagtig ligetil proces, men Google giver komplette instruktioner til udgivelse af din Chrome-udvidelse her.

Der er naturligvis så meget mere, du kan gøre med din Chrome-udvidelse, men det ligger lidt over omfanget af dette indlæg. Hvis du vil vide mere om alt, hvad Chrome-udvidelser kan gøre, kan du tjekke Googles Chrome Developer Extension Guide.