Hatena::ブログ(Diary)

今日覚えたこと RSSフィード

2009.10.28

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

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

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

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

ダウンロード

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

MacGoogle Chromeの4.0.223.11で動作を確認した。

これは何か

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

f:id:nacookan:20091029012847p:image

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

仕組み

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

作り方

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

フォルダを作る

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

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

manifest.json

まず作るファイルがこのmanifest.jsonChrome 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の条件(今回はLDRFastladderURL)を指定する。

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

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に追加するようなコードを書いていたけど、なぜか(権限的に?タイミング的に?)うまくできなかった。ちゃんと書いてるのに何も起きない感じ。

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

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

hatenabookmark.jsとlivedoorclip.js

ここはma.laさんのGreasemonkey版のコードほぼそのまま。windowを取得してそれを使うようになっていたのをやめただけ、かな。さっきのmain.jsscript要素を生成してページに読ませてる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ファイルが生成される。ファイル名には、選択したフォルダ名が使われる。

f:id:nacookan:20091029012848p:image

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

なかなか簡単

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

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

非常に参考になった記事

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

os0xos0x 2009/10/29 09:09 こんにちは。記事を参考にして頂けたようで何よりです。
>現在のChromeではGreasemonkeyがそのまま動くような方法は(たぶん)ない
ChromeにはUser Scriptsというものもあります。
http://chrome.half-moon.org/45.html
あたりが結構詳しいです。
ただ、Extensionsは開発が着々と進んでいますが、UserScriptsは放置状態です。今後はExtensionsがメインになることは間違いありません。

>なぜか(権限的に?タイミング的に?)うまくできなかった。ちゃんと書いてるのに何も起きない感じ。
これはサイト側のJavaScriptとContentScriptが全く別のコンテキストで実行されるため、livedoor Reader側で定義された関数などがContentScriptからは一切見えないためです。
で、ご察しの通り、script要素を埋めん込んであげれば、そのscriptはサイト側のコンテキストで実行されるので、entry_widgetsなどにアクセスできるようになります。

nacookannacookan 2009/10/29 11:39 ありがとうございます。
なるほど、あのやり方で良かったのであれば安心しました。
日記にも追記しておきます。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証