livedoor Readerにソーシャルブックマーク登録数を表示するChrome Extensionを作ってみた

最近、Google Chromeがだいぶ使えるようになったから使ってるんだけど、LDRを見ていて、エントリのソーシャルブックマーク登録数を知りたいのに、見れないから困ってた。

Firefoxを使っていたときは、最速インターフェース研究会 :: livedoor Readerに何かくっつけるGreasemonkeyの書き方のGreasemonkeyスクリプトを使っていたんだけど、現在のChromeではGreasemonkeyがそのまま動くような方法は(たぶん)ないので、どうにかしたいと思っていた。

というわけで、同様の機能を持つChrome Extensionを作ってみた。

ダウンロード

ダウンロードは以下からどうぞ。

• SBMCounter for LDR

Mac版Google Chromeの4.0.223.11で動作を確認した。

これは何か

これを入れると、LDRやFastladderを見たときに、各エントリのフッタ部分にはてなブックマークとlivedoorクリップの登録数が表示されるようになる。 以下の画像のような感じ。

大手のニュースサイトなどのフィードは、その全ての記事に興味があるわけじゃないので、取捨選択して読むと思う。その判断の際に、ブクマ数も参考に入れることができるようになる。

仕組み

ma.laさんのGreasemonkeyスクリプトをベースに、これをChrome Extensionとして動くようにしただけ。

作り方

作り方はとっても簡単で、コードも短いので、以下にメモしておく。

フォルダを作る

これから作るいくつかのファイルの置き場所を最初に用意する。

今回は、適当な場所に「SBMCounter4LDR」というフォルダを作った。

manifest.json

まず作るファイルがこのmanifest.json。Chrome Extensionの大事な情報は全部ココ。JSON形式。

{
  "name": "SBMCounter for LDR",
  "version": "0.1",
  "description": "LDR/Fastladderに、各エントリのソーシャルブックマーク登録数を表示する機能を追加します。",
  "content_scripts": [
    {
      "js": ["main.js"],
      "matches": [
        "http://reader.livedoor.com/reader/*",
        "http://fastladder.com/reader/*"
      ]
    }
  ]
}

name, version, descriptionは、このChrome Extensionの説明。 そしてcontent_scriptsのjsのところで、動かしたいjsファイル(今回はmain.js)を指定し、matchesのところで動かすURLの条件(今回はLDRとFastladderのURL)を指定する。

もちろんもっと指定できる項目はあるけど、今回使ったのはこれだけ。

main.js

次は実際に呼び出されるmain.jsを作る。これは普通にJavaScriptで書く。

(function(){
  window.addEventListener('load', function(){
    var urls = [
      chrome.extension.getURL('hatenabookmark.js'),
      chrome.extension.getURL('livedoorclip.js')
    ];
    for(var i = 0; i < urls.length; i++){
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.charset = 'utf-8';
      script.src = urls[i];
      document.body.appendChild(script);
    }
  }, false);
})();

念のため(function(){ })();で囲ってみた。これが必要なのかどうかは知らないけど。

やりたい処理を自由に書くだけ。今回は、hatenabookmark.jsとlivedoorclip.jsの2つのファイルを読み込むようなscript要素をページに挿入するようにした。

最初作っていたときは、ここでいきなりブクマ数カウンタをLDRに追加するようなコードを書いていたけど、なぜか(権限的に？タイミング的に？)うまくできなかった。ちゃんと書いてるのに何も起きない感じ。

で、ページのDOMにscript要素を埋め込んじゃえば動作するだろうと思って、最終的に上記のようなコードになった。

[追記]os0xさんからいただいたコメントによると、ページ内のスクリプトとここで動作するスクリプトはコンテキストが違うので、ページ内に定義された関数はこっちから呼べないとのこと。なので、上でやってるように、ページ内にscript要素を埋め込んじゃうやり方で良いそうです。[/追記]

hatenabookmark.jsとlivedoorclip.js

ここはma.laさんのGreasemonkey版のコードほぼそのまま。windowを取得してそれを使うようになっていたのをやめただけ、かな。さっきのmain.jsがscript要素を生成してページに読ませてるjsファイル。

// http://la.ma.la/misc/userjs/ldr_with_hatena_bookmark_count_images.user.js
(function(){
  var description = 'はてなブックマークにブックマークされている件数です';
  entry_widgets.add('hb_counter', function(feed, item){
    var link = item.link.replace(/#/g,'%23');
    return [
      '<a href="http://b.hatena.ne.jp/entry/', link, '">',
      '<img src="http://d.hatena.ne.jp/images/b_entry.gif" border=0><img style="border:none;margin-left:3px;" ',
      'src="http://b.hatena.ne.jp/entry/image/',link, '"></a>'
    ].join('');
  }, description);
})();

// http://la.ma.la/misc/userjs/ldr_with_livedoor_clip_count_images.user.js
(function(){
  var description = 'livedoorクリップに登録されている件数です';
  entry_widgets.add('ldc_counter', function(feed, item){
    var link = item.link.replace(/#/g,'%23');
    return [
      '<a href="http://clip.livedoor.com/page/', link, '">',
      '<img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_12_w.gif" border=0><img style="border:none;margin-left:3px" ',
      'src="http://image.clip.livedoor.com/counter/', link, '"></a>'
    ].join('');
  }, description);
})();

テストする

作るファイルはこの4つで終了。テストするには、Google Chromeから

chrome://extensions/

というURLにアクセスすると、拡張機能の管理をする画面が開く。ここで「Load unpacked extension...」ボタンを押して、今回のコードが入ったフォルダを選択する。そうするともう読み込まれる。

そしてこれでもう使えるようになった。LDRを開くと(すでに開いてるならリロードすると)、動作を確認できる。バグってたらコードを修正して、読み込まれたExtensionの「Reload」ボタンを押すと、修正が反映される。

配布用のファイルを作る

完成したら、「Pack extension...」ボタンを押して、コードが入ったフォルダを指定する。するとcrxファイルとpemファイルが生成される。ファイル名には、選択したフォルダ名が使われる。

crxがChrome Extensionの本体で、これをWebなどで配布すれば良い。pemの方は、今後このExtensionをアップデートする際に使う(さっきのPack extensionのところで指定する)。

なかなか簡単

だいたいこういうのって、全てを把握しきれないような大きなフォーマットのxmlを書いたり、謎のファイルをいくつか用意したり、フォルダ構成の約束があったり、いろいろと面倒なことが多いと思っていた。だけどChrome Extensionはmanifest.jsonだけ書けばあとは全部自分のやりたい事を書くのみなので、非常に簡単だった。

今回のような簡単なGreasemonkeyスクリプトの移植なら、画面とかも作らなくて良いので入門にはちょうど良い気がする。

非常に参考になった記事

• 先取り！ Google Chrome Extensions：特集｜gihyo.jp … 技術評論社

この記事が激しく参考になった。Firefoxの拡張を作ったときは結構大変だったけど、Chrome Extensionはこの記事を読めばまさにGreasemonkeyスクリプトを書ける程度の知識でいけると思う。すばらしい記事。