How to get focus to a Chrome tab which created desktop notification?

javascript google-chrome webkit notifications gmail
Frodik picture Frodik · Feb 5, 2011 · Viewed 30.7k times · Source

I would like to implement same functionality as Gmail has nowadays. When new email arrives or new chat comes, notification popup appears and if you click it, the tab with Gmail gets focussed.

I have this code:

var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { this.cancel(); };
n.show();

When I click notification it makes it just disappear. Now I need to add some code to onclick function to bring up and focus page that created this notification. I know it is possible because GMail does it very well. But I didn't succeed in looking into Gmail sources (they are minimalized and obfuscated).

Anybody knows how to do this ?

Answer

Mohamed Mansour picture Mohamed Mansour · Feb 5, 2011

You can just place window.focus() in Google Chrome. It will focus to that window when clicked.

var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { window.focus(); this.close(); };
n.show();

I opened the inspector in Gmail, added the above code, moved to a different tab, and ran it. The notification appeared and once clicked, it brought me back to Gmail.

Related questions

JavaScript: Is there a way to get Chrome to break on all errors?

I am looking for an equivalent in Chrome to the "break on all errors" functionality of Firebug. In the Scripts tab, Chrome has a "pause on all exceptions", but this is not quite the same as breaking on all errors. …

Read More
Get the real width and height of an image with JavaScript? (in Safari/Chrome)

I am creating a jQuery plugin. How do I get the real image width and height with Javascript in Safari? The following works with Firefox 3, IE7 and Opera 9: var pic = $("img") // need to remove these in of case img-element has …

Read More
Chrome/jQuery Uncaught RangeError: Maximum call stack size exceeded

I am getting the error "Uncaught RangeError: Maximum call stack size exceeded" on chrome. here is my jQuery function $('td').click(function () { if ($(this).context.id != null && $(this).context.id != '') { foo($('#docId').val(), $(this).attr('id')); } …

Read More