4

Is there a way to set an event listener for a desktop notification?

document.addEventListener("desktop notification", function(){
    // do something
});

I've looked through the MDN event reference, but the only event type for a notification seems to be only for alert().

gauge
  • 1,073
  • 2
  • 11
  • 17
  • 2
    A desktop notification event may be emitted from a browser, but it's listened to by the window manager of the OS. The browser itself is not notified about these events. – marekful Jul 05 '15 at 14:57

2 Answers2

9

See https://github.com/jiahaog/nativefier project for working sample. Notice snippet (source from https://github.com/jiahaog/nativefier/blob/development/app/src/static/preload.js):

function setNotificationCallback(callback) {

    const OldNotify = window.Notification;
    const newNotify = (title, opt) => {
        callback(title, opt);
        return new OldNotify(title, opt);
    };
    newNotify.requestPermission = OldNotify.requestPermission.bind(OldNotify);
    Object.defineProperty(newNotify, 'permission', {
        get: () => {
            return OldNotify.permission;
        }
    });

    window.Notification = newNotify;
}

So, you replace window's Notification object with own object that act as a proxy with added behaviour (calling callback on creating new Notification).

Hope this helps

deksden
  • 774
  • 6
  • 13
  • 1
    This helped me greatly, however, the catch is to call this as early as possible, before any Notification object gets created – Tikiboy Aug 11 '16 at 07:37
  • @Tikiboy: glad to help. Sure, this code should be run as initialization step for app. – deksden Aug 23 '16 at 03:25
  • nativefier helped me loads. Cheers mate! – Kaushik Evani Jun 12 '17 at 14:50
  • 1
    I'm trying to capture slack notifications using this. I put a console.log and I can see that the script is getting loaded, but I don't see any changes to the notifications. Can anyone point me in the right direction? – Leo Reyes Jul 08 '21 at 04:24
  • I'm also trying to do this with Slack. @LeoReyes did you ever figure it out? – supertrue Mar 04 '22 at 22:09
  • @supertrue I no longer have a need for capturing slack notifications, but I am for discord via websocket and last time I looked, I think you can do something similar for slack. If that might fit your need, I can give you more details. – Leo Reyes Mar 07 '22 at 08:14
1

@marekful is right. Instead of placing global event listeners, you may consider placing a callback or even attach an event on the Notification object.

var noticeMe = new Notification(title, options); 
noticeMe.onshow = function() { console.log("easy!") };

A full list of supported events may be found here: https://developer.mozilla.org/en-US/docs/Web/API/Notification, Also here is an article I wrote a few months back about the Notification API

Take a look at

vorillaz
  • 6,098
  • 2
  • 30
  • 46
  • 4
    Yeah, I'm aware of the usage of the callback but I'm actually intending to inject some javascript into a page to listen for such notifications I have no control over, and I'm not sure if there's some workaround I can use. – gauge Jul 05 '15 at 16:34
  • 3
    Did you figure it out? I am also trying to catch all notifications, and have no control over the creation of the notification itself. – Nathan H Oct 14 '15 at 13:15
  • 1
    Also trying the same thing, catch notifications from other webapps. You guys found anything yet? @gauge – mehlichmeyer Apr 14 '21 at 11:52