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.0230 sec