'크롬'에 해당되는 글 1건

  1. 2013.01.26 구글 크롬 확장 프로그램 만들기

구글 크롬을 사용하면서 빠른 속도에 반했는데 확장프로그램을 사용하면서 

놀라운 기능에 또한번 감탄을 했습니다 

결국 직업 특성상 개발을 시작하려고 하는데, 뭐부터 해야 할지 망막함이 또 드는군요

Get started: 개발자를 위한 정보

모든 프로그램의 기초는 역시 Hello, World 만들기 부터 시작하는군요

Tutorial: Getting Started (Hello, World!)

Hello World 영문이지만, 원어민 수준이라 간단하군요
내용은 대충
manifest.json 텍스트 파일을 만들어서 소스 붙여 넣고

01{
02  "name": "My First Extension",
03  "version": "1.0",
04  "description": "The first extension that I made.",
05  "browser_action": {
06    "default_icon": "icon.png",
07    "popup": "popup.html"
08  },
09  "permissions": [
11  ]
12}

다음은 아이콘 이미지를 다운로드 받아 같은 manifest.json 와 같은 폴더에 저장 하시고

아래 소스를 popup
.html 로 저장합니다.

01<style>
02body {
03  min-width:357px;
04  overflow-x:hidden;
05}
06 
07img {
08  margin:5px;
09  border:2px solid black;
10  vertical-align:middle;
11  width:75px;
12  height:75px;
13}
14</style>
15 
16<script>
17var req = new XMLHttpRequest();
18req.open(
19    "GET",
21        "method=flickr.photos.search&" +
22        "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
23        "text=hello%20world&" +
24        "safe_search=1&"  // 1 is "safe"
25        "content_type=1&"  // 1 is "photos only"
26        "sort=relevance&"  // another good one is "interestingness-desc"
27        "per_page=20",
28    true);
29req.onload = showPhotos;
30req.send(null);
31 
32function showPhotos() {
33  var photos = req.responseXML.getElementsByTagName("photo");
34 
35  for (var i = 0, photo; photo = photos[i]; i++) {
36    var img = document.createElement("image");
37    img.src = constructImageURL(photo);
38    document.body.appendChild(img);
39  }
40}
41 
43function constructImageURL(photo) {
44  return "http://farm" + photo.getAttribute("farm") +
45      ".static.flickr.com/" + photo.getAttribute("server") +
46      "/" + photo.getAttribute("id") +
47      "_" + photo.getAttribute("secret") +
48      "_s.jpg";
49}
50</script>

다음은 구글 크롬을 실행한다음 오른쪽상단의 사용자설정및 관리 ICON을 클릭 하세요.


아이콘을 클릭한다음, 도구 의 > 확장 프로그램 메뉴를 클릭 합니다. 

그럼 아래와 같은 화면이 뜨고 오른편에 "개발자 모드"를 클릭하면  



개발자 모드 버튼이 3가지 보이는데, 여기서 "압축해제된 확장 프로그램 로드..." 버튼을 클릭한 다음

위에서 저장했던 폴더를 지정하면, 확장 프로그램 아이콘이 생기네요. 

완성된 Hello World 화장 프로그램 소스 입니다.
 


확장프로그램을 만드는건 간단한데, 중요한건 이제 부터가 시작이군요

그래도 다양한 샘플 소스가 있어 도움이 많이 될듯하네요 :  확장프로그램 샘플소스 

아 기초 파악하고 나니 역시 귀차니즘 현상이 밀려오네요. 오늘은 이만...


http://linuxforge.tistory.com/73

Posted by Corealight

댓글을 달아 주세요