Ações de extensão no Manifesto V3

Simeon Vincent
Simeon Vincent

Desde o lançamento das extensões do Chrome, a plataforma permite que os desenvolvedores exponham a funcionalidade de extensões diretamente na interface do Chrome de nível superior usando ações. Uma ação é um botão de ícone que pode abrir um pop-up ou acionar alguma funcionalidade na extensão. Antes, o Chrome oferecia suporte para dois tipos de ações: ações do navegador e de páginas. O Manifest V3 mudou isso consolidando a funcionalidade em uma nova API chrome.action.

Um breve histórico das ações da extensão

Embora o chrome.action seja novo no Manifesto V3, a funcionalidade básica que ele fornece é quando as extensões estavam na versão estável pela primeira vez, em janeiro de 2010. A primeira versão estável da plataforma de extensões do Chrome era compatível com dois tipos diferentes de ações: ações do navegador e ações de página.

As ações do navegador permitiram que os desenvolvedores de extensões exibissem um ícone "na barra de ferramentas principal do Google Chrome, à direita da barra de endereço" (fonte) e forneceram aos usuários uma maneira fácil de acionar a funcionalidade de extensão em qualquer página. As ações de página, por outro lado, tinham o objetivo de "representar ações que podem ser realizadas na página atual, mas que não são aplicáveis a todas as páginas" (fonte).

Uma ação de página (à esquerda) aparece na omnibox, indicando que a extensão pode fazer algo na página. Uma ação do navegador (à direita) estará sempre visível.

Em outras palavras, as ações do navegador deram aos desenvolvedores de extensões uma superfície de interface persistente no navegador, enquanto as ações na página apareciam apenas quando a extensão poderia fazer algo útil na página atual.

Os dois tipos de ações eram opcionais. Portanto, um desenvolvedor de extensão poderia optar por não fornecer ações, uma ação da página ou do navegador. Não é permitido especificar várias ações.

Cerca de seis anos depois, o Chrome 49 introduziu um novo paradigma de interface do usuário para extensões. Para ajudar os usuários a entender quais extensões eles tinham, o Chrome começou a exibir todas as extensões ativas à direita da omnibox. Os usuários poderiam "sobrecarregar" extensões no menu do Google Chrome se quisessem.

Ícones de extensão ocultos aparecem no menu do Google Chrome.

Para exibir um ícone para cada extensão, essa atualização também gerou duas mudanças importantes no comportamento das extensões na interface do Chrome. Primeiro, todas as extensões começaram a exibir ícones na barra de ferramentas. Se a extensão não tivesse um ícone, o Chrome geraria um automaticamente para ela. Em segundo lugar, as ações de página foram movidas para a barra de ferramentas ao lado das ações do navegador e receberam uma affordance para diferenciar os estados "mostrar" e "ocultar".

Uma ação de página desativada (à esquerda) é renderizada uma imagem em escala de cinza na barra de ferramentas, enquanto uma ativada (à direita) aparece em cores.

Essa mudança permitiu que as extensões de ação de página continuassem funcionando conforme o esperado, mas também diminuiu a função das ações ao longo do tempo. Um dos efeitos da reformulação da interface foi que as ações da página foram efetivamente consumidas pelas ações do navegador. Como todas as extensões apareciam na barra de ferramentas, os usuários esperavam que clicar no ícone de uma extensão na barra de ferramentas invocasse a extensão, e as ações do navegador se tornassem uma interação cada vez mais importante para as extensões do Chrome.

Mudanças no Manifesto V3

A interface e as extensões do Chrome continuaram evoluindo nos anos seguintes à reformulação da interface da extensão de 2016, mas as ações do navegador e da página permaneceram praticamente inalteradas. Ou seja, pelo menos até começarmos a planejar como modernizar a plataforma de extensões com o Manifesto V3.

Ficou claro para a equipe de extensões que as ações do navegador e de páginas eram cada vez mais uma distinção sem significado. E, para piorar, as sutis diferenças de comportamento dificultaram para os desenvolvedores determinar qual deles usar. Percebemos que poderíamos resolver esses problemas combinando a ação do navegador e da página em uma única "ação".

Entre na API Action. chrome.action é mais diretamente análogo a chrome.browserAction, mas tem algumas diferenças notáveis.

Primeiro, chrome.action introduz um novo método chamado getUserSettings(). Esse método oferece aos desenvolvedores de extensões uma maneira de verificar se o usuário fixou a ação da extensão na barra de ferramentas.

let userSettings = await chrome.action.getUserSettings();
console.log(`Is the action pinned? ${userSettings.isOnToolbar ? 'Yes' : 'No'}.`);

"getUserSettings" pode parecer um nome um pouco incomum para essa funcionalidade em comparação, digamos, "isPinned", mas o histórico de ações no Chrome mostra que a interface do navegador muda mais rapidamente do que as APIs de extensão. Assim, nosso objetivo com essa API é expor as preferências do usuário relacionadas à ação em interfaces genéricas para minimizar a rotatividade futura da API. Ele também permite que outros fornecedores de navegador exponham conceitos de IU específicos do navegador no objeto UserSettings retornado por esse método.

Em segundo lugar, o ícone e o estado ativado/desativado da ação de uma extensão podem ser controlados usando a API Declarative Content. Isso é importante porque permite que as extensões reajam ao comportamento de navegação do usuário sem acessar o conteúdo ou mesmo os URLs das páginas que ele visita. Por exemplo, vamos ver como uma extensão pode ativar sua ação quando o usuário visita páginas em example.com.

// Manifest V3
chrome.runtime.onInstalled.addListener(() => {
  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {hostSuffix: '.example.com'},
          })
        ],
        actions: [new chrome.declarativeContent.ShowAction()]
      }
    ]);
  });
});

O código acima é quase idêntico ao que uma extensão faria com uma ação de página. A única diferença é que no Manifesto V3 usamos declarativeContent.ShowAction em vez de declarativeContent.ShowPageAction no Manifesto V2.

Por fim, os bloqueadores de conteúdo podem usar o método setExtensionActionOptions da API declarativeNetRequest para exibir o número de solicitações bloqueadas pela extensão para uma determinada guia. Esse recurso é importante porque permite que os bloqueadores de conteúdo mantenham os usuários finais informados sem expor metadados de navegação potencialmente confidenciais à extensão.

Resumo

Uma das principais motivações do Manifesto V3 foi a modernização da plataforma de extensões do Chrome. Em muitos casos, isso significava mudar para novas tecnologias, mas também simplificar nossa superfície de API. Esse era o nosso objetivo.

Espero que esta postagem tenha ajudado a esclarecer melhor esse aspecto da plataforma Manifest V3. Para saber mais sobre como a equipe do Chrome aborda o futuro das extensões de navegador, consulte as páginas Visão da plataforma e Visão geral do Manifesto V3 na nossa documentação para desenvolvedores. Você também pode conversar sobre as extensões do Chrome com outros desenvolvedores no Grupo do Google chromium-extensions.