『 色んなところにfaviconを - 準二級.jp』の改良

Web

『Going My Way: Googleの検索結果やはてなブックマークにfaviconを表示するGreasemonkeyユーザースクリプト』経由

はてブと Google のリストに favicon を表示できる Greesemonkey スクリプトがあった]ので導入してみました．そこのコメントで議論されているように，favicon.ico が存在しないサイトがあるとガタガタになってしまう欠点があります．製作者の jun29 さんと同じく，私も favicon があると楽しいですから，それで全然問題無いです．

でもやっぱり，favicon.ico が無いサイトには Firefox のデフォルトアイコンを表示させたいですよね．そこで，スクリプトを改良しました．

改良版スクリプト

それぞれのスクリプト名には 2 って付けて違うものにしてあります．同時にインストールした場合は，どちらかを Disable にしましょう．

まず Google 用：

• gfavicon.user.js

// ==UserScript==
// @name Favicon with Google 2
// @namespace   http://libelabo.jp/
// @description A script to add favicons next to links on Google search results 
// @include     http://*google.*/*q=*
// @exclude     http://mail.google.com/*
// ==/UserScript==

(function(){

// apply the function to each element found by the path
function forEachMatch(path, f, root) {
        var root = (root == null) ? document : root;
        var matches = root.evaluate(
                path, root, null,
                XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
        for (var i = 0; i < matches.snapshotLength; i++)
                f(matches.snapshotItem(i));
}

// adds the link favicon before itselft
function add_favicon(link) {
        var g = link.parentNode;

        var container = document.createElement('div');
        container.style.marginLeft = '16px';
        container.style.paddingLeft = '1ex';
        while (g.firstChild != null) {
                var e = g.firstChild;
                g.removeChild(e);
                container.appendChild(e);
        }

        var favicon_container = document.createElement('div');
        favicon_container.style.cssFloat = 'left';
        favicon_container.style.minWidth = '16px';
        favicon_container.style.minHeight = '16px';
        favicon_container.style.backgroundImage =
                'url("chrome://global/skin/icons/folder-item.png")';

        var favicon = document.createElement('img');
        favicon.src = "http://" + link.hostname + "/favicon.ico";
        favicon.width = 16;
        favicon.alt   = "";

        favicon_container.appendChild(favicon);
        g.appendChild(favicon_container);
        g.appendChild(container);
}

// apply to all recent links, popular and your bookmarks
forEachMatch(
        "//a[@class='l']",add_favicon);
}())

続いて，はてブ用：

• hfavicon.user.js

// ==UserScript==
// @name Favicon with Hatena Bookmark 2
// @namespace   http://www.libelabo.jp/
// @description A script to add favicons next to links on Hatena Bookmark 
// @include     http://b.hatena.ne.jp/*
// @exclude     http://b.hatena.ne.jp/rss/*
// ==/UserScript==

(function(){

// apply the function to each element found by the path
function forEachMatch(path, f, root) {
        var root = (root == null) ? document : root;
        var matches = root.evaluate(
                path, root, null,
                XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
        for (var i = 0; i < matches.snapshotLength; i++)
                f(matches.snapshotItem(i));
}

// adds the link favicon before itselft
function add_favicon(link) {
        var entry_body = link.parentNode;

        var container = document.createElement('div');
        container.style.marginLeft = '16px';
        container.style.paddingLeft = '1ex';
        while (entry_body.firstChild != null) {
                var e = entry_body.firstChild;
                entry_body.removeChild(e);
                container.appendChild(e);
        }

        var favicon_container = document.createElement('div');
        favicon_container.style.cssFloat = 'left';
        favicon_container.style.minWidth = '16px';
        favicon_container.style.minHeight = '16px';
        favicon_container.style.backgroundImage =
                'url("chrome://global/skin/icons/folder-item.png")';

        var favicon = document.createElement('img');
        favicon.src = 'http://' + link.hostname + '/favicon.ico';
        favicon.alt = '';
        favicon.width = 16;

        favicon_container.appendChild(favicon);
        entry_body.appendChild(favicon_container);
        entry_body.appendChild(container);
}

// apply to all recent links, popular and your bookmarks
forEachMatch(
        "//a[@class='bookmark'] | //a[@class='news_title']",add_favicon);
}())

スクリーンショット

雑感

• はじめて GreaseMonkey のスクリプトを弄ったけど，結構簡単ですね．ハマりそうだから気をつけます．
• chrome://global/skin/icons/folder-item.png を見付けるのが一番苦労しました．
• はてブで YouTube エントリに追加されるスクリーンショット(?)を「float: right」化した方が見た目が良くなりそうですが，そのままでも問題ないのでやめました．
• cameraLady の Wordpress にトラックバックを送る方法が分かりません．

Permalink | コメント(3) | トラックバック(1) | 17:03