Hatena::Groupjavascript

emergentのJavaScript入門日記

 | 

2008-10-19

はてなブックマークページのIDリンクにマウスを載せるとはてなダイアリのリンクをポップアップするGreaseMonkeyスクリプト

| 20:27 | はてなブックマークページのIDリンクにマウスを載せるとはてなダイアリのリンクをポップアップするGreaseMonkeyスクリプト - emergentのJavaScript入門日記 を含むブックマーク はてなブックマーク - はてなブックマークページのIDリンクにマウスを載せるとはてなダイアリのリンクをポップアップするGreaseMonkeyスクリプト - emergentのJavaScript入門日記

ポップアップで何かを表示するGreaseMonkeyの練習に、という主旨で作成しました。

私は、人気エントリのはてブコメントを結構読むのですが、そのときにその人のダイアリに簡単に飛べると便利かと思いました。ついでだからポップアップでリンクを作成できるようにしてみよう、と。

f:id:emergent:20081020004717j:image

// ==UserScript==
// @name           add_d_link_on_hbm
// @namespace      http://nitamago.org/
// @include        http://b.hatena.ne.jp/entry/*
// ==/UserScript==

var w = this.unsafeWindow || window;
w.addEventListener("load", function() {
        var my_div_id = "gm_add_d_link";
        var my_atag_id = "gm_add_d_link_atag";

        function popupDiaryLink(evt) {
            //alert("mouse over: " + evt.target.innerHTML);
            var mydiv = document.getElementById(my_div_id);
            mydiv.style.display = 'block';
            mydiv.style.left = evt.clientX+w.scrollX+10;
            mydiv.style.top = evt.clientY+w.scrollY;

            var dlink = document.getElementById(my_atag_id);
            dlink.href = 'http://d.hatena.ne.jp/'+evt.target.innerHTML+'/';
        }

        var hlink = document.getElementsByClassName("hatena-id");
        if (hlink.length > 0) {
            for (var i = 0; i < hlink.length; i++) {
                hlink[i].addEventListener('mouseover',
                                          popupDiaryLink, false);
            }
            var mydiv  = document.createElement('div');
            mydiv.id = my_div_id;
            mydiv.style.position = 'absolute';
            mydiv.style.top = '0px';
            mydiv.style.left = '0px';
            mydiv.style.opacity = '0.8';
            mydiv.style.backgroundColor = '#A9A9A9';   
            mydiv.style.display = 'none';

            var dlink = document.createElement('a');
            dlink.id = my_atag_id;
            dlink.innerHTML = 'diary';
            mydiv.appendChild(dlink);

            document.body.appendChild(mydiv);
        }
    }, false);

ぶっちゃけこれだけ書くのに半日かかった。

スタイルを変な書き方していため表示できずにウンウン唸ってました。

見た目はしょぼいけど、結構学ぶところが多かったのでこれを糧にしてもっと使えるものをつくろう。

参考

 |