User script for animated favicon on the SO Chatrooms

chatfavicon userscript

// ==UserScript==
// @name       Favicon update for pinned chat
// @version    0.1
// @description  Updates the favicon with the message count
// @match      http://chat.stackoverflow.com/*
// ==/UserScript==

    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        origFav = document.querySelector('[rel="shortcut icon"]'),
        newFav = origFav.cloneNode(),
        favicon = document.createElement('img');

    ctx.textAlign = 'center';

    favicon.addEventListener('load',function(){
        canvas.height = this.height;
        canvas.width = this.width;
         
        ctx.drawImage(this,0,0);
        
        newFav.href = canvas.toDataURL('image/png');
        
        origFav.parentNode.replaceChild(newFav, origFav);
        setTimeout(updateCount,1000)
    });

	function updateCount(){
        var msgCount = document.title.split(' ')[0];
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(favicon, 0, 0);
        
        if(msgCount[0] === "("){
            msgCount = msgCount.substring(1, msgCount.length-1);
            ctx.fillStyle = '#000';
            ctx.font = 'Bold 20px "helvetica", sans-serif';
            ctx.beginPath();
            ctx.fillText(msgCount, 1, 25);
            
            var origFav = document.querySelector('[rel="shortcut icon"]'),
                newFav = origFav.cloneNode(true);
    
            newFav.setAttribute('href', canvas.toDataURL('image/png'));
            
            origFav.parentNode.replaceChild(newFav, origFav);
        }
        setTimeout(updateCount,1000);
	}
	
favicon.crossOrigin = "Anonymous";
favicon.src = "http://i.imgur.com/r6MJ5rF.png";