Chrome is gemakkelijk de populairste webbrowser ter wereld. Volgens Statcounter's marktonderzoek voor desktopbrowsers neemt Chrome vanaf eind 2017 maar liefst 65% van de markt in desktopbrowsers mee naar huis.

Met dat soort marktbepalende kracht is ontwerpen voor Chrome een prioriteit geworden. Hetzelfde geldt voor extensies: Chrome biedt verreweg het grootste gebruikersbestand voor extensies, met tienduizenden extensies, thema's en apps die de Chrome Web Store vullen.

Als u de trend wilt verzilveren, kunt u uw eigen standaard Chrome-extensie maken. Je hebt gewoon basisvaardigheden voor webontwikkeling nodig (HTML, CSS en Javascript) en een theelepel JSON om alles aan elkaar te knopen.

We zullen de meest eenvoudige structuur bekijken die nodig is om een ​​eenvoudige Chrome-extensie te bouwen in dit bericht. Voor een gedetailleerd overzicht van de beschikbare mogelijkheden, raadpleegt u Chrome's Developer Extension Guide.

Een standaard Chrome-extensie schrijven: Manifest Destiny

Voor deze zelfstudie bouwen we een eenvoudige Chrome-extensie die een eenvoudig pop-upbericht weergeeft wanneer erop wordt geklikt. We hebben een aantal belangrijke bestanden nodig: een pictogram ("icon.png"), een HTML-bestand ("popup.html") en het uiterst belangrijke manifest ("manifest.json"). Al deze bestanden zullen in een map met de naam van uw extensie staan. In dit geval wordt dat 'Hallo wereld' genoemd.

Een Chrome-extensie wordt gedefinieerd door het manifest. Dit fragment van JSON laat Chrome zien hoe de extensie moet worden geïnterpreteerd, welke bestanden moeten worden geladen en hoe interactie met de gebruiker moet plaatsvinden.

Het manifestbestand voor onze erg eenvoudige extensie ziet er als volgt uit:

 {"manifest_version": 2, "naam": "Hello World!", "description": "My first Chrome extension.", "browser_action": {"default_icon": "icon.png", "default_popup": "popup .html "}, " permissies ": [" activeTab "]}

Dit manifestbestand plaatst een pictogram in de werkbalk van de gebruiker die, wanneer erop wordt geklikt, de inhoud van het bestand met de naam "popup.html" laadt. Het volgende is de kern van de rest van de inhoud:

  • manifest_version vertelt Chrome aan welke versie van de manifestopmaak u werkt. Voor moderne extensies moet u dit instellen op 2.
  • name geeft de naam weer die de extensie in de Chrome Store zal weergeven en 'chrome: // extensions'.
  • description toont de beschrijvende tekst weergegeven op "chrome: // extensions".
  • browser action laadt het pictogram in de werkbalk. Het maakt het ook mogelijk dat de extensie reageert op gebruikersinvoer door een tooltip, pop-up of badge weer te geven. Bekijk een volledige lijst van alles wat "browser_action" kan doen.
  • default_icon toont het pad naar het pictogram vanuit de map van de extensie.
  • default_popup toont het pad naar het bestand dat wordt geladen wanneer op het pictogram van de extensie wordt geklikt.
  • permissions beperkt de functionele regio van de extensie. activeTab is de meest voorkomende, waardoor de extensie toegang heeft tot het meest activeTab tabblad. Google biedt een lijst met alle machtigingen die een extensie kan aanvragen.

Als u een diepe duik wilt nemen in alles wat het manifest van een Chrome-extensie kan verklaren, bekijkt u de documenten van Google over uitbreidingsmanifesten.

Een standaard Chrome-extensie schrijven: pop-ups

Nu we ons manifest hebben geschreven, kunnen we uitvinden wat onze extensie zal weergeven. Dat is aan ons "popup.html" -bestand, dat wordt weergegeven wanneer de extensie wordt geladen. Dit is wat we zullen gebruiken voor dit project:

 Hallo Wereld

Zoals u ziet, zal dit tekst weergeven die is gestileerd met CSS. Als u Javascript of externe CSS aan uw extensie wilt toevoegen, moet u de scripts in het manifest declareren, onder de sleutel content_scripts . Zodra u dat heeft waarnaar wordt verwezen in het manifest, kunt u die scripts laden zoals u dat normaal zou doen.

Een standaard Chrome-extensie schrijven: in Chrome laden

Nadat we de basiscode voor onze extensie hebben geschreven en een geschikt pictogram hebben gevonden, kunnen we dit in Chrome laden.

1. Navigeer naar 'chrome: // extensions' en schakel 'Developer Mode' in door het selectievakje in de rechterbovenhoek aan te vinken.

2. Klik op de knop "Uitgeladen extensie laden ..." en selecteer de map van de extensie.

3. Zodra de extensie is geladen, ziet u het pictogram in de menubalk.

4. Klik op de extensie om het (zeer eenvoudige) effect te zien.

Conclusie: uitbreiding van uw Chrome-extensie

Zodra u klaar bent met uw extensie en klaar bent om te publiceren, moet u een Chrome-ontwikkelaarsaccount maken. Dat is niet echt een eenvoudig proces, maar Google biedt volledige instructies voor het publiceren van uw Chrome-extensie hier.

Er is natuurlijk zoveel meer dat je kunt doen met je Chrome-extensie, maar dat is iets wat buiten dit bericht valt. Als u meer wilt weten over alles wat Chrome-extensies kunnen doen, bekijkt u de Chrome-ontwikkelaarsuitbreidinghandleiding van Google.