aan de slag
Manifest V3 wordt binnenkort gelanceerd! Zie de MV3 documentatie voor meer informatie, en overweeg het ontwikkelen van uw extensie in MV3.
uitbreidingen bestaan uit verschillende, maar samenhangende componenten. Componenten kunnen achtergrond scripts, inhoud scripts, een pagina Opties, UI-elementen en verschillende logische bestanden. Extensiecomponenten worden gemaakt met webontwikkelingstechnologieën: HTML, CSS en JavaScript. Een extensie”s Componenten zal afhangen van de functionaliteit en kan niet elke optie vereisen.,
Deze tutorial zal een extensie maken waarmee de gebruiker de achtergrondkleur van elke pagina op developer.chrome.com. het zal veel kerncomponenten gebruiken om een inleidende demonstratie van hun relaties te geven.
om te starten, maakt u een nieuwe map aan waarin de bestanden van de extensie staan.
de voltooide extensie kan hier worden gedownload.
Maak het manifest #
extensies beginnen met hun manifest. Maak een bestand aan met de naam manifest.json en voeg de volgende code toe, of download het bestand hier.,
de map die het manifest-bestand bevat, kan in zijn huidige toestand als extensie worden toegevoegd in de ontwikkelaarsmodus.
- Open de pagina Extensiebeheer door te navigeren naar
chrome://extensions.- de pagina Extensiebeheer kan ook worden geopend door op het Chrome-menu te klikken, met de muis over meer hulpmiddelen te gaan en vervolgens extensies te selecteren.
- Activeer de ontwikkelaarsmodus door op de tuimelschakelaar naast de ontwikkelaarsmodus te klikken.
- klik op de knop uitpakken en selecteer de extensie map.
Ta-da!, De extensie is met succes geïnstalleerd. Omdat er geen pictogrammen in het manifest zijn opgenomen, wordt er een generiek werkbalkpictogram gemaakt voor de extensie.
voeg instructie #
toe hoewel de extensie is geïnstalleerd, heeft deze geen instructie. Introduceer een achtergrondscript door een bestand met de titel background.js aan te maken, of het hier te downloaden en het in de extensie directory te plaatsen.
Achtergrondscripts, en vele andere belangrijke componenten, moeten worden geregistreerd in het manifest., Het registreren van een achtergrond script in het manifest vertelt de extensie welk bestand te verwijzen, en hoe dat bestand zich moet gedragen.
de extensie is zich er nu van bewust dat het een niet-persistent achtergrondscript bevat en zal het geregistreerde bestand Scannen op belangrijke gebeurtenissen waar het naar moet luisteren.
Deze extensie heeft informatie nodig van een permanente variabele zodra deze geïnstalleerd is. Begin met het opnemen van een luistergebeurtenis voor runtime.onInstalled in het achtergrondscript. Binnen deonInstalled listener, zal de extensie een waarde instellen met behulp van de opslag API., Hierdoor kunnen meerdere uitbreidingscomponenten toegang krijgen tot die waarde en deze bijwerken.
De meeste API ‘ s, inclusief de opslag-API, moeten worden geregistreerd onder het "permissions" veld in het manifest voor de extensie om ze te gebruiken.
navigeer terug naar de pagina Extensiebeheer en klik op de link herladen. Een nieuw veld, inspecteer views, wordt beschikbaar met een blauwe link, achtergrond pagina.,
klik op de link om het achtergrondscript “s console log,”The color is green. ”
Introduceer een gebruikersinterface #
extensies kunnen vele vormen van een gebruikersinterface hebben, maar deze zal een popup gebruiken. Maak en voeg een bestand met de titel popup.html toe aan de map, of download het hier. Deze extensie gebruikt een knop om de achtergrondkleur te veranderen.
net als het achtergrondscript moet dit bestand worden aangeduid als een pop-up in het manifest onder page_action.,
aanwijzing voor werkbalkpictogrammen is ook opgenomen onder page_action in het default_icons veld. Download de images map hier, unzip het, en plaats het in de extensie ” s directory. Werk het manifest bij zodat de extensie weet hoe de beelden te gebruiken.
extensies tonen ook afbeeldingen op de pagina Extensiebeheer, de waarschuwing voor machtigingen en favicon. Deze afbeeldingen worden in het manifest aangeduid onder icons.,
als de extensie in dit stadium opnieuw wordt geladen, zal deze een grijsschaalpictogram bevatten, maar zal geen functionaliteitsverschillen bevatten. Omdat page_action in het manifest wordt aangegeven, is het aan de extensie om de browser te vertellen wanneer de gebruiker kan communiceren met popup.html.
voeg gedeclareerde regels toe aan het achtergrondscript met de declarativeContent API binnen de runtime.onInstalled listener event.
de extensie heeft toestemming nodig om toegang te krijgen tot de declarativeContent API in zijn manifest.,
de browser toont nu een paginaactiepictogram in kleur in de browserwerkbalk wanneer gebruikers naar een URL navigeren die "developer.chrome.com"bevat. Wanneer het pictogram full-color is, kunnen gebruikers erop klikken om pop-up te bekijken.HTML.
de laatste stap voor de popup UI is het toevoegen van kleur aan de knop. Maak en voeg een bestand genaamd https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js met de volgende code toe aan de extensie directory, of hier gedownload.
deze code pakt de knop van popup.html en vraagt de kleurwaarde uit de opslag., Het past vervolgens de kleur als de achtergrond van de knop. Voeg een scripttag toe aan https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js in popup.html.
herlaad de extensie om de groene knop te bekijken.
Layer logic #
de extensie weet nu dat de popup beschikbaar moet zijn voor gebruikers op developer.chrome.com en toont een gekleurde Knop, maar heeft logica nodig voor verdere gebruikersinteractie. Update https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js om de volgende code op te nemen.,
De bijgewerkte code voegt eenonclick gebeurtenis toe op de knop, die een programmatisch geïnjecteerd inhoudsscript activeert. Dit verandert de achtergrondkleur van de pagina dezelfde kleur als de knop. Het gebruik van programmatische injectie zorgt voor door de gebruiker aangeroepen inhoud scripts, in plaats van het automatisch invoegen van ongewenste code in webpagina ‘ s.
het manifest heeft de activeTabtoestemming nodig om de extensie tijdelijke toegang tot de tabs API toe te staan. Dit stelt de extensie in staat om tabs.executeScriptaan te roepen.,
de extensie is nu volledig functioneel! Herlaad de extensie, vernieuw deze pagina, open de pop-up en klik op de knop om het groen te zetten! Echter, sommige gebruikers willen de achtergrond te veranderen in een andere kleur.
Geef gebruikers opties #
de extensie staat momenteel alleen gebruikers toe om de achtergrond in groen te veranderen. Met inbegrip van een Opties pagina geeft gebruikers meer controle over de uitbreiding ” s functionaliteit, verder aanpassen van hun surfervaring.,
begin met het aanmaken van een bestand in de map genaamd options.html en voeg de volgende code toe, of download het hier.
registreer vervolgens de pagina Opties in het manifest,
herlaad de extensie en klik op DETAILS.
Scroll naar beneden op de detailpagina en selecteer Extensieopties om de optiepagina te bekijken, hoewel deze momenteel leeg zal zijn.
De laatste stap is het toevoegen van de optielogica., Maak een bestand genaamd options.js in de extensie directory met de volgende code, of download het hier.
Vier kleuropties worden vervolgens gegenereerd als knoppen op de pagina opties met onclick event listeners. Wanneer de gebruiker op een knop klikt, wordt de kleurwaarde in de globale opslag van de extensie bijgewerkt. Aangezien alle bestanden van de extensie ‘ s trekken de kleur informatie uit globale opslag geen andere waarden moeten worden bijgewerkt.
Gefeliciteerd! De directory heeft nu een volledig functionele, zij het simplistische, Chrome-extensie.
wat volgt?,
- Het Chrome Extensieoverzicht maakt een back-up en vult veel details in over de extensiearchitectuur in het algemeen, en enkele specifieke concepten waarmee ontwikkelaars vertrouwd willen zijn.
- meer informatie over de opties die beschikbaar zijn voor het debuggen van Extensies in de debugging tutorial.
- Chrome-extensies hebben toegang tot krachtige API ‘ s die verder gaan dan wat beschikbaar is op het open web. Chromen.* API ‘ s documentatie loopt door elke API.
- de Guide voor ontwikkelaars bevat tientallen extra links naar stukken documentatie die relevant zijn voor het maken van geavanceerde extensies.,