Tampermonkey script to show the unread count in Outlook favicon

outlook-unread-count.user.js

// ==UserScript==
// @name         Outlook Unread count
// @namespace    http://tampermonkey.net/
// @version      2024-10-25
// @description  Show unread count in Outlook favicon
// @author       Warren Seine
// @match        https://outlook.office.com/mail/*
// @icon         https://res.public.onecdn.static.microsoft/owamail/20241011003.19/resources/images/favicons/mail-seen.ico
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let unread = null

    function updateFavicon() {
        const canvas = document.createElement("canvas");
        const size = 32;
        canvas.width = size;
        canvas.height = size;
        const ctx = canvas.getContext("2d");

        const favicon = document.querySelector("link[rel='shortcut icon']") || document.querySelector("link[rel='icon']")
        favicon.rel = "icon";

        if (!favicon) return

        const image = new Image();
        image.crossOrigin = "anonymous";
        image.src = favicon.href;

        image.onload = () => {
            ctx.drawImage(image, 0, 0, size, size);

            if (unread > 0) {
                // Draw a red circle for the unread count
                ctx.fillStyle = "white";
                ctx.beginPath();
                const scale = unread >= 10 ? 0.40 : 0.35
                ctx.arc(size * 0.70, size * 0.75, size * scale, 0, 2 * Math.PI);
                ctx.fill();

                // Add unread count text
                ctx.fillStyle = "black";
                ctx.font = "16px Arial";
                ctx.textAlign = "center";
                ctx.textBaseline = "middle";
                ctx.fillText(unread, size * 0.70, size * 0.80);
            }

            favicon.href = canvas.toDataURL("image/png");
            document.head.appendChild(favicon);
        };
    }

    setInterval(() => {
        const targetSpan = Array.from(document.querySelectorAll('.screenReaderOnly')).find(span => span.textContent.trim() === "unread");

        const siblingSpan = targetSpan?.previousElementSibling;

        if (siblingSpan?.tagName !== "SPAN") return

        const unreadCount = Math.min(parseInt(siblingSpan.textContent), 99);

        if (isNaN(unreadCount) || unreadCount === unread) return

        unread = unreadCount;

        updateFavicon();
    }, 1000);
})();