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

    • 매 .


  • 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.0085 sec