How do I create desktop notifications in Chrome extensions?

Asked

Viewed 699 times

4

javascript google-chrome-extension firefox-extension

1 answer

6


there is some difference between Chrome, Opera and Firefox?

Currently there are some differences, but they are very specific, in this case I will quote only on the object chrome., in Firefox it is supported, however its default is the object browser. and then maybe in the future chrome. can be removed, however to ensure a backward compatibility you can create something like this:

var chrome = chrome||browser;

Or else isolate the scope with IIFE

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

Another situation specifies of the Desktop notifications that changes between browsers is the requireInteraction, that is not supported by Firefox and Opera, only by Chrome, in the next example below has a way to bypass the Exception caused in Firefox, but unfortunately it is not possible to force the user to interact, since it is still a deficiency of other browsers.

How to create notifications?

Notifications have the following basic properties:

  • type: notification type, most browsers only support the basic
  • title title of the notification
  • message: notification message
  • requireInteraction: if set to true the notification will not close alone, you will need to use chrome.notifications.clear(<id>);

To use it will be necessary to add in your manifest.json the permission notifications:

"permissions": [
    "notifications"
]

A simple example is something like:

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() {});
    }
}

And to detect the click on the generated popup-notification 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);
});

The use will look like this:

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

Test example

The code could be applied to tests like this in 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

It is important to note that notifications do not keep closing and reopening the browser, in order to restore them you will need to use something like localStorage to save the data and every time you reopen the browser generate from a localStorage and by firing the event chrome.notifications.onClicked.addListener should remove the notification data from localStorage also.

Browser other questions tagged javascript google-chrome-extension firefox-extension

You are not signed in. Login or sign up in order to post.