Notificaciones enriquecidas con webKit

Usa notificaciones de escritorio enriquecidas para notificar a los usuarios que ocurrió algo importante. Las notificaciones aparecen fuera de la ventana del navegador. Como se muestran en las siguientes instantáneas, los detalles de cómo se ven las notificaciones y dónde se muestran dependen de la plataforma.

Notificaciones en Microsoft Windows

Notificaciones en Mac OS X

Notificaciones en Ubuntu Linux

Crea la ventana de notificación con un poco de JavaScript y, de forma opcional, una página HTML empaquetada dentro de la extensión.

Ejemplo

Primero, declara el permiso notifications en tu manifiesto:

{
  "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"
  ],
}

Luego, usa el objeto webkitNotifications para crear notificaciones:

// 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();

Referencia de la API

Consulta la Especificación de borrador de notificaciones de escritorio.

Cómo comunicarse con otras vistas

Puedes comunicarte entre una notificación y otras vistas de tu extensión mediante extension.getBackgroundPage y extension.getViews. Por ejemplo:

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

Más ejemplos

Puedes encontrar un ejemplo simple del uso de notificaciones en el directorio examples/api/notifications. Para ver otros ejemplos y obtener ayuda con la visualización del código fuente, consulta Muestras.

Consulta también el tutorial de notificaciones de html5rocks.com. Ignora el código relacionado con permisos. No es necesario si declaras el permiso "notificaciones".