Je viens de créer un petit plugin pour l'excellent webmail RoundCube.

Il se content d'imprimer par dessus l'icône du site (favicon) le nombre de message non lu.


Bon, il y a sûrement plein de chose à corriger, notamment, sur le choix de la couleur, ou encore trouver un moyen de rendre le chiffre plus lisible, mais pour un truc torché en 20 minutes, je trouve que c'est déjà pas mal ;-)

Comment ça marche : Premièrement, pour obtenir le nombre de messages non lu, je surcharge la méthode set_pagetitle. Cela me permet, en analysant le titre, de trouver le nombre de messages non lu. Ensuite, grâce à un canvas, je dessine l'icône actuelle, puis le nombre de message non lu. Enfin, je génère une URL "data:" à partir de ce canvas et j'insère (ou remplace) des balises <link rel="icon"> et <link rel="shortcut icon"> avec cette url. Enfin, je prends soin d'appeler la méthode set_pagetitle originale...

Voilà le code :
rcmail.__set_pagetitle = rcmail.set_pagetitle;
rcmail.set_pagetitle = function(title) {
    var n = /\(([0-9]+)\)/.exec(title) || '';
    if(n) n = n[1];
    if(n == '0') n = '';
    var img = new Image();
    img.onload = function() {
        // Create the canvas element.
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        // Get '2d' context and draw the image.
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        ctx.font = "bold 12px sans-serif";
        ctx.fillStyle = 'blue';
        //console.log(ctx.measureText(n));
        ctx.fillText(n, 16 - ctx.measureText(n).width, 16);
        // Get canvas data URL
        try{
            var data = canvas.toDataURL();

            var links = document.getElementsByTagName("link");
            for (var i = 0; i < links.length; i++) {
                var link = links[i];
                if (link.type == "image/x-icon" && (link.rel == "shortcut icon" || link.rel == "icon")) {
                    link.parentNode.removeChild(link);
                }
            }
            var link = document.createElement('link');
            link.type = "image/x-icon";
            link.rel = "icon";
            link.href = data;
            document.getElementsByTagName('head')[0].appendChild(link);

            var link = document.createElement('link');
            link.type = "image/x-icon";
            link.rel = "shortcut icon";
            link.href = data;
            document.getElementsByTagName('head')[0].appendChild(link);
        }catch(e){
            // console.error(e);
        }
    }
    // Load image URL.
    try{
        img.src = '/favicon.ico';
    }catch(e){
        // console.error(e);
    }
    return this.__set_pagetitle(title);
};

Et pour ceux que ça intéressent, vous pouvez le télécharger ici : roundcubemail_plugin_favicon_0.1.tar.gz