Componenten van de gebruikersinterface

Dit is een catalogus van gebruikersinterface-elementen die beschikbaar zijn in extensies. Elk item bevat:

  • Een afbeelding van het element (indien van toepassing).
  • Een beschrijving van het doel ervan.
  • Gerelateerde interface-elementen (indien van toepassing).
  • Links naar implementatie-instructies en codevoorbeelden.

Deze elementen zijn verschillende manieren om extensiefuncties aan te roepen. U hoeft ze niet allemaal te implementeren. Sterker nog, sommige gebruiksscenario's gebruiken er misschien geen enkele. Een linkverkorter zou bijvoorbeeld de weergegeven URL kunnen bewerken met een sneltoets en de verkorte link programmatisch naar het klembord kopiëren.

Acties

Een actie is wat er gebeurt wanneer een gebruiker op het actie-icoon van uw extensie klikt. Een actie kan een extensiefunctie activeren via de Action API of een pop-upvenster openen waarmee gebruikers meerdere extensiefuncties kunnen gebruiken. Vertel gebruikers wat de actie doet met behulp van een tooltip .

Zowel een verlengstuk met pinnen als een verlengstuk zonder pinnen.
Afbeelding 1 : Verlengstukken met pinnen (links) en zonder pinnen (rechts).

Om te leren hoe je een actie bouwt, raadpleeg je 'Een actie implementeren' of bekijk je de actievoorbeelden .

Actiepictogrammen

Een extensie heeft minimaal één pictogram nodig om deze te representeren. Gebruikers klikken op het pictogram om een ​​actie uit te voeren, of die actie nu een extensiefunctie activeert via de Action API of een pop-upvenster opent.

Het pictogram voor de Google woordenboek-extensie.
Afbeelding 2 : Pictogram voor de Google woordenboek-extensie (in rood).

Je 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 van de gebruiker worden vereist.

Om te leren hoe je een actie bouwt, raadpleeg je 'Een actie implementeren' of bekijk je de actievoorbeelden .

Badges

Badges zijn stukjes opgemaakte tekst die boven het actie-icoon worden geplaatst om bijvoorbeeld de status van een extensie aan te geven of dat er acties van de gebruiker worden vereist. Je kunt de tekst van de badge instellen door chrome.action.setBadgeText() aan te roepen en de bannerkleur door chrome.action.setBadgeBackgroundColor() aan te roepen.

Een extensie-icoon zonder badge en met een badge.
Afbeelding 3 : Een extensie-icoon zonder badge (links) en met badge (rechts).

Om te leren hoe je een actie opbouwt, zie ' Een actie implementeren' of het voorbeeld 'Water drinken '.

Commando's

Commando's zijn toetscombinaties die een extensiefunctie activeren. Definieer toetscombinaties in het manifest.json-bestand en reageer erop met behulp van de Commands API . Zie de API-referentie of het chrome.commands -voorbeeld voor meer informatie over het implementeren van een commando.

Contextmenu

Een contextmenu verschijnt bij een alternatieve muisklik (vaak de rechtermuisklik genoemd). Definieer contextmenu's met behulp van de Context Menus API .

Een genest contextmenu.
Afbeelding 4 : Een contextmenu en een genest submenu.

Om te leren hoe je een contextmenu implementeert, bekijk je de voorbeelden van contextmenu's .

Omnibox

Je kunt met gebruikers communiceren via de Chrome-omnibox. Wanneer een gebruiker door de extensie gedefinieerde zoekwoorden in de omnibox invoert, bepaalt jouw extensie wat de gebruiker in de omnibox ziet. Definieer zoekwoorden in het manifest.json-bestand en reageer erop met behulp van de Omnibox API .

De omnibox van de browser.
Afbeelding 5 : De omnibox van de browser.

Zie 'Activeringen vanuit de omnibox activeren' of het voorbeeld van de snelle API-referentie voor meer informatie over het overschrijven van de omnibox.

Override-pagina's

Een extensie kan een van deze ingebouwde Chrome-pagina's overschrijven:

  • Geschiedenis
  • Nieuw tabblad
  • Bladwijzers
Een voorbeeld van een aangepaste geschiedenispagina.
Afbeelding 6 : Een voorbeeld van een aangepaste geschiedenispagina.

Zie Chrome-pagina's overschrijven of het voorbeeld voor meer informatie over het overschrijven van Chrome-pagina's .

Pop-ups

Een pop-up is een actie die een venster weergeeft waarmee gebruikers verschillende functies van een extensie kunnen oproepen. Pop-ups kunnen worden geopend door op het actie-icoon te klikken, via een sneltoets of door chrome.action.openPopup() aan te roepen.

Een voorbeeld van een pop-up.
Afbeelding 7 : Een voorbeeld van een pop-up.

Om te leren hoe je een pop-up maakt, zie Een pop-up toevoegen . Je kunt ook een stapsgewijze handleiding van een van de actievoorbeelden downloaden.

Zijpanelen

Met een zijpaneel kunnen gebruikers extensiefuncties naast webpagina's oproepen (zie de afbeelding). Een zijpaneel kan aan een enkel tabblad of aan een volledig venster worden gekoppeld. Een zijpaneel wordt beheerd met behulp van de Side Panel API .

Woordenboekuitbreiding die het woord definieert
Afbeelding 8 : Woordenboekuitbreiding die het woord "Uitbreidingen" definieert.

Om te leren hoe je een zijpaneel bouwt, bekijk je de toepassingsvoorbeelden van zijpanelen of de voorbeelden van zijpanelen.

Tooltips

Een tooltip is een manier om te laten zien wat de actie van je extensie doet wanneer een gebruiker met de muis over het actie-icoon beweegt. Standaard toont de tooltip de naam van de extensie.

Een voorbeeld van een tooltip voor een actie-icoon.
Afbeelding 9 : Een voorbeeld van een tooltip voor een actie-icoon.

Om te leren hoe je een tooltip toevoegt, gebruik je het lid "default_title" van de sleutel "action" in de manifestbestanden.

Ontwikkeltools

Je kunt aangepaste panelen (zoals tabbladen in DevTools worden genoemd) toevoegen aan DevTools met behulp van de DevTools Panels API . Andere DevTools API's stellen je in staat om vensters en netwerkverkeer te monitoren. Je kunt ook het opnamepaneel van DevTools aanpassen. Het Lighthouse-paneel van Chrome DevTools zelf is oorspronkelijk ontwikkeld als een DevTools-extensie.

Meldingen

Verstuur berichten naar het systeemvak van een gebruiker met behulp van de Notifications API van de extensie of de Notifications API van het webplatform.

Een extensie-melding op een Mac.
Afbeelding 10 : Een extensiemelding op een Mac.

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 worden verpakt zoals gewone extensies, maar ze bevatten geen JavaScript- of HTML-code.

Figuur 11 : Een voorbeeldthema.

Om te leren hoe je een thema bouwt, zie 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 deze niet strikt noodzakelijk zijn voor een basisextensie, kunnen ze belangrijke onderdelen van uw extensie vormen. Voor veel gebruikers zijn sommige van deze functies zelfs 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 als primair middel nodig hebben om met uw extensie te interageren. Leer de basisprincipes van het toegankelijk maken van uw extensie .

Internationalisering

Spreek gebruikers aan in hun eigen taal. Leer hoe je de interface internationaliseert .