CODEWITHSUNDEEP
javascripthtmlbrowserweb-notifications
reckless
reckless

Reputation: 933

Intercept HTML5 Web Notifications in a browser environment

I would like to intercept HTML5 Web Notifications. I have read the following answer where a user suggests that it is possible to override the window.Notification object with your own object that will act as a proxy. I tried to do that but couldn't manage it to work. Below is the JavaScript code I am injecting when a page has been loaded:

function setNotificationCallback(callback) {

    const OldNotify = window.Notification;
    OldNotify.requestPermission();

    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;
}
function notifyCallback(title, opt) {
    console.log("title", title); // this never gets called
}

window.Notification.requestPermission(function (permission) {
    if (permission === "granted") {
        setNotificationCallback(notifyCallback);
    }
})

Upvotes: 10

Views: 2626

Answers (2)

changtraithang10
changtraithang10

Reputation: 463

I updated my code following the instructions from Guerric P , but still nothing happened. Luckily, I stumbled upon this anwser

You might be tempted to just use notifhook.js as your content script, but that won't work because the content script and the web page have separate execution environments.

Below are the steps I took with manifest v3

  1. Create a file called intercept-notify.js:
(function () {
 
     // Customize notification inside callback
     function notifyCallback(title, opt) {
         opt.body = 'You have a new message'
     }
 
     const OldNotify = window.Notification;
 
     function newNotify(title, opt) {
         notifyCallback(title, opt);
         return new OldNotify(title, opt);
     }
 
     newNotify.requestPermission = OldNotify.requestPermission.bind(OldNotify);
     Object.defineProperty(newNotify, 'permission', {
         get: function () {
             return OldNotify.permission;
         }
     });
 
     window.Notification = newNotify;
 })();

  1. Next, include intercept-notify.js in your web_accessible_resources list in your manifest.json.

  2. Finally, in a content script, inject a <script> element into the page with intercept-notify.js as its src:

   const s = document.createElement("script");
   s.id = 'inject-intercept-notify' // optional =))

   // The path to load the file `intercept-notification.js` is declared in 
       the `web_accessible_resources` in the `manifest.json.`

   s.src = chrome.runtime.getURL("src/intercept-notify.js");
   
   document.body.appendChild(s);
  1. Reload extension.

Upvotes: 0

Guerric P
Guerric P

Reputation: 31835

The problem is that an arrow function can't be used as a constructor (Source).

The project that uses this code still has an arrow function: https://github.com/nativefier/nativefier/blob/e00f08e5d6fbdd86cdba8efec5e809d0308117d8/app/src/static/preload.js but it runs in Electron which might explain why it behaves differently.

Edit:

It doesn't use an arrow function anymore: https://github.com/nativefier/nativefier/blob/master/app/src/preload.ts

If targeting recent browsers, rather use a named function like this:

(function () {

    function notifyCallback(title, opt) {
        console.log("title", title);
    }

    const OldNotify = window.Notification;

    function newNotify(title, opt) {
        notifyCallback(title, opt);
        return new OldNotify(title, opt);
    }

    newNotify.requestPermission = OldNotify.requestPermission.bind(OldNotify);
    Object.defineProperty(newNotify, 'permission', {
        get: function() {
            return OldNotify.permission;
        }
    });

    window.Notification = newNotify;
})();

Notification.requestPermission(function (permission) {
    if (permission === "granted") {
        const notif = new Notification('My title');
    }
});

The proxy thus created will then be effective when other code/libraries call new Notification() like in my example. I have moved the proxifying logic to the top-level to ensure that the other code/libraries won't keep a reference on the native Notification before the user accepts to receive notifications. You must also put the code at the very first place to guarantee that.

And if your target browsers support ECMAScript 6, there is a much more elegant way to do it:

(function () {

    function notifyCallback(title, opt) {
        console.log("title", title);
    }

    const handler = {
        construct(target, args) {
            notifyCallback(...args);
            return new target(...args);
        }
    };

    const ProxifiedNotification = new Proxy(Notification, handler);

    window.Notification = ProxifiedNotification;
})();

Notification.requestPermission(function (permission) {
    if (permission === "granted") {
        const notif = new Notification('My title');
    }
});

It's much more scalable (no impact when the Notification API changes in future ECMAScript versions since it allows to manipulate the native Notification rather than a handmade one).

Upvotes: 12

Related Questions