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 sua extensão. Uma ação invoca um recurso de extensão usando a API Action ou abre um popup. 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 de manifesto da extensão. Consulte a seção do 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 é acionado quando um pop-up é 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 corresponderem aos elementos na página. Quando o ícone de ação de uma extensão estiver desativado, o ícone ficará esmaecido. Se o usuário clicar no ícone desativado, o menu de contexto da extensão será exibido.

Selo de ação

Insígnias são pedaços de texto formatado colocados na parte superior do ícone de ação para indicar coisas como o estado da extensão ou que ações são exigidas pelo usuário. Para demonstrar isso, o exemplo Drink Water mostra um selo com a palavra "ON" para mostrar ao usuário que um alarme foi definido com sucesso e não aparece quando a extensão está ociosa. Os selos podem conter até quatro caracteres.

Chame chrome.action.setBadgeText() para definir o texto do selo 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" na 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"
  }
...
}

Também é possível definir ou atualizar as dicas chamando action.setTitle()`. Se nenhuma dica for definida, o nome da extensão será exibido.