U E D R , A S I H C RSS
ZeroWiki

Plugin/Chrome/네이버사전


1. 참여자

2. 프로그램 목적


  • 크롬은 아시다시피 Plug-in을 설치할수 있다 extension program이라고도 하는것 같은데 뭐 쉽게 만들수 있는것 같다. 논문을 살펴보는데 사전기능을 쓰기위해 마우스를 올렸지만 실행이 되지 않았다.. 화난다=ㅂ= 그래서 살짝 살펴보니 .json확장자도 보이는것 같지만 문법도 간단하고 CSS와 HTML. DOM형식의 문서구조도 파악하고 있으니 어렵지 않을것 같았다. 그래서 간단히 네이버 링크를 긁어와 HTML element분석을 통해 Naver사전을 하는 Plug-in을 만들어볼까 한다.

3. 필요 기술

4. 프로그램 일지


4.1. 꼭 봐야하는 중요하다고 생각하는 것


  • Chrome extention overview
    1. Overview
    2. Tutorial (getstarted) with fileset(manifest.json,.js,.html)
    3. manifest.json의 attribute.
    4. Contents policy security. 확장기능 작성하는데 꼭 알아야하는 작성법

4.2. 처음 시작해보자


4.2.1. 기본기


크롬의 개발자 API주소는 지금 사이트 이전을 하고있는데 맨앞에 code가 developer로 이전하는것 같았다. 여튼 index의 주소는 다음과 같다.


Tutorial을 진행하면 다음과 같다.


그런데 이거 확장은 어떻게 실행시켜보냐면

Chrome브라우저에서 환경설정(우측상단에 렌치모양) -> 도구 -> 확장프로그램 -> 우측상단 개발자 모드 Check -> 압축해제된 확장프로그램 로드 를 하면 내 컴퓨터에 있는 플러그인 폴더 째로 올릴수 있다.

4.2.2. 튜토리얼 따라해보기


flickr에서 permission을 받아 사진을 긁어오는 플러그인을 만드는것 같다. 파일구성은 HTML안에 스타일을 적용하는 CSS. AJAX, Javascript를 이용하여 (AJAX의 정의를 알아보아야겠다 ) 내용을 구성한다. json을 통해 뭘 하는건가. 흥미롭군.


영어로 보는게 더 자세하지만 난 한국인이라. 간단히 말하자면 인터넷에서 자료를 주고받을때 그 자료형식을 정의하는 문서인데 javascript구문을 사용하는 파일이다. xml보다 web에서 효과적이기 때문에 web상에서 쓰인다고 한다. 좋은거 배우네.


Ajax는 비동기식으로 데이터를 주고받기 위해 (A는 Asyncronous) HTML과 CSS 동적 정보 표시를 위한 동적 언어와 DOM문서형 구조를 가진 XML, json만이 Ajax를 뜻하는 것이 아니라 이런 조합으로 이루어진 비동기 웹 어플리케이션 기법을 뜻한다.

뭐 여기까지 용어정리 됬나.

자 이제 따라해보자.

  • 따라하다가 실수한점 : manifest.json파일을 menifest.json이라 해서 update가 안됨. json정의할때 다음 element를 위해 , 를 붙여야하는데 안붙여서 에러. 그렇지만 나머지는 복붙해서 잘 가져옴.

4.2.2.1. 첫번째 작성 예제


  • 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/"
  ]
}

4.2.3. 내가 원하는것


  • 마우스를 올리고 몇초가 지나면 Text를 읽어서 작은 팝업창을 띄움 - 3순위
  • 텍스트를 더블클릭하면 팝업이 자동열리면서 사전을 띄워줌 - 1순위

4.2.3.1. 클릭하면 팝업창 띄우기 구현


  • 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 ondblclick = "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니까.
  • javascript의 다른 예제를 확인하니 document.body.ondblclick = 함수명 을 작성하면 똑같이 작동되는것을 확인했다.

  • popup.html

<html>
Hello World!

</html>

4.2.4. Google Chrome extension Sample


4.2.4.1. History 지워주는 extension

  • 충격과 공포다. 구글에서 제공해준 Sample이 잘못되있어서 한참을 해멨다.


{
  "name" : "BrowsingData API: Basics",
  "version" : "1.1",
  "description" : "A trivial usage example.",
  "permissions": [
    "browsingData"
    
  ],
  "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html" //이게 그냥 popup으로 되있었다. browser_action을 보니 default_popup을 해야지 action icon을 눌렀을때 popup이 뜬다.
  },
  "manifest_version": 2
}

4.2.4.2. Contents policy security

  • 이건 매우 강조되어야한다.

  • 링크 : http://code.google.com/chrome/extensions/contentSecurityPolicy.html

  • inline script를 cross script attack을 방지하기 위해 html과 contents를 분리 시킨다고 써있다. 이 규정에 따르면 inline으로 작성되어서 돌아가는 javascript는 모두 .js파일로 빼서 만들어야한다. <div OnClick="func()"> 와 같은 html 태그안의 inline 이벤트 attach도 안되기 때문에 document의 쿼리를 날리던가 element를 찾아서 document.addEventListener 함수를 통해 event를 받아 function이 연결되게 해야한다. 아 이거 힘드네. 라는 생각이 들었다.

4.3. 헤메는 것


  • Chrome extention의 overview를 읽어보았는데 다양한 기능을 지원한다. 그중에 extention에서 기본으로 제공하는 background.html이라는것이 있는데 이것이 extention기능으로 넣어놓은 script를 모두 포함하고 메인 페이지 밑단에 background에서 계속돌아가면서 이벤트 체킹이나 데이타 처리를 해주는것 같았다. 아직도 정확히 모르겠다 - 2012/7/3

  • 그래서.. 샘플코드를 찾고 permission을 찾다가 manifest.json파일에서 background를 설정하는것을 찾았다 


"background": { "scripts": ["background.js"] },
  "permissions": [
    "tabs", "http://*/*"
  ],
조금더 찾아보자


Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:24:00
Processing time 0.0256 sec