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 chrome.action, adicione a chave "action" ao arquivo manifest da extensão. Consulte a seção de manifesto da Referência da API chrome.action para uma descrição completa das propriedades opcionais desse campo.

manifest.json:

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

Responder à ação

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

service-worker.js:

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

Ativar a ação condicionalmente

A API chrome.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 será exibido.

Ícone de ação desativada
Um ícone de ação desativado.

Selo de ação

Os selos são trechos de texto formatados colocados sobre o ícone de ação para indicar elementos como o estado da extensão ou que o usuário precisa realizar ações. Para demonstrar isso, o exemplo Drink Water mostra um selo com "ATIVADO" para mostrar ao usuário que ele definiu um alarme e não exibe nada quando a extensão está inativa. Os selos podem ter até quatro caracteres.

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

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

service-worker.js:

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

Dica

Registre as dicas no campo "default_title" da chave "action" no 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.