はてなブックマークのコメントがニコニコ動画的に表示されるChrome Extensionを作ってみました。

　なんとなく思いついたので、はてなブックマークのコメントが、ブラウザ上でニコニコ動画的に表示されるChrome Extensionを作ってみました。
　
　Chromeマーケットにのせるようなものでもないので、とりあえずzipを貼り付けておく。
　→zipファイル

　
　

とりあえず、ソースコードを以下に示します。
なお、ニコニコ動画的に文字を流す処理には、R9ラボのNicoScreen.jsというJQueryプラグインを利用させて頂きました。
■manifest.json

{
	"name": "HateCome",
	"version": "1.0",
	"description": "はてなブックマークのコメントを表示",
	"browser_action": {
		"default_icon": "icon.png", // アイコンの画像ファイル
		"popup": "popup.html" // ポップアップ表示されるHTMLファイル
	},
	"content_scripts": [
		{
			"matches": ["http://*/*","https://*/*"],
			"css": [],
			"js": ["jquery-1.6.2.min.js","nicoscreen.js","hatecome.js"],
			"all_frames": true,
			"run_at":"document_end"
		}
	],
  "permissions": [
	"tabs",
	"http://*/*", "https://*/*"
  ]
}

■hatecome.js

var addComments=function(list){
	$("html").css("height","100%");
	var body=$("body");
	body.attr("id","nicoscreen");
	var h=getPageHeight();
	body.css("width","100%");
	body.css("height",h+"px");
	var sp=list.split(",");
	var obj = {
		"base":{
			color:"black",
			speed:"slow",
			interval:"normal",
			font_size:"48px",
			loop:true
		},
		"comments":sp
	};
	nicoscreen.set(obj);
	nicoscreen.start();
	body.css("overflow-y","auto");
};

var getPageHeight=function(){
	var yScroll;
	if (window.innerHeight && window.scrollMaxY) {
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){
		yScroll = document.body.scrollHeight;
	} else {
		yScroll = document.body.offsetHeight;
	}
	var windowHeight;
	if (self.innerHeight) {
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) {
		windowHeight = document.body.clientHeight;
	}
    if(yScroll < windowHeight){
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }
    return pageHeight;
};

■popup.html

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
chrome.tabs.getSelected(window.id, function (tab) {
	$.ajax({
		type: "GET",
		url: "http://b.hatena.ne.jp/entry/jsonlite/",
		data:{
			"url":tab.url
		},
		dataType: "jsonp",
		success: function(json) {
			var comments=getComments(json.bookmarks);
			chrome.tabs.executeScript(window.id,
				{code:"addComments('"+comments+"')"});
			window.close();
		},
		error : function(){}
  });
});

var getComments=function(obj){
	var n=obj.length;
	var comments=[];
	for(var i=0;i<n;i++){
		var com=obj[i].comment;
		if(com)comments.push(com);
	}
	return comments;
};
</script>

Related posts:

1. Google ChromeのExtensionをもう少し作ってみる。
2. Google Chrome Extensionを作ってみる。
3. HTML5-Canvas版Mouse Toy
4. Google ChromeでScreenShotを撮ってお絵描きするextensionを作ってみた。
5. AndroidでJavaScriptのタッチイベントを試してみた。(2) #android #js