在瀏覽器環境中攔截 HTML5 Web 通知

Question

我想攔截HTML5 Web 通知。 我已閱讀以下答案，其中用戶建議可以使用您自己的將充當代理的對象覆蓋window.Notification對象。 我試圖這樣做，但無法使其正常工作。 下面是我在加載頁面時注入的 JavaScript 代碼：

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

Answer 1

問題是箭頭函數不能用作構造函數（ Source ）。

使用此代碼的項目仍然具有箭頭功能： https : //github.com/jiahaog/nativefier/blob/master/app/src/static/preload.js但它在Electron中運行，這可能解釋了為什么它的行為不同。

如果針對最近的瀏覽器，請使用像這樣的命名函數：

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

當其他代碼/庫像我的例子一樣調用new Notification()時，這樣創建的代理就會生效。 我已將代理邏輯移至頂層，以確保其他代碼/庫在用戶接受接收通知之前不會保留對本機Notification的引用。 您還必須將代碼放在首位以保證這一點。

如果您的目標瀏覽器支持 ECMAScript 6，還有一種更優雅的方式來實現：

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

它更具可擴展性（當Notification API 在未來的 ECMAScript 版本中更改時不會產生影響，因為它允許操作本機Notification而不是手工制作的Notification ）。