Notificações avançadas com o webKit

Use as notificações avançadas na área de trabalho para informar aos usuários que algo importante aconteceu. As notificações aparecem fora da janela do navegador. Como mostrado nos snapshots a seguir, os detalhes da aparência das notificações e do local em que são exibidas dependem da plataforma.

Notificações no Microsoft Windows

Notificações no Mac OS X

Notificações no Ubuntu Linux

É possível criar a janela de notificação usando um pouco de JavaScript e, opcionalmente, uma página HTML empacotada dentro da sua extensão.

Exemplo

Primeiro, declare a permissão notifications no seu manifesto:

{
  "name": "My extension",
  "manifest_version": 2,
  ...
  "permissions": [
    "notifications"
  ],
  ...
  // Note: Because of bug 134315, you must declare any images you
  // want to use with createNotification() as a web accessible resource.
  "web_accessible_resources": [
    "48.png"
  ],
}

Em seguida, use o objeto webkitNotifications para criar notificações:

// Note: There's no need to call webkitNotifications.checkPermission().
// Extensions that declare the notifications permission are always
// allowed create notifications.

// Create a simple text notification:
var notification = webkitNotifications.createNotification(
  '48.png',  // icon url - can be relative
  'Hello!',  // notification title
  'Lorem ipsum...'  // notification body text
);

// Or create an HTML notification:
var notification = webkitNotifications.createHTMLNotification(
  'notification.html'  // html url - can be relative
);

// Then show the notification.
notification.show();

Referência da API

Consulte a especificação de rascunho das notificações em computadores.

Como se comunicar com outras visualizações

É possível estabelecer uma comunicação entre uma notificação e outras visualizações na sua extensão usando extension.getBackgroundPage e extension.getViews. Exemplo:

chrome.extension.getBackgroundPage().doThing();
chrome.extension.getViews({type:"notification"}).forEach(function(win) {
  win.doOtherThing();
});

Mais exemplos

Você pode encontrar um exemplo simples de uso de notificações no diretório examples/api/notifications. Para ver outros exemplos e receber ajuda na visualização do código-fonte, consulte Amostras.

Veja também o tutorial de notificações do html5rocks.com. Ignore o código relacionado à permissão. Não é necessário declarar a permissão "notifications".