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 do propósito dele.
  • Elementos da interface relacionados (se aplicável).
  • Links para instruções de implementação e exemplos de código.

Esses elementos são maneiras diferentes de invocar recursos de extensão. Não é necessário implementar todos eles. Na verdade, alguns casos de uso podem não usar nenhuma delas. Por exemplo, um link mais curto pode atuar no URL exibido usando um atalho de teclado e colocar o link encurtado na área de transferência de forma 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. Use uma dica para informar aos usuários o que a ação faz.

Uma extensão fixada e outra liberada.
Figura 1: extensões fixadas (à esquerda) e liberadas (à direita).

Para aprender a criar uma ação, consulte Implementar uma ação ou examine os exemplos de ação.

Ícones de ação

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

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

Você também pode adicionar um rótulo, aqui chamado de "selo", ao ícone para comunicar informações como o estado da extensão ou que as ações são exigidas pelo usuário.

Para aprender a criar uma ação, consulte Implementar uma ação ou examine os exemplos de ação.

Selos

Badges são trechos de texto formatados colocados sobre o ícone de ação para indicar coisas como o estado da extensão ou que ações são exigidas pelo usuário. É possível definir o texto do selo chamando chrome.action.setBadgeText() e a cor do banner chamando chrome.action.setBadgeBackgroundColor().

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

Para saber como criar uma ação, consulte Implementar uma ação ou beber água.

Comandos

Comandos são combinações de teclas que invocam um recurso de extensão. Defina as 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 o exemplo chrome.commands (link em inglês).

Menu de contexto

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

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

Para aprender a implementar um menu de contexto, consulte os exemplos de menu de contexto.

omnibox

Você pode interagir com os usuários usando a omnibox do Chrome. Quando um usuário insere palavras-chave definidas por extensão na omnibox, sua extensão controla o que o usuário vê nela. Defina palavras-chave no manifest.json e responda a elas usando a API omnibox.

A omnibox do navegador.
Figura 5: a omnibox do navegador.

Para aprender a modificar a omnibox, consulte "Ações de acionamento" na omnibox ou o exemplo de referência rápida de API.

Substituir páginas

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

  • Histórico
  • Nova guia
  • Marcadores de livros
Exemplo de página de histórico personalizada.
Figura 6: exemplo de uma página de histórico personalizada.

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

Pop-ups

Um pop-up é uma ação que mostra uma janela permitindo que os usuários invoquem vários recursos de extensão. Os pop-ups só podem ser abertos se o usuário clicar no ícone de ação. Uma extensão não pode abrir o pop-up de forma programática.

Exemplo de pop-up.
Figura 7: exemplo de um pop-up.

Para aprender a criar um pop-up, consulte Adicionar um pop-up. Também é possível fazer o download de uma das etapas de um dos exemplos de ações.

Painéis laterais

Um painel lateral permite que os usuários invoquem recursos de extensão ao lado de páginas da Web (veja a imagem). É possível anexar um painel lateral a uma única guia ou a uma janela inteira. Um painel lateral é controlado usando a API Side Panel.

Extensão de dicionário que define a palavra
Figura 8: extensão de dicionário definindo a palavra "Extensions"
.

Para aprender a criar um painel lateral, consulte os casos de uso ou os exemplos.

Dicas

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

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

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

DevTools

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

Notificações

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

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

Para saber como usar as 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.

Um tema de exemplo.
Figura 11: tema de exemplo.

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

Outras formas de interagir com os usuários

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

Acessibilidade

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

Internacionalização

Falar com os usuários no próprio idioma. Aprenda a internacionalizar a interface.