Jetpackでニコ動再生数表示Jetpack Featureを作ってみた

Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記の記事を見て「Jetpack」なる物がリリースされた事を知ったので、早速使ってみた。
JetpackはJavascriptでFireFoxの拡張が作れるという物。しかもjQuery付き。
公式サイトは

作ったものはこちらからインストール出来ますhttp://mame-lab.com/jet/

簡単な説明

先ずは上記公式サイトから拡張をインストール。
(Jetpackの設定ページを開くと、Fx3.5とFirebug1.4preを推薦というメッセージが出ますが動きます)
デバッグなどはFirebugを使うと便利です。
Jetpack FeatureをインストールするにはグリモンみたいにFx上にドロップするのではダメで、インストール用のページが必要です。
しかし、JetpackのページのDevelopタブでフォームにコードを入力する事でデバッグできます。

設定ページは「about:jetpack」で開きます。
こんな感じ。

Developタブを開くと

赤丸で囲んでいるところをクリックすると実行できます。
about:jetpackを開くと自動的にFirebugが開くと思いますが、このフォームで実行して出たエラーや警告などはFirebug上に出力されます。

Jetpack Featureの管理もこのページで行います。
Installed Featureタブ内で、uninstall出来ます。
また、インストール元サイトへも行けます。
しかし、uninstallしただけでは、完全には消えておらず無効になっているだけなので、完全に削除するにはPurgeします。

早速作ってみた

早速作ってみました。

こんな感じで、ステータスバーに再生数が表示されます。
10分おきに更新されます。
クリックするとニコニコ動画TOPページが新しいタブで開きます。
インストールボタンを押すと、赤い警告ページが開きますが、コードを確認して、ページ下のインストール続行のボタンを押せばインストール完了です。

コードはこんな感じです。

(function(){
	function updatePlayCounter(doc){
		$.get("http://mame-lab.com/ncount/nico_count.txt",function(count){
			if(count){
				var play_count = count.split("=");
				$("#play_count", doc).text(play_count[1]);
			}
		});
	}

	Jetpack.statusBar.append({
		html: <>
			<img src="http://www.nicovideo.jp/img/favicon.ico"/>
			<span id="play_count"></span>
		</>,
		onReady: function(doc){
			$(doc).click(function(){
				Jetpack.tabs.open("http://www.nicovideo.jp/");
				Jetpack.tabs[Jetpack.tabs.length-1].focus();
			});
			$("#play_count", doc).css({
				position: "absolute",
				top: "1px",
				left: "20px",
				fontSize: "10pt",
				cursor: "pointer"
			});
			updatePlayCounter(doc);
			setInterval(function(){updatePlayCounter(doc);}, 10*60*1000);
		},
		width: 120
	});
})();

簡単に作る事が出来ます。

インストールページには

<link rel="jetpack" href="jsファイル">

を書くだけです。

困った時に

実は、何回かJetpackが壊れてしまい、設定ページが上手く動作しなくなってしまいました。
アドオンの管理から削除して、再インストールしても直らなかったのですが、「C:\Documents and Settings\ユーザ名\Application Data\Mozilla\Firefox\Profiles\*****.default」中の

1. jetpack_ann.sqlite
2. jetpack-editor-code.txt
3. jetpack-tutorial-code.txt

の3つのファイルが残っていたので、これらを削除して再インストールを行うと元に戻りました。