Componentes da interface do usuário

Este é um catálogo de elementos de interface do usuário disponíveis em extensões. Cada entrada contém:

• Uma imagem do elemento (se aplicável).
• Uma descrição da finalidade dele.
• Elementos de interface relacionados (se aplicável).
• Links para instruções de implementação e amostras de código.

Esses elementos são diferentes maneiras de invocar recursos de extensão. Não é necessário implementar todos eles. Na verdade, alguns casos de uso podem não usar nenhum deles. Por exemplo, um encurtador de links pode agir no URL exibido usando um atalho de teclado e colocar o link encurtado na área de transferência de maneira programática.

Ações

Uma ação é o que acontece quando um usuário clica no ícone de ação da sua extensão. Uma ação pode invocar um recurso de extensão usando a API Action ou abrir um pop-up que permite que os usuários invoquem vários recursos de extensão. Informe aos usuários o que a ação faz usando uma dica.

Figura 1: extensões fixadas (à esquerda) e não fixadas (à direita).

Para aprender a criar uma ação, consulte Implementar uma ação ou examine as amostras de ação.

Ícones de ação

Uma extensão exige pelo menos um ícone para representá-la. Os usuários clicam no ícone para invocar uma ação, seja ela um recurso de extensão usando a API Action ou um pop-up.

Figura 2: ícone da extensão do dicionário do Google (em vermelho).

Também é possível adicionar um rótulo, chamado de "selo", ao ícone para comunicar coisas como o estado da extensão ou que ações são necessárias pelo usuário.

Para aprender a criar uma ação, consulte Implementar uma ação ou examine as amostras de ação.

Selos

Os selos são bits de texto formatado colocados na parte de cima do ícone de ação para indicar coisas como o estado da extensão ou que ações são necessárias pelo usuário. É possível definir o texto do selo chamando chrome.action.setBadgeText() e a cor do banner chamando chrome.action.setBadgeBackgroundColor().

Figura 3: um ícone de extensão sem um selo (à esquerda) e com um selo (à direita).

Para aprender a criar uma ação, consulte Implementar uma ação ou a amostra Beber água.

Comandos

Os comandos são combinações de teclas que invocam um recurso de extensão. Defina combinações de teclas no arquivo manifest.json e responda a elas usando a API Commands. Para aprender a implementar um comando, consulte a referência da API ou a amostra chrome.commands.

Menu de contexto

Um menu de contexto aparece para o clique alternativo (geralmente chamado de clique com o botão direito) de um mouse. Defina menus de contexto usando a API Context Menus.

Figura 4: um menu de contexto e um submenu aninhado.

Para aprender a implementar um menu de contexto, consulte as amostras de menu de contexto.

Omnibox

É possível interagir com os usuários usando a omnibox do Chrome. Quando um usuário insere palavras-chave definidas pela extensão na omnibox, a extensão controla o que o usuário vê na omnibox. Defina palavras-chave no manifest.json e responda a elas usando a API Omnibox.

Figura 5: a omnibox do navegador.

Para aprender a substituir a omnibox, consulte Acionar ações na omnibox ou a amostra de referência rápida da API.

Substituir páginas

Uma extensão pode substituir uma destas páginas integradas do Chrome:

• Histórico
• Nova guia
• Favoritos

Figura 6: um exemplo de página de histórico personalizada.

Para aprender a substituir páginas do Chrome, consulte Substituir páginas do Chrome ou a amostra de substituição.

Pop-ups

Um pop-up é uma ação que mostra uma janela que permite que os usuários invoquem vários recursos de extensão. Os pop-ups podem ser abertos se o usuário clicar no ícone de ação, usando um atalho de teclado ou chamando chrome.action.openPopup().

Figura 7: um exemplo de pop-up.

Para aprender a criar um pop-up, consulte Adicionar um pop-up. Também é possível fazer o download de uma etapa em uma das amostras de ação.

Painéis laterais

Um painel lateral permite que os usuários invoquem recursos de extensão ao lado de páginas da Web (consulte a imagem). Um painel lateral pode ser anexado a uma única guia ou a uma janela inteira. Um painel lateral é controlado usando a API Side Panel.

Figura 8: extensão do dicionário que define a palavra "Extensões".

Para aprender a criar um painel lateral, consulte os casos de uso do painel lateral ou examine as amostras de painel lateral.

Dicas

Uma dica é uma maneira de mostrar, quando um usuário passa o cursor do mouse sobre o ícone de ação, o que a ação da extensão faz. Por padrão, a dica mostra o nome da extensão.

Figura 9: um exemplo de dica para um ícone de ação.

Para aprender a adicionar uma dica, use o "default_title" membro da chave "action" dos arquivos de manifesto.

DevTools

É possível adicionar painéis personalizados (o que as guias são chamadas no DevTools) ao DevTools usando a API DevTools Panels. Outras APIs do DevTools permitem monitorar janelas e tráfego de rede. Também é possível personalizar o painel do gravador do DevTools . O próprio painel do Lighthouse do Chrome DevTools começou como uma extensão do DevTools.

Notificações

Poste mensagens na bandeja do sistema de um usuário usando a API Notifications das extensões ou a API Notifications das plataformas da Web.

Figura 10: uma notificação de extensão no Mac.

Para aprender a usar notificações, consulte Notificar usuários.

Temas

Um tema é um tipo especial de extensão que muda a aparência do navegador. Os temas são empacotados como extensões normais, mas não contêm código JavaScript ou HTML.

Figura 11: um exemplo de tema.

Para aprender a criar um tema, consulte O que são temas?.

Outras maneiras de interagir com os usuários

Esta seção descreve outras maneiras de a extensão interagir com os usuários. Embora não sejam estritamente necessárias para uma extensão básica, elas podem ser partes importantes da extensão. Para muitos usuários, alguns desses recursos são absolutamente essenciais para usar a extensão.

Acessibilidade

Para muitos usuários, a acessibilidade é literalmente a interface do usuário, e os recursos dela podem ser úteis para quem não precisa de acessibilidade como meio principal de interação com a extensão. Aprenda os conceitos básicos de tornar sua extensão acessível.

Internacionalização

Fale com os usuários na língua deles. Aprenda a internacionalizar a interface.