Implementar uma ação

Uma ação é o que acontece quando um usuário clica no ícone da barra de ferramentas, geralmente chamado de ícone de ação da extensão. Uma ação invoca um recurso de extensão usando a API Action ou abre um pop-up. Nesta página, mostramos como invocar um recurso de extensão. Para usar um pop-up, consulte Adicionar um pop-up.

Registrar a ação

Para usar a API browser.action, adicione a chave "action" ao arquivo manifesto da extensão. Consulte a seção de manifesto da referência da API browser.action para uma descrição completa das propriedades opcionais desse campo.

manifest.json:

{
  "name": "My Awesome action Extension",
 ...
  "action": {
   ...
  }
 ...
}

Responder à ação

Registre um manipulador onClicked para quando o usuário clicar no ícone de ação. Esse evento não é acionado se um pop-up estiver registrado no arquivo manifest.json.

service-worker.js:

browser.action.onClicked.addListener((tab) => {
  browser.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

Ativar a ação condicionalmente

A API browser.declarativeContent permite ativar o ícone de ação da extensão com base no URL da página ou quando os seletores de CSS correspondem aos elementos na página. Quando o ícone de ação de uma extensão está desativado, ele fica esmaecido. Se o usuário clicar no ícone desativado, o menu de contexto da extensão vai aparecer.

Um ícone de ação desativado.

Selo de ação

Os selos são partes de texto formatado colocadas em 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. Para demonstrar isso, o exemplo Beber água mostra um selo com "ON" para indicar ao usuário que ele definiu um alarme. Quando a extensão está inativa, nada é mostrado. Os selos podem ter até quatro caracteres.

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

Defina o texto do selo chamando browser.action.setBadgeText() e a cor do plano de fundo chamando browser.action.setBadgeBackgroundColor().

service-worker.js:

browser.action.setBadgeText({text: 'ON'});
browser.action.setBadgeBackgroundColor({color: '#4688F1'});

Dica

Registre as dicas no campo "default_title", na chave "action" do arquivo manifest.json.

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

Você também pode definir ou atualizar dicas chamando action.setTitle(). Se nenhuma dica for definida, o nome da extensão será exibido.