Skip to content

Extensão do navegador

Este artigo descreve como usar o Braze Web SDK em suas extensões de navegador (Google Chrome, Firefox).

Integre o Braze Web SDK em sua extensão de navegador para coletar análises de dados e exibir mensagens personalizadas para os usuários. Isso inclui as extensões do Google Chrome e os complementos do Firefox.

O que é suportado

Em geral, como as extensões são HTML e JavaScript, você pode usar a Braze para o seguinte:

  • Analytics: Capture eventos personalizados, atributos e até mesmo identifique usuários recorrentes com a sua extensão. Use essas características de perfil para potencializar o envio de mensagens entre canais.
  • Mensagens no app: Dispare mensagens no app quando os usuários realizarem uma ação em sua extensão, usando nosso envio de mensagens HTML nativo ou personalizado.
  • Content Cards: Adicione um feed de cartões nativos à sua extensão para integração ou conteúdo promocional.
  • Push para a web: Envie notificações oportunas mesmo quando sua página da web não estiver aberta no momento.

O que não é suportado

  • Os service workers não são suportados pelo Braze Web SDK, no entanto, isso está no planejamento para consideração futura.

Tipos de extensão

A Braze pode ser incluída nas seguintes áreas de sua extensão:

Área Informações O que é suportado
Página pop-up A página Popup é uma caixa de diálogo que pode ser mostrada aos usuários quando eles clicam no ícone da sua extensão na barra de ferramentas do navegador. Análise de dados, mensagens no app e Content Cards
Scripts em segundo plano Scripts em segundo plano (somente Manifest v2) permitem que sua extensão inspecione e interaja com a navegação do usuário ou modifique páginas da web (por exemplo, como os bloqueadores de anúncios detectam e alteram o conteúdo das páginas). Análise de dados, mensagens no app e Content Cards.

Os scripts em segundo plano não são visíveis para os usuários, portanto, para o envio de mensagens, seria necessário comunicar-se com as guias do navegador ou com a página pop-up ao exibir mensagens.
Páginas de opções A página Options permite que os usuários alternem as configurações na extensão. É uma página HTML autônoma que abre uma nova guia. Análise de dados, mensagens no app e Content Cards

Permissões

Não são necessárias permissões adicionais no seu manifest.json ao integrar o SDK da Braze (braze.min.js) como um arquivo local empacotado com sua extensão.

No entanto, se você usar o Google Tag Manager, ou fizer referência ao SDK da Braze a partir de uma URL externa, ou tiver definido uma política de segurança de conteúdo rigorosa para sua extensão, será necessário ajustar a configuração content_security_policy no manifest.json para permitir fontes de script remotas.

Primeiros passos

Para integrar o Braze Web SDK, você primeiro precisará baixar uma cópia da biblioteca JavaScript mais recente. Isso pode ser feito usando NPM ou baixando diretamente do Braze CDN.

Como alternativa, se você preferir usar o Google Tag Manager ou usar uma cópia hospedada externamente do Braze SDK, lembre-se de que o carregamento de recursos externos exigirá que você ajuste a configuração content_security_policy no seu manifest.json.

Depois de baixar, copie o arquivo braze.min.js em algum lugar do diretório da sua extensão.

Para adicionar a Braze a um popup de extensão, faça referência ao arquivo JavaScript local no seu popup.html, como faria em um site normal. Se estiver usando o Google Tag Manager, você pode adicionar a Braze usando nossos modelos do Google Tag Manager.

1
2
3
4
5
6
7
8

<html>
    <title>popup.html</title>
    <!-- Add the Braze library -->
    <script src="/relative/path/to/braze.min.js"></script>
    <script>
    // Initialize Braze here
    </script>
</html>

Script em segundo plano (somente Manifest v2)

Para usar a Braze no script em segundo plano da sua extensão, adicione a biblioteca Braze ao manifest.json no array background.scripts. Isso tornará a variável global braze disponível no contexto do seu script em segundo plano.

1
2
3
4
5
6
7
8
9

{
    "manifest_version": 2,
    "background": {
        "scripts": [
            "relative/path/to/braze.min.js",
            "background.js"
        ]
    }
}

Página de opções

Se você usar uma página de opções (por meio das propriedades do manifesto options ou options_ui), poderá incluir a Braze da mesma forma que faria nas instruções do popup.html.

Inicialização

Depois que o SDK for incluído, você poderá inicializar a biblioteca como de costume.

Como não há suporte para cookies em extensões de navegador, você pode desativar os cookies inicializando com noCookies: true.

1
2
3
4
5

braze.initialize("YOUR-API-KEY-HERE", {
    baseUrl: "YOUR-API-ENDPOINT",
    enableLogging: true,
    noCookies: true
});

Para saber mais sobre as opções de inicialização suportadas, visite a referência do Web SDK.

Push

As caixas de diálogo popup de extensão não permitem solicitações de push (elas não têm a barra de URL na navegação). Portanto, para registrar e solicitar permissão de push na caixa de diálogo popup de uma extensão, será necessário usar uma solução alternativa de domínio, conforme descrito em Domínio push alternativo.
New Stuff!