Notifiche avanzate con webKit

Utilizza notifiche desktop avanzate per informare gli utenti che è successo qualcosa di importante. Le notifiche vengono visualizzate fuori dalla finestra del browser. Come mostrano gli snapshot seguenti, i dettagli relativi all'aspetto e alla posizione delle notifiche dipendono dalla piattaforma.

Puoi creare la finestra di notifica utilizzando una porzione di codice JavaScript e, facoltativamente, una pagina HTML pacchettizzata all'interno dell'estensione.

Esempio

Innanzitutto, dichiara l'autorizzazione notifications nel file manifest:

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

Quindi, utilizza l'oggetto webkitNotifications per creare notifiche:

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

Riferimento API

Consulta la specifica della bozza per le notifiche desktop.

Comunicare con altri punti di vista

Puoi comunicare tra una notifica e altre visualizzazioni nell'estensione utilizzando extension.getBackgroundPage e extension.getViews. Ad esempio:

chrome.extension.getBackgroundPage().doThing();

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

Altri esempi

Puoi trovare un semplice esempio di utilizzo delle notifiche nella directory examples/api/notifications. Per altri esempi e per assistenza per la visualizzazione del codice sorgente, consulta Esempi.

Consulta anche il tutorial sulle notifiche di html5rocks.com. Ignora il codice relativo alle autorizzazioni; non è necessario se dichiari l'autorizzazione per le "notifiche".