Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
User script for animated favicon on the SO Chatrooms
// ==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";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment