replace star by profile icon for UserScript

replaceStarByProfileIcon.user.js

// ==UserScript==
// @name        replace star by profile icon
// @namespace   https://www.hatena.ne.jp/noromanba/
// @description replace star by profile icon for UserScript
// @include     http://*
// @include     https://*.hatena.tld/*
// @version     2012.5.31.19.23
// @contributor os0x        https://gist.github.com/2424/
// @contributor nikolat     https://gist.github.com/761858/
// @author      noromanba (https://www.hatena.ne.jp/noromanba/)
// @homepage    https://gist.github.com/2725191
// @license     Unknown (as-is)
// @icon        https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Star_coin.png/32px-Star_coin.png
// @icon64      https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Star_coin.png/64px-Star_coin.png
// ==/UserScript==

// Icon (Author Mr.Yahoo! / License: Public Domain)
// https://commons.wikimedia.org/wiki/File:Star_coin.png

(function () {
    var executeBrowserContext = function (funcOrString) {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.charset = 'utf-8';
        var t = document.createTextNode('(' + funcOrString.toString() + ')();');
        s.appendChild(t);
        document.body.appendChild(s);
    };

    var avatarize = function () {
        if (typeof window.Hatena !== 'object' || typeof window.Hatena.Star !== 'object') return;

        var coloring = (function () {
            // You can change color as you like
            var palette = {
                'yellow': '#ffd700',    // yellow-star color name => undefined
                'green' : 'green',      // 'green' : 'rgb(0, 255, 0)',
                'red'   : 'red',        // 'red'   : '#f30',
                'blue'  : 'blue',
                'purple': 'purple',
                'temp'  : 'ghostwhite'
            };
            return function (color) {
                // If You want coloring yellow star, remove '/*' and '*/'
                return '2px solid ' + (palette[color] || color /*|| palette['yellow']*/); 
            };
        })();

        Array.prototype.forEach.call(document.querySelectorAll('span.hatena-star-star-container > a'), function (star) {
            if (star.className === 'profile-icon') return;

            if (/^[a-zA-Z][-\w]{1,30}[a-zA-Z\d]/.test(star.alt)) {
                var color = (/star-(\w+)\.gif$/.exec(star.src) || [])[1];
                star.style.border = coloring(color);
                star.src = Hatena.User.getProfileIcon(star.alt).src;
            }
        });

        var pushStars = Hatena.Star.Entry.prototype.pushStars;
        Hatena.Star.Entry.prototype.pushStars = function (stars, color) {
            stars = stars.map(function (star) {
                var image = Hatena.User.getProfileIcon(star.name);
                image.alt = star.name;
                image.title = ''; // block a tooltip cover over popup
                image.style.outline = coloring(color);

                star.img = image;
                return star;
            });
            pushStars.call(this, stars, color);
        };

        var showName = Hatena.Star.Star.prototype.showName;
        Hatena.Star.Star.prototype.showName = function (e) {
            this.screen_name = this.name;
            showName.call(this, e);
        };
    };

    executeBrowserContext(avatarize);
})();