서버시간 알려주는 크롬 확장 프로그램

서버시간알려주는크롬확장프로그램 다운로드하기

웹개발자라면 크롬 확장 프로그램 개발도 도전해보는것도 괜찮을 것 같습니다. 이유는

첫째. 개발이 쉽습니다. html,javascript,css ctrl+c ctrl+v 에 거부감이 없다면 누구나 개발 가능합니다.

둘째. 업데이트도 쉽습니다.크롬웹스토어를 통해 업데이트만 하면 됩니다.

셋째. 좀 복잡한 플러그인을 개발 계획 이라면 API 문서,개발툴,크롬 개발자도구 또는 서비스 서버 등이 필요할지 모르겠습니다만 만들어보면 재미있습니다.

확장프로그램 개발에 필요한 사이트 입니다.

1.크롬 웹스토어 개발자 대쉬 보드입니다. 등록을 위해 5$가 필요하며 앱스토어나 구글 마켓 처럼 개발자등록을 해야 프로그램 게시가 가능합니다. 웹 개발자라면 구글WALLET 계정이 없으면 요번기회에 하나 만들어 놓으세요. 기존 안드로이드 개발자라면 무엇인지 쉽게 이해하고 계실 겁니다.

2 JavaScript APIs 입니다.

이 포스팅에 첨부된 압축파일을 풀어보면 파일이 나오는데 필요한 파일은 다음과 같습니다.

웹 개발할때처럼 일반 html 페이지 만든다고 생각하면 됩니다.

appstyle.css:스타일지정

servertime.html : 메인 html파일

servertime.js : 동작을 맡은 JavaScript파일 입니다.

manifest.json : 앱 전체 설정 파일입니다.

그리고 나머지는 아이콘등 이미지 파일입니다.

json형의 key:value 형태로 설정이된 manifest.json 파일 입니다. 대충 봐도 어떤 부분인지 감이 올겁니다.

name은 앱이름 version은 앱의 버젼 업데이트 할때마다 달라지겠죠? browser_action 이 실재 앱이 실행될 html 파일 을 지정하는 곳입니다.

{

"manifest_version":2,

"name":"사이트서버시간",

"version":"0.1",

"description":"사이트별 서버시간을 알려주는 플러그인 입니다.",

"icons":{ 

"24":"24.png",

"32":"32.png",

"48":"48.png",

"128":"128.png"

},

"browser_action": {

   "default_icon": "icon.png",

   "default_popup": "servertime.html"

 },

"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",

"permissions":["unlimited_storage","notifications"],

"content_scripts": [

   {

"matches": ["http://sdfasdfasdfasf.omsadfasdf/*"],

"css": ["appstyle.css"],

"js": ["jquery.js", "servertime.js"],

"run_at" : "document_end"

   }

]

    }

server.html 파일은 bootstrap을 include해서 botstrap을 사용해서 페이지를 만들었습니다. css 와 실제 동작하는 javascript 파일은 모드 문서내에서

<script src="servertime.js"></script>

와같은 형식으로 include하도록 구성하세요.

앱의 실제 동작을 맞고 있는 servertime.js 입니다 jquery를 사용하였고 getServerTime(host) 함수가 사이트별 시간을 쿼리르 날리는 함수입니다.

function getServertime(host){

$.ajax({

type:'POST',

url:'http://iramine.com/servertimejson/process.php',

data:{'cmd':'getdate','host':host},

dataType:'json',

success:function(data) {

//alert("success"+data.serverdate);

clearTimeout(timer);

st=data.serverdate;

today=new Date(st);

main();

},

error:  function(request, status, error) {

alert("code:"+request.status+ ", message: "+request.responseText+", error:"+error);

},

beforeSend:function(){

//alert(chrome.runtime.getURL());

//$("#sitename").html(host);

},

complete:function(jqXHR, textStatus){

$("#sitename").html(host);

}

});

}

특별한것은 없습니다. ajax로 요청을 날리는 jquery 모습그대로 입니다. 앱이 로드될때나  host를 입력하는 input박스에 enter키 이벤트가 발생할때 이 함수가 호출됩니다

서버는 http://iramine.com/servertimejson/process.php 이곳에 위치하는데  실제 서버시간을 가져오는 부분이 있고 가져온 서버시간 string을 받아서 Date객체를 생성해서 javacript setTimeout()함수를 사용하여 timer를 구현하였습니다.

그리고 timer동작할때마다 현재시간 출력해주면됩니다.

서버쪽 process.php 소스입니다. curl 사용해 해당 host에일반 요청을 날린후에 http 헤더에 붙여오는 그 서버의 시간 스트링을 가져옵니다.

//헤더에서 시간정보 Date 만 가져오는 부분 

foreach($header as $index=>$var)

{

if(strstr($var,"Date"))

{

$rawdate=trim(substr($var,6));

}

}

$rawdate 에는 "Wed, 16 Sep 2015 12:38:22 GMT" 이런 형태의 시간 문자열이 들어갑니다. 이 문자열을 클라이언트인 서버시간앱에서 요청하면 던져주는것입니다.

header('Access-Control-Allow-Origin: *');

$cmd=trim($_POST['cmd']);

$host=trim($_POST['host']);

if(!$cmd) $cmd=$_GET['cmd'];

if(!$host) $host=$_GET['host'];

switch($cmd){

case  "getdate":

$return=getServerDate($host);

$rtn = array("serverdate"=>$return);

echo json_encode_php4($rtn);

break;

default :

$return=getServerDate($host);

$rtn = array("serverdate"=>$return);

echo json_encode_php4($rtn);

break;

}

/*

QUERY 로그 저장..

*/

$params[cmd]=$cmd;

$params[host]=$host;

writelog($params);

//txt파일에서 한라인 뽑아서 encode함. 요청후 헤더를 분석해 서버시간을 알아내는 함수

function getServerDate($queryhost){

$queryhost=str_replace("http://","",$queryhost);

$curl = curl_init();

curl_setopt_array($curl, array(    

CURLOPT_URL => $queryhost,

CURLOPT_HEADER => true,

CURLOPT_RETURNTRANSFER => true,

CURLOPT_NOBODY => true));

if($queryhost)

{

$header = explode("\n", curl_exec($curl));

$rawdate=$header[1];

curl_close($curl);

foreach($header as $index=>$var)

{

if(strstr($var,"Date"))

{

$rawdate=trim(substr($var,6));

}

}

}

return $rawdate;

}

/*

json data encode

*/

function json_encode_php4($a=false)

{

//json 에 맞게 encode 해서 리턴해주는 util 함수 

}

function writelog($params){

//db에 접속하여 요청로그를 저장하는 함수.

}

?>

소스는 여기서 다운 받으세요

 servertime (2).zip

크롬 이용자시면 웹스토어에 설치한후 실제 실행화면을 확인해보세요.

크롬웹스토어 서버시간알아내기 설치하기

서버시간 실행 화면입니다. 

크롬 웹스토어에 올려진 서버시간 알려주는 앱 입니다. 무료이니 설치해 사용해보세요^^

아이콘이나 간단한 디자인 업데이트는 진행할 예정입니다. 그때 다시 웹스토어에서 뵙겠습니다.