2. 프로그램 목적 ¶
- 크롬은 아시다시피 Plug-in을 설치할수 있다 extension program이라고도 하는것 같은데 뭐 쉽게 만들수 있는것 같다. 논문을 살펴보는데 사전기능을 쓰기위해 마우스를 올렸지만 실행이 되지 않았다.. 화난다=ㅂ= 그래서 살짝 살펴보니 .json확장자도 보이는것 같지만 문법도 간단하고 CSS와 HTML. DOM형식의 문서구조도 파악하고 있으니 어렵지 않을것 같았다. 그래서 간단히 네이버 링크를 긁어와 HTML element분석을 통해 Naver사전을 하는 Plug-in을 만들어볼까 한다.
3.1.1. 기본기 ¶
크롬의 개발자 API주소는 지금 사이트 이전을 하고있는데 맨앞에 code가 developer로 이전하는것 같았다. 여튼 index의 주소는 다음과 같다.
Tutorial을 진행하면 다음과 같다.
그런데 이거 확장은 어떻게 실행시켜보냐면
Chrome브라우저에서 환경설정(우측상단에 렌치모양) -> 도구 -> 확장프로그램 -> 우측상단 개발자 모드 Check -> 압축해제된 확장프로그램 로드 를 하면 내 컴퓨터에 있는 플러그인 폴더 째로 올릴수 있다.
3.1.2. 튜토리얼 따라해보기 ¶
flickr에서 permission을 받아 사진을 긁어오는 플러그인을 만드는것 같다. 파일구성은 HTML안에 스타일을 적용하는 CSS. AJAX, Javascript를 이용하여 (AJAX의 정의를 알아보아야겠다 ) 내용을 구성한다. json을 통해 뭘 하는건가. 흥미롭군.
Wikipedia JSON : http://ko.wikipedia.org/wiki/JSON
영어로 보는게 더 자세하지만 난 한국인이라. 간단히 말하자면 인터넷에서 자료를 주고받을때 그 자료형식을 정의하는 문서인데 javascript구문을 사용하는 파일이다. xml보다 web에서 효과적이기 때문에 web상에서 쓰인다고 한다. 좋은거 배우네.
Wikipedia Ajax : http://ko.wikipedia.org/wiki/Ajax
Ajax는 비동기식으로 데이터를 주고받기 위해 (A는 Asyncronous) HTML과 CSS 동적 정보 표시를 위한 동적 언어와 DOM문서형 구조를 가진 XML, json만이 Ajax를 뜻하는 것이 아니라 이런 조합으로 이루어진 비동기 웹 어플리케이션 기법을 뜻한다.
뭐 여기까지 용어정리 됬나.
자 이제 따라해보자.
- 따라하다가 실수한점 : manifest.json파일을 menifest.json이라 해서 update가 안됨. json정의할때 다음 element를 위해 , 를 붙여야하는데 안붙여서 에러. 그렇지만 나머지는 복붙해서 잘 가져옴.
3.1.3. 작성 예제 ¶
- popup.js
// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
var req = new XMLHttpRequest();
req.open(
"GET",
"http://api.flickr.com/services/rest/?" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=hello%20world&" +
"safe_search=1&" + // 1 is "safe"
"content_type=1&" + // 1 is "photos only"
"sort=relevance&" + // another good one is "interestingness-desc"
"per_page=20",
true);
req.onload = showPhotos;
req.send(null);
function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");
for (var i = 0, photo; photo = photos[i]; i++) {
var img = document.createElement("image");
img.src = constructImageURL(photo);
document.body.appendChild(img);
}
}
// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +
"_s.jpg";
}
- popup.html
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body {
min-width:357px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
<!-- JavaScript and HTML must be in separate files for security. -->
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
- manifest.json
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://api.flickr.com/"
]
}
3.1.5. 클릭하면 팝업창 띄우기 구현 ¶
- window.open함수를 이용하여 body를 클릭하면 새로운 팝업창을 띄운다.
- index.html
<html> <head> <script language="javascript"> <!-- function na_open_window(name, url, left, top, width, height, toolbar, menubar, statusbar, scrollbar, resizable) { toolbar_str = toolbar ? 'yes' : 'no'; menubar_str = menubar ? 'yes' : 'no'; statusbar_str = statusbar ? 'yes' : 'no'; scrollbar_str = scrollbar ? 'yes' : 'no'; resizable_str = resizable ? 'yes' : 'no'; window.open(url, name, 'left='+left+',top='+top+',width='+width+',height='+height +',toolbar='+toolbar_str+',menubar=' +menubar_str+',status='+statusbar_str+',scrollbars='+scrollbar_str +',resizable='+resizable_str); } // --> </script> </head> <body onclick = "na_open_window('win', 'popup.html', 50, 100, 100, 30, 0, 0, 0, 0, 0)"> </body> </html>
- 위의 na-open_window는 임의로 만든 함수긴한데 status_bar나 기타 스크롤이 가능하지 않은 popup을 만들고 있다. 0은 false니까.
- popup.html
<html> Hello World! </html>
2012활동지도
