Notifications enrichies avec webKit

Utilisez des notifications de bureau enrichies pour avertir les utilisateurs qu'un événement important s'est produit. Les notifications apparaissent en dehors de la fenêtre du navigateur. Comme le montrent les instantanés suivants, les détails de l'apparence et de l'emplacement des notifications dépendent de la plate-forme.

Vous créez la fenêtre de notification à l'aide d'un peu de JavaScript et, éventuellement, d'une page HTML empaquetée dans votre extension.

Exemple

Commencez par déclarer l'autorisation notifications dans votre fichier manifeste:

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

Utilisez ensuite l'objet webkitNotifications pour créer des notifications:

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

Documentation de référence de l'API

Consultez la spécification pour le brouillon des notifications de bureau.

Communiquer avec d'autres personnes

Vous pouvez communiquer entre une notification et d'autres vues de votre extension à l'aide de extension.getBackgroundPage et de extension.getViews. Exemple :

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

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

Autres exemples

Vous trouverez un exemple simple d'utilisation des notifications dans le répertoire examples/api/notifications. Pour obtenir d'autres exemples et obtenir de l'aide sur l'affichage du code source, consultez la page Exemples.

Consultez également le tutoriel sur les notifications sur html5rocks.com. Ignorez le code lié à l'autorisation. Il n'est pas nécessaire si vous déclarez l'autorisation "notifications".