HTML5 Notifications API in place of Notifications DIV

  • tl;dr
    Use Web Notifications instead of a notification <div> on the forum.

    Longer Ramblings
    Currently, the forum does notifications in a weird way where a little box appears on the screen. This is fine if the page is currently active, but totally useless if:

    • The page is open in a background tab
    • The page is in a web panel

    Right now, I've been using this user script:

    // ==UserScript==
    // @name        Vivaldi Notify Alerts
    // @namespace
    // @include*
    // @version     1
    // ==/UserScript==
        "use strict";
        if(Notification.permission !== "granted"){
        const alertObserver = new MutationObserver(alertChanged);
        const config = {childList: true};
        function alertChanged(mutations){
            mutations.forEach(mutation => {
                if(mutation.type === 'childList' && mutation.addedNodes.length > 0){
                    const notify_text = mutation.addedNodes[0].innerText;
                    const note = new Notification("Vivaldi Forum", {
                        body: notify_text,
                        icon: ""
                    setTimeout(function(){note.close();}, 5000);
        const alertbox = document.querySelector("body > div.alert-window");
        alertObserver.observe(alertbox, config);

    To auto-create a proper Web Notification instead of the current ones, but this isn't perfect (particularly because the V forum LIKES TO USE ALL CAPS FOR SOME NOTIFICATIONS (despite the fact that this isn't permitted by the rules ;p) - and if I could make a second related request, Proper Cased Notifications would be welcome..

    Obviously, as per the general theme of this place, such an implementation ought to be optional. Maybe by showing the div notifications if a user doesn't grant Web Notifications permission, of even just hidden away in the user preferences.

Log in to reply

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.