Chrome är enkelt den mest populära webbläsaren på planeten. Enligt Statcounters undersökningsundersökning på marknaden för skrivbordsbläddrar tar Chrome hem en hel del 65 procent av marknaden i skrivbordsflaskor senast 2017.

Med den typen av marknadsdefinierande kraft har design för Chrome blivit en prioritet. Detsamma gäller för tillägg: Chrome erbjuder den största användarbasen för extensions, med tiotusentals tillägg, teman och appar som fyller i Chrome Web Store.

Om du vill ha pengar på trenden kan du bygga din egen grundläggande Chrome-förlängning. Du behöver bara några grundläggande webbutvecklingsfärdigheter (HTML, CSS och Javascript) samt en teskedfull JSON för att knyta samman allt.

Vi granskar den mest grundläggande strukturen som krävs för att bygga en grundläggande Chrome-förlängning i det här inlägget. För att få en fördjupad bild av de tillgängliga möjligheterna, kolla in Chrome Utvecklarens Extension Guide.

Skriva en grundläggande Chrome Extension: Manifest Destiny

För denna handledning bygger vi en grundläggande Chrome-tillägg som visar ett enkelt popup-meddelande när det klickas. Vi behöver några viktiga filer: en ikon ("icon.png"), en HTML-fil ("popup.html") och det viktigaste manifestet ("manifest.json"). Alla dessa filer kommer att ligga inuti en katalog med namnet på ditt tillägg. I det här fallet heter det "Hello World."

En Chrome-förlängning definieras av dess manifest. I detta utdrag av JSON visas Chrome hur man tolkar utökningen, vilka filer som ska laddas och hur man ska interagera med användaren.

Manifestfilen för vår mycket grundläggande tillägg ser ut så här:

 {"manifest_version": 2, "name": "Hej världen!", "beskrivning": "Min första Chrome-förlängning", "browser_action": {"default_icon": "icon.png", "default_popup" .html "}, " behörigheter ": [" activeTab "]}

Den här manifestfilen lägger en ikon i användarens verktygsfält som, när den klickas, laddar innehållet i filen "popup.html." Följande är nitty-gritty på resten av innehållet:

  • manifest_version berättar för Chrome vilken version av det manifestuppdrag du arbetar med. För moderna tillägg måste du ange detta till 2.
  • name visar namnet som tillägget kommer att visas i Chrome Store och "Chrome: // Extensions."
  • description visar den beskrivande texten som visas på "chrome: // extensions."
  • browser action laddar ikonen i verktygsfältet. Det tillåter också att förlängningen svarar på användarinmatning genom att visa ett verktygstips, popup eller märke. Kolla in en fullständig lista över allt "browser_action" kan göra.
  • default_icon visar sökvägen till ikonen från tilläggets katalog.
  • default_popup visar sökvägen till filen som kommer att laddas när tilläggets ikon klickas.
  • permissions begränsar utvidgningens funktionella region. activeTab är den vanligaste, vilket gör det möjligt för tillägget att få åtkomst till fliken främst. Google ger en lista över alla behörigheter som en anknytning kan begära.

Om du vill ha ett djupt dyk i allt som en Chrome-förlängnings manifest kan förklara, kolla Googles dokument på utställnings manifest.

Skriva en grundläggande Chrome Extension: Popup

Nu när vi har skrivit vårt manifest kan vi ta reda på vad vår förlängning kommer att visa. Det är upp till vår "popup.html" -fil, som kommer att visas när förlängningen laddas. Här är vad vi ska använda för det här projektet:

 Hej världen

Som du kan se kommer det att göra lite textformat med CSS. Om du vill lägga till Javascript eller extern CSS till din anknytning, kräver det att de skriver in skript i manifestet, under content_scripts tangenten. När du har det som refererats i manifestet kan du ladda de skript som du normalt skulle.

Skriva en grundläggande Chrome Extension: laddar in i Chrome

När vi har skrivit grundkoden för vår förlängning och hittat en lämplig ikon kan vi ladda den till Chrome.

1. Navigera till "chrome: // extensions" och sätt på "Developer Mode" genom att markera kryssrutan högst upp till höger.

2. Klicka på knappen "Ladda upppackad tillägg ..." och välj filens tilläggsförteckning.

3. När förlängningen är laddad ser du ikonen i menyraden.

4. Klicka på förlängningen för att se dess (mycket enkel) effekt.

Slutsats: Utvidga din Chrome-förlängning

När du är klar med ditt tillägg och är redo att publicera måste du skapa ett Chrome-utvecklarkonto. Det är inte en exakt rättfram process, men Google tillhandahåller fullständiga instruktioner för att publicera din Chrome-förlängning här.

Det finns uppenbarligen så mycket mer du kan göra med din Chrome-förlängning, men det ligger något utanför ramen för det här inlägget. Om du vill lära dig mer om allt Chrome-tillägg kan göra, kolla in Googles Chrome Developer Extension Guide.