Dit is een catalogus met gebruikersinterface-elementen die beschikbaar zijn in extensies. Elke vermelding bevat:
- Een afbeelding van het element (indien van toepassing).
- Een beschrijving van waar het voor is.
- Gerelateerde interface-elementen (indien van toepassing).
- Links naar implementatie-instructies en codevoorbeelden.
Deze elementen zijn verschillende manieren om uitbreidingsfuncties aan te roepen. U bent niet verplicht om ze allemaal te implementeren. In sommige gebruiksscenario's wordt er zelfs geen gebruik van gemaakt. Een kortere link kan bijvoorbeeld via een sneltoets op de weergegeven URL inwerken en de verkorte link programmatisch op het klembord plaatsen.
Acties
Een actie is wat er gebeurt wanneer een gebruiker op het actiepictogram voor uw extensie klikt. Een actie kan een extensiefunctie aanroepen met behulp van de Action API of een pop-up openen waarmee gebruikers meerdere extensiefuncties kunnen aanroepen. Vertel gebruikers wat de actie doet met behulp van tooltip .
Zie Een actie implementeren of de actievoorbeelden bekijken om te leren hoe u een actie opbouwt.
Actie iconen
Voor een extensie is minimaal één pictogram nodig om deze weer te geven. Gebruikers klikken op het pictogram om een actie uit te voeren, ongeacht of die actie een extensiefunctie aanroept met behulp van de Action API of een pop-up opent.
U kunt ook een label, hier een 'badge' genoemd, aan het pictogram toevoegen om bijvoorbeeld de status van de extensie aan te geven of dat er acties vereist zijn door de gebruiker.
Zie Een actie implementeren of de actievoorbeelden bekijken om te leren hoe u een actie opbouwt.
Insignes
Badges zijn stukjes opgemaakte tekst die bovenop het actiepictogram worden geplaatst om bijvoorbeeld de status van de extensie aan te geven of dat er acties vereist zijn door de gebruiker. U kunt de tekst van de badge instellen door chrome.action.setBadgeText() aan te roepen en de bannerkleur door chrome.action.setBadgeBackgroundColor() aan te roepen.
Om te leren hoe je een actie opbouwt, zie Een actie implementeren of het Drinkwatermonster .
Commando's
Commando's zijn toetscombinaties die een uitbreidingsfunctie oproepen. Definieer toetscombinaties in het bestand manifest.json en reageer hierop met behulp van de Commands API . Als u wilt leren hoe u een opdracht implementeert, raadpleegt u de API-referentie of het chrome.commands -voorbeeld.
Contextmenu
Er verschijnt een contextmenu voor de alternatieve klik (vaak de rechtermuisknop genoemd) van een muis. Definieer contextmenu's met behulp van de Context Menus API .
Zie de voorbeelden van het contextmenu om te leren hoe u een contextmenu implementeert.
Omnibox
U kunt met gebruikers communiceren via de Chrome-omnibox. Wanneer een gebruiker door de extensie gedefinieerde trefwoorden in de omnibox invoert, bepaalt uw extensie wat de gebruiker in de omnibox ziet. Definieer trefwoorden in manifest.json en reageer hierop met behulp van de Omnibox API .
Zie Triggeracties vanuit de omnibox of het snelle API- referentievoorbeeld om te leren hoe u de omnibox kunt overschrijven.
Pagina's overschrijven
Een extensie kan een van deze ingebouwde Chrome-pagina's overschrijven:
- Geschiedenis
- Nieuw tabblad
- Bladwijzers
Zie Chrome-pagina's overschrijven of het overschrijfvoorbeeld voor meer informatie over het overschrijven van Chrome-pagina's .
Pop-ups
Een pop-up is een actie die een venster weergeeft waarin gebruikers meerdere extensiefuncties kunnen aanroepen. Pop-ups kunnen worden geopend als de gebruiker op het actiepictogram klikt, via een sneltoets of door chrome.action.openPopup() aan te roepen.
Zie Een pop-up toevoegen om te leren hoe u een pop-up maakt. U kunt ook een stap door één van de actievoorbeelden downloaden.
Zijpanelen
Via een zijpaneel kunnen gebruikers naast webpagina's extensiefuncties gebruiken (zie de afbeelding). Een zijpaneel kan aan een enkel lipje of aan een heel venster worden bevestigd. Een zijpaneel wordt bestuurd met behulp van de Side Panel API .
Als u wilt leren hoe u een zijpaneel bouwt, raadpleegt u de gebruiksscenario's voor zijpanelen of bekijkt u de voorbeelden van zijpanelen.
Tooltips
Een tooltip is een manier om, wanneer een gebruiker met de muis over uw actiepictogram beweegt, te laten zien wat de actie van uw extensie doet. Standaard wordt in de tooltip de naam van de extensie weergegeven.
Als u wilt leren hoe u tooltip kunt toevoegen, gebruikt u het lid "default_title" van de "action" -sleutel van de manifestbestanden.
Ontwikkelaars
U kunt aangepaste panelen (welke tabbladen in DevTools worden genoemd) aan DevTools toevoegen met behulp van de DevTools Panels API . Met andere DevTools API's kunt u vensters en netwerkverkeer controleren. U kunt het DevTools- recorderpaneel ook aanpassen. Het eigen Lighthouse-paneel van Chrome DevTools begon zijn leven als een DevTools-extensie.
Meldingen
Plaats berichten in het systeemvak van een gebruiker met behulp van de Notifications API van de extensie of de Notifications API van het webplatform.
Zie Gebruikers op de hoogte stellen voor meer informatie over het gebruik van meldingen.
Thema's
Een thema is een speciaal soort extensie die het uiterlijk van de browser verandert. Thema's zijn verpakt als gewone extensies, maar bevatten geen JavaScript- of HTML-code.
Als u wilt leren hoe u een thema opbouwt, raadpleegt u Wat zijn thema's? .
Andere manieren om met gebruikers te communiceren
In dit gedeelte worden andere manieren beschreven waarop uw extensie met gebruikers kan communiceren. Hoewel ze niet strikt noodzakelijk zijn voor een basisextensie, kunnen ze wel belangrijke onderdelen van uw extensie zijn. Voor veel gebruikers zijn sommige van deze functies absoluut essentieel voor het gebruik van de extensie.
Toegankelijkheid
Voor veel gebruikers is toegankelijkheid letterlijk de gebruikersinterface, en de functies ervan kunnen vaak nuttig zijn voor degenen die toegankelijkheid niet nodig hebben als primair middel voor interactie met uw extensie. Leer de basisprincipes van het toegankelijk maken van uw extensie .
Internationalisering
Praat met gebruikers in hun eigen taal. Leer de interface te internationaliseren .