4

Como criar notificações Desktop para usar em web-extensões (Firefox, Chrome e etc) e também gostaria de saber se existe alguma diferença entre Chrome, Opera e Firefox?

Nota: isto é uma pergunta tutorial, leia mais em:

1 Resposta 1

6

existe alguma diferença entre Chrome, Opera e Firefox?

Atualmente existem sim algumas diferenças, mas são muitos especificas, no caso vou citar apenas sobre o objeto chrome., no Firefox ele é suportado, no entanto o padrão dele é o objeto browser. e então talvez no futuro chrome. possa ser removido, no entanto para garantir uma retro-compatibilidade você pode criar algo assim:

var chrome = chrome||browser;

Ou então isolar o escopo com IIFE

(function (chrome) {
    //seu codigo vai aqui
})(chrome||browser);

Outra situação especifica das notificações Desktop que muda entre os navegadores é o requireInteraction, que não é suportado pelo Firefox e Opera, apenas pelo Chrome, no proximo exemplo abaixo tem uma maneira de contornar a exception causada no Firefox, mas infelizmente não é possivel forçar que o usuário interaja, já que ainda é uma deficiência dos demais navegadores.


Como criar notificações?

As notificações tem as seguintes propriedades básicas:

  • type: tipo da notificação, a maior parte dos navegadores só suporta o basic
  • title titulo da notificação
  • message: mensagem da notificação
  • requireInteraction: se definido como true a notificação não irá fechar sozinha, será necessário usar chrome.notifications.clear(<id>);

Para usar será necessário adicionar no seu manifest.json a permissão notifications:

"permissions": [
    "notifications"
]

Um exemplo simples é seria algo como:

function notificar(id, titulo, texto, imagem)
{
    var props = {
        "type": "basic",
        "title": titulo,
        "message": texto,
        "requireInteraction": true //Só fecha a notificação quando a pessoa clicar
    };

    if (imagem) {
        //Pega a imagem dentro do add-in com getURL
        props.iconUrl = browser.extension.getURL(imagem);
    }

    try {
        chrome.notifications.create(id, props, function() {});
    } catch (ee) {
        //Firefox não suporta requireInteraction e causa uma exception então o código abaixo é para tentar novamente

        //Deleta o requireInteraction se não suportado
        delete props.requireInteraction;

        //Gera a notificação sem requireInteraction
        chrome.notifications.create(id, props, function() {});
    }
}

E para detectar o click no popup-notification gerado use:

//Quando clicar em qualquer notificação vai disparar este evento e pelo parametro "id" poderá detectar qual notificação você fechou
chrome.notifications.onClicked.addListener(function(id, byUser) {
    //Fecha/remove a notificação após o clique
    chrome.notifications.clear(id);
});

O uso ficará assim:

notificar(1, "foo bar", "Olá mundo");
notificar(2, "foo bar", "Olá mundo");
notificar(3, "foo bar", "Olá mundo", "icones/image.png");

Exemplo de teste

O código poderia ser aplicado para testes assim no background.js:

(function (chrome) {

    function notificar(id, titulo, texto, imagem)
    {
        var props = {
            "type": "basic",
            "title": titulo,
            "message": texto,
            "requireInteraction": true
        };

        if (imagem) {
            props.iconUrl = browser.extension.getURL(imagem);
        }

        try {
            chrome.notifications.create(id, props, function() {});
        } catch (ee) {
            //Firefox não suporta requireInteraction e causa uma exception então o código abaixo é para tentar novamente

            delete props.requireInteraction;

            chrome.notifications.create(id, props, function() {});
        }
    }


    chrome.notifications.onClicked.addListener(function(id, byUser) {
        chrome.notifications.clear(id); //Fecha/remove
    });

    //Gerar uma notificação aleatória a cada 5 segundos
    setTimeout(function () {
         notificar(
             Date.now(), //Gera uma ID por tempo, a ID pode ser qualquer coisa, só não pode ser repetida
             'Titulo',   // Titulo da notificação
             'Foo Bar',  // Texto na notificação
             'icones/icone1.png' //Ícone opcional
         );
    }, 5000);

})(chrome||browser); //Talvez no futuro o Firefox só suporte pelo "browser." isso fará ser retrocompativel

É importante notar que as notificações não se mantem se fechar e abrir novamente o navegador, para poder restaurar elas será necessário usar algo como localStorage para salvar os dados e toda vez que reabrir o navegador gerar a partir de um localStorage e ao disparar o evento chrome.notifications.onClicked.addListener deverá remover os dados das notificações do localStorage também.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .