Met een Chrome extensie kun je de capaciteiten van je browser uitbreiden met allerlei coole features. Dit artikel beschrijft uit welke onderdelen een extensie bestaat en hoe jij je eigen extensie kunt maken. Een extensie die je lokaal in je browser kunt gebruiken en zou kunnen uploaden naar de chrome web store voor anderen.
Een extensie bestaat uit verschillende bestanden met daarin JSON, JavaScript, HTML en CSS. Als je een goede basis hebt in Front-end Development betekend dit dat je makkelijk kunt beginnen met het schrijven van extensies.
Manifest
Het belangrijkste bestand van je extensie is de manifest.json, dit is het startpunt voor je browser om je extensie te interpreteren. Het geeft onder andere weer hoe je extensie heet, welke andere bestanden het gebruikt en de manifest versie. Op het moment van schrijven is de meest recente manifest versie versie 3. Wanneer je versie 3 gebruikt kan je extensie onder andere gebruik maken van Service Workers.
Om te beginnen met een extensie maak je een mapje aan en zet je daar een manifest.json bestand in.
// manifest.json{"name": "MyExtension","description": "MyExtension is amazing!","version": "1.0","manifest_version": 3}
Inladen van je extensie
Om je extensie lokaal in je browser te kunnen testen of gebruiken moet je de volgende stappen doen:
- Open je browser en ga naar chrome://extensions
- Zet de developer mode aan
- Klik op de Load unpacked knop
- Selecteer je mapje
Je hebt je eigen extensie gemaakt!
Functionaliteit toevoegen
Om je extensie ook daadwerkelijk iets te laten doen kun je verschillende bestanden toevoegen. Content scripts zijn JavaScript bestanden die toegang hebben tot je browser tabs en daar logica uit kunnen voeren. Service Workers lopen in de achtergrond van je browser en kunnen daar taken uitvoeren zoals het beïnvloeden van netwerk requests of zorgen voor offline support . Daarnaast heb je ook de mogelijkheid verschillende soorten UI en een opties pagina toe te voegen. Deze laatste bestanden zijn simpelweg HTML bestanden waar je JavaScript en CSS aan kunt toevoegen. De verschillende bestanden leven in hun eigen context en communiceren niet direct met elkaar. Wanneer je toch data wil uitwisselen tussen bijvoorbeeld je UI en je Service Worker kun je hier Chrome message APIs voor gebruiken.
Een popup toevoegen
Om een popup toe te voegen maak je een HTML bestand aan in je mapje. Deze moet je registreren in je manifest.json zodat je browser weet dat het hier om een popup gaat.
// manifest.json{..."action": {"default_popup": "popup.html"}}
Er zijn een paar dingen die handig zijn om te weten bij een popup. Je kunt bijvoorbeeld geen inline JavaScript gebruiken tussen script tags. Als je extra JavaScript wil toevoegen aan de popup moet je hiervoor linken naar een externe file. Je kunt wel inline CSS gebruiken of je kunt CSS inladen via een stylesheet link.
Verder is het belangrijk om te begrijpen dat een popup zijn eigen context heeft. Deze is dus niet gelijk aan die van je open browser tabblad. Dit kun je bijvoorbeeld zien als je in je popup logica zet die de background color van je document wijzigt. Alleen de achtergrondkleur ín de popup past zich aan. Je kunt je browser-tab wel beïnvloeden via een Content script.
<!-- popup.html --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="popup.css" /><title>MyExtension</title></head><body><div class="container"><button>Click me!</button><script src="popup.js"></script></div></body></html>
/* popup.css */.container {width: 100px;height: 100px;}
// popup.jsconst button = document.querySelector('button');button.addEventListener('click', () => {document.body.style.backgroundColor = ‘hotpink';});
Als je je extensie refreshed word de content in je HTML bestand weergegeven wanneer je op je extension icoon klikt rechtsboven je browser.
Je kunt meer leren over hoe je deze simpele extensie uitbreid met Content Scripts, Service Workers en het gebruik van de Chrome API in onze Developers Guide. Je kunt ook mijn voorbeeld extensie bekijken op mijn GitHub.