在浏览器环境中拦截 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

问题是箭头函数不能用作构造函数(源(。

使用此代码的项目仍然具有箭头函数：https://github.com/nativefier/nativefier/blob/e00f08e5d6fbdd86cdba8efec5e809d0308117d8/app/src/static/preload.js 但它在Electron中运行，这可能解释了为什么它的行为不同。

编辑：

它不再使用箭头函数：https://github.com/nativefier/nativefier/blob/master/app/src/preload.ts

如果针对最近的浏览器，请使用如下所示的命名函数：

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

它的可扩展性要强得多(当NotificationAPI 在未来的 ECMAScript 版本中发生变化时，它没有影响，因为它允许操作本机Notification而不是手工制作的(。