javascript - Intercept HTML5 Web Notifications in a browser environment - Stack Overflow

admin管理员组

文章数量:1287833

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);
    }
})

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);
    }
})

• javascript
• html
• browser
• web-notifications

Share Improve this question Follow edited Apr 3, 2024 at 4:22 icedwater 4,88733 gold badges3838 silver badges5353 bronze badges asked Aug 16, 2019 at 11:33 recklessreckless 93322 gold badges1919 silver badges6464 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12 +25

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./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./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).

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

4. Reload extension.

本文标签： javascriptIntercept HTML5 Web Notifications in a browser environmentStack Overflow