I'm doing around 1-2 notifications a day and it's important the user doesn't miss it. Is there a way of removing the auto close and only allowing the user to manually close the notification?
I don's see any option for this in the Notification Options:
http://developer.chrome.com/extensions/notifications.html#type-NotificationOptions
Notification now has (since Chrome 50) a requireInteraction property to force the notification to stay on screen:
var notification = new Notification("TITLE", {
icon: 'assets/res/icon.png',
body: "MESSAGE",
requireInteraction: true
});
In onclick you have to close the notification:
notification.onclick = function()
{
this.close();
}
UPDATE (2016-05-24):
Fun fact: all this arcane hacking is no longer needed; see the new
requireInteractionflag
It is availalbe since Chrome 50. More info.
Thanks to root's comment, this answer is revised to account for the fact that the onClosed event is not fired when the notification disappears (into the notigications area) after a few seconds. This is still kind of a hacky solution.
You can take advantage of the fact that a notification's life-cycle ends with one of the following events:
onClosed: When the user clicks on the small 'x' in the top-right corner.onClicked: When the user clicks on the message body (not the 'x', not some button).onButtonClicked: When the user clicks on one of the buttons (if any).The proposed solution consists of the following steps:
Writing about it is simple, coding takes some more effort :) Here is the sample code I used to achieve what is described above:
In manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"background": {
// We need this for the `Timeout` - see notes below
"persistent": true,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension"
"default_icon": {
"19": "img/icon19.png",
"38": "img/icon38.png"
},
},
"permissions": ["notifications"]
}
In background.js:
var pendingNotifications = {};
/* For demonstration purposes, the notification creation
* is attached to the browser-action's `onClicked` event.
* Change according to your needs. */
chrome.browserAction.onClicked.addListener(function() {
var dateStr = new Date().toUTCString();
var details = {
type: "basic",
iconUrl: "/img/notifIcon.png",
title: "REMINDER",
message: dateStr + "\n\n"
+ "There is one very important matter to attend to !\n"
+ "Deal with it now ?",
contextMessage: "Very important stuff...",
buttons: [
{ title: "Yes" },
{ title: "No" }
]
};
var listeners = {
onButtonClicked: function(btnIdx) {
if (btnIdx === 0) {
console.log(dateStr + ' - Clicked: "yes"');
} else if (btnIdx === 1) {
console.log(dateStr + ' - Clicked: "no"');
}
},
onClicked: function() {
console.log(dateStr + ' - Clicked: "message-body"');
},
onClosed: function(byUser) {
console.log(dateStr + ' - Closed: '
+ (byUser ? 'by user' : 'automagically (!?)'));
}
};
/* Create the notification */
createNotification(details, listeners);
});
/* Create a notification and store references
* of its "re-spawn" timer and event-listeners */
function createNotification(details, listeners, notifId) {
(notifId !== undefined) || (notifId = "");
chrome.notifications.create(notifId, details, function(id) {
console.log('Created notification "' + id + '" !');
if (pendingNotifications[id] !== undefined) {
clearTimeout(pendingNotifications[id].timer);
}
pendingNotifications[id] = {
listeners: listeners,
timer: setTimeout(function() {
console.log('Re-spawning notification "' + id + '"...');
destroyNotification(id, function(wasCleared) {
if (wasCleared) {
createNotification(details, listeners, id);
}
});
}, 10000)
};
});
}
/* Completely remove a notification, cancelling its "re-spawn" timer (if any)
* Optionally, supply it with a callback to execute upon successful removal */
function destroyNotification(notifId, callback) {
/* Cancel the "re-spawn" timer (if any) */
if (pendingNotifications[notifId] !== undefined) {
clearTimeout(pendingNotifications[notifId].timer);
delete(pendingNotifications[notifId]);
}
/* Remove the notification itself */
chrome.notifications.clear(notifId, function(wasCleared) {
console.log('Destroyed notification "' + notifId + '" !');
/* Execute the callback (if any) */
callback && callback(wasCleared);
});
}
/* Respond to the user's clicking one of the buttons */
chrome.notifications.onButtonClicked.addListener(function(notifId, btnIdx) {
if (pendingNotifications[notifId] !== undefined) {
var handler = pendingNotifications[notifId].listeners.onButtonClicked;
destroyNotification(notifId, handler(btnIdx));
}
});
/* Respond to the user's clicking on the notification message-body */
chrome.notifications.onClicked.addListener(function(notifId) {
if (pendingNotifications[notifId] !== undefined) {
var handler = pendingNotifications[notifId].listeners.onClicked;
destroyNotification(notifId, handler());
}
});
/* Respond to the user's clicking on the small 'x' in the top right corner */
chrome.notifications.onClosed.addListener(function(notifId, byUser) {
if (pendingNotifications[notifId] !== undefined) {
var handler = pendingNotifications[notifId].listeners.onClosed;
destroyNotification(notifId, handler(byUser));
}
});
Final notes:
localStorage, chrome.storage API etc), resuming pending notifications on extension/browser start-up etc.
Timeout's with the chrome.alarms API and then convert the background-page to non-persistent (a.k.a. event-page) which will make it more resource-friendly.This answer is obsolete; see this answer for an up to date solution involving requireInteraction flag (Chrome 50+).
There is a slightly better (but again, hacky) solution.
When you call update on a notification that changes its priority, and the priority is 0 or above, the notification will be re-shown and the timer for hiding it reset.
So, you can show a notification with a high priority, (say, 2) and then repeat this on an interval shorter than time to hide the notification:
chrome.notifications.update(id, {priority : 1}, function(wasUpdated) {
if(wasUpdated) {
chrome.notifications.update(id, {priority : 2}, function() {});
} else {
// Notification was fully closed; either stop updating or create a new one
}
});
don't use chrome.notifications.create
try to use var notification= new Notification("New mail from John Doe", { tag: 'msg1', requireInteraction: true});
will not to close.
if want to close=> notification.close();
ref: http://www.w3.org/TR/notifications/
https://developer.mozilla.org/en-US/docs/Web/API/notification/requireInteraction
webkit notifications seem to be more persistent on the screen, althouth they have the opposite problem - how to hide them to sys tray.
http://developer.chrome.com/extensions/desktop_notifications.html
