Componenten van de gebruikersinterface

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 .

Zowel een vastgezette extensie als een niet-vastgezette extensie.
Figuur 1 : Vastgezette (links) en niet-vastgezette (rechts) extensies.

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.

Het pictogram voor de Google-woordenboekextensie.
Figuur 2 : Pictogram voor de Google-woordenboekextensie (in rood).

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.

Een extensiepictogram zonder badge en met badge.
Figuur 3 : Een extensiepictogram zonder badge (links) en met badge (rechts).

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 .

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

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 .

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

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
Een voorbeeld van een aangepaste geschiedenispagina.
Figuur 6 : Een voorbeeld van een aangepaste geschiedenispagina.

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.

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

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 .

Woordenboekextensie die het woord definieert
Figuur 8 : Woordenboekextensie die het woord "Extensies" definieert.

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.

Een voorbeeld van tooltip voor een actiepictogram.
Figuur 9 : Een voorbeeld van tooltip voor een actiepictogram.

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.

Een extensiemelding op mac.
Figuur 10 : Een extensiemelding op 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 zijn verpakt als gewone extensies, maar bevatten geen JavaScript- of HTML-code.

Een voorbeeldthema.
Figuur 11 : Een voorbeeldthema.

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 .