Este é um catálogo de elementos da interface do usuário disponíveis em extensões. Cada entrada contém:
- Uma imagem do elemento (se aplicável).
- Uma descrição do que ele serve.
- Elementos de 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 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 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 aos usuários invocar vários recursos de extensão. Use uma dica para informar aos usuários o que a ação faz.
Para saber como 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 um pop-up.
Você também pode adicionar um marcador, aqui chamado de "emblema", ao ícone para comunicar coisas como o estado da extensão ou que ações são necessárias para o usuário.
Para saber como criar uma ação, consulte Implementar uma ação ou examine os exemplos de ação.
Selos
Os selos são pequenos pedaços de texto formatado colocados sobre o ícone de ação para indicar o estado da extensão ou que ações são necessárias para o usuário. É possível definir o texto do selo chamando chrome.action.setBadgeText() e a cor do banner chamando chrome.action.setBadgeBackgroundColor().
Para aprender a criar uma ação, consulte Implementar uma ação ou o exemplo Beber água.
Comandos
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 o exemplo chrome.commands.
Menu de contexto
Um menu de contexto aparece para o clique alternativo (frequentemente chamado de clique direito) de um mouse. Defina menus de contexto usando a API de menus de contexto.
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 digita 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.
Para aprender a substituir a omnibox, consulte "Ações de acionamento" na omnibox ou citar o exemplo 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
Para aprender a modificar as 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 que permite aos usuários invocar 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().
Para aprender a criar um pop-up, consulte Adicionar um pop-up. Você também pode fazer o download de uma etapa 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). Um painel lateral pode ser anexado a uma única guia ou a uma janela inteira. Um painel lateral é controlado pela API Side Panel.
Para aprender a criar um painel lateral, consulte os casos de uso do painel lateral ou examine os exemplos dele.
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.
Para saber como adicionar uma dica, use o membro "default_title" da chave "action" dos arquivos de manifesto.
DevTools
É possível adicionar painéis personalizados (as guias 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. Chrome DevTools próprio painel do Lighthouse começou a ser uma extensão do DevTools.
Notificações
Poste mensagens na bandeja do sistema de um usuário usando as extensões API Notifications ou a API Notifications de plataformas da Web.
Para saber como usar as notificações, consulte Notificar os 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.
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 interação da extensão com os usuários. Embora não sejam estritamente necessários para uma extensão básica, eles podem ser partes importantes da sua extensão. Para muitos usuários, alguns desses recursos são absolutamente essenciais para o uso da extensão.
Acessibilidade
Para muitos usuários, a acessibilidade literalmente é a interface do usuário, e seus recursos muitas vezes podem ser úteis para quem não precisa da acessibilidade como o principal meio de interagir com sua extensão. Aprenda as noções básicas de tornar sua extensão acessível.
Internacionalização
Fale com os usuários no idioma deles. Aprenda a internacionalizar a interface.