はてな匿名ダイアリーで話の前後を確認するためのGreasemonkey

増田でタイトルにpermalinkだけ書いてあってどんな内容について言及してるのか分からないことが多くて、いちいちクリックするのが面倒なので、マウスオーバーでリンクテキストを言及先のタイトルへ置き換えて内容を展開するスクリプトを書いてみた。

before

after

// ==UserScript==
// @name           anond show previous
// @namespace      http://shinten.info/
// @include        http://anond.hatelabo.jp/*
// ==/UserScript==
(function () {
    var w = unsafeWindow;

    with (w) {
        forEach($('body').getElementsByTagName('a'), function(a){
            if ( a.innerHTML.match(/anond(?::|\.hatelabo\.jp\/)\d+$/) ) {
                var id = connect(a, 'onmouseover', a, function (e) {
                    if (e) e.stop();
                    var d = doSimpleXMLHttpRequest(this.href);
                    d.addCallback(bind(function (req) {
                        var html = DIV();
                        html.innerHTML = req.responseText;

                        var title = html.getElementsByTagName('title')[0].innerHTML;
                        this.innerHTML = (title == '') ? 'No title' : title;

                        var prevs = getElementsByTagAndClassName(
                            'div', 'section', html
                        )[0].getElementsByTagName('p');

                        var prev = DIV();
                        setStyle(prev, {
                            margin: '0.5em',
                            font: '80% normal normal',
                            backgroundColor: '#eee',
                            border: '1px #5279e7 solid'
                        });

                        appendChildNodes(prev, filter(function(p) {
                            return !hasElementClass(p, 'sectionfooter');
                        }, prevs));

                        this.parentNode.insertBefore(prev, this.nextSibling);
                    }, this));
                    disconnect(id);
                });
            }
        });
    }
})();