크롬확장기능 개발,

원래, 크롬은 거들떠보지도 않았다.

난 회색색상의 IE가 더 이쁘고 IEToy나 ActiveX까지 잘 띄워주니 사용자로써는 그닥 불편한점을 못느끼고 있었다.

하지만,

노트북성능에서는 렌더링이 너무 느려서…..T.T

2배이상 빠른 크롬을 메인 브라우져 바꾸어보려는 시도를 하였고 확장성을 조사하는 중에 불여우처럼 크롬도 확장기능이 있음을 알았다.

재미있는 기능인거 같아서, 따라하기식의 예제(http://code.google.com/chrome/extensions/)로 로컬에서 테스트해보았는데…

오!! 재미있다 ㅎ

기본아키텍쳐는 기존 가젯이나 위젯개발하듯 웹페이지를 만들어 확장하는 형태이다.
http://www.youtube.com/watch?v=bmxr75CV36A&feature=PlayList&p=CA101D6A85FE9D4B&index=2
재미있는게 없을까 고민하다.
샘플용으로 네이버 실시간검색어 페이지 만들어 배포를 해보았다.
좀 더 재미있는 아이디어를 생각해봐야겠다. ^^
코드는 간단해서 200줄내외이고,
여튼 다운로드는 여기에서~

Download

실행화면

manifest.json

{
	"name": "네이버 실시간급상승검색어",
	"version": "1.1",
	"description": "powered by NaverOpenApi",
	"permissions": [
	"http://openapi.naver.com/"
	],
	"browser_action": {
	"default_icon": "icon.png",
	"default_title": "",
	"popup": "popup.html"
	},
	"icons": {
	"128": "icon_128.png"
	}
}

popup.html

var g_NaverRealtimeRankingList = new Array();
var g_request;
function requestNaverRealtimeRanking()
{
	request = new XMLHttpRequest();
	request.open(
	"GET",
	"http://openapi.naver.com/search?key=f5e0e9e35bba47b9ddc09f9f5fb23219&target=rank&query=nexearch",
	true);
	request.onload = processNaverRealtimeRanking;
	request.send(null);
}
function processNaverRealtimeRanking()
{
	processParsing( request.responseXML.getElementsByTagName("result")[0].firstChild );
	drawRanking();
}
function drawRanking()
{
	var rankingDivNode = document.getElementById("nexearch_floatingBox");
	rankingDivNode.innerHTML = '';
	for(var i=0;i<g_NaverRealtimeRankingList.length;i++)
	{
	var rankingNode = generateRankingNode(g_NaverRealtimeRankingList[i]);
	rankingDivNode.appendChild(rankingNode);
	}
	
	var rankingDateDivNode = document.getElementById("nexearch_rtrank_date");
	rankingDateDivNode.innerHTML = getDate();
}
function getDate()
{
	var today = new Date();
	var year = today.getYear();
	var month = today.getMonth() + 1;
	var date = today.getDate();
	var hour = today.getHours();
	var minute = today.getMinutes();
	var second = today.getSeconds();
	return year + "." + month + "." + date + " " + hour + ":" + minute;
}
function processParsing( rankingNodes )
{
	for(var i=0;i<rankingNodes.childNodes.length;i++)
	{
	var childNode = rankingNodes.childNodes[i];
	var keyword = getNodeValue(childNode.childNodes[0]);
	var state = getNodeValue(childNode.childNodes[1]);
	var volatility = getNodeValue(childNode.childNodes[2]);
	var naverRealtimeRanking = new NaverRealtimeRanking();
	naverRealtimeRanking.setRank(i+1);
	naverRealtimeRanking.setKeyword(keyword);
	naverRealtimeRanking.setState(state);
	naverRealtimeRanking.setVolatility(volatility);
	g_NaverRealtimeRankingList[i] = naverRealtimeRanking;
	}
}
function generateRankingNode(rank)
{
	var rankingNode = document.createElement("li");
	var wappingDiv = document.createElement("div");
	wappingDiv.style = "opacity: 0.6; top: 18px;";
	var link = document.createElement("a");
	link.href = "http://search.naver.com/search.naver?where=nexearch&query="+rank.getKeyword();
	link.target = "_blank";
	var rankValueNode = document.createElement("em");
	rankValueNode.innerHTML = rank.getRank() + ".";
	var keywordNode = document.createElement("strong");
	keywordNode.innerHTML = rank.getKeyword();
	var stateNode = document.createElement("span");
	var stateNodeImage = document.createElement("image");
	stateNodeImage.src = rank.getStateImage();
	stateNode.appendChild(stateNodeImage);
	stateNode.innerHTML = stateNode.innerHTML + rank.getVolatility();
	
	link.appendChild(rankValueNode);
	link.appendChild(keywordNode);
	link.appendChild(stateNode);
	wappingDiv.appendChild(link);
	rankingNode.appendChild(wappingDiv);
	return rankingNode;
}
function getNodeValue(node)
{
	return node.firstChild.nodeValue;
}
var NaverRealtimeRanking = function()
{
	this.rank = -1;
	this.keyword;
	this.state;
	this.volatility;
	
	this.getRank = function() {
	return this.rank;
	}
	this.setRank = function(rank) {
	this.rank = rank;
	}
	this.getKeyword = function() {
	return this.keyword;
	}
	this.setKeyword = function(keyword) {
	this.keyword = keyword;
	}
	this.getState = function() {
	return this.state;
	}
	this.setState = function(state) {
	this.state = state;
	}
	this.getVolatility = function() {
	return this.volatility;
	}
	this.setVolatility = function(volatility) {
	this.volatility = volatility;
	}
	this.getStateImage = function() {
	var img = '1';
	switch(this.state)
	{
	case "+":
	img = "http://sstatic.naver.com/search/img/ico_rank_up.gif";
	break;
	case "-":
	img = "http://sstatic.naver.com/search/img/ico_rank_down.gif";
	break;
	case "new":
	img = "http://sstatic.naver.com/search/img/ico_rank_new.gif";
	break;
	}
	return img;
	}
};
window.onload = requestNaverRealtimeRanking;
setInterval('requestNaverRealtimeRanking()',60000);

<div class="NaverRealtimeRanking">
<div id="rising" class="realrank naside" style="display:block;">
	<h3>실시간급상승검색어</h3>
	<div class="rank_list">
	<ul id="nexearch_floatingBox">
	</ul>
	<div class="help">
	<a target="_blank" href="http://help.naver.com/faq/faqRealtimeKeyword.jsp" title="실시간 급상승 검색어는 어떤 서비스입니까?">도움말</a>
	<span class="date" id="nexearch_rtrank_date"></span>
	</div>
	</div>
</div>
<div style="margin:0 auto;text-align:center;padding:10px;">
	<img src="http://openapi.naver.com/logo/logo07_1.gif" />
</div>
</div>

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중