U E D R , A S I H C RSS

Plugin/Chrome/네이버사전


2.


  • Plug-in extension program . .. 화=ㅂ= .json확 CSS HTML. DOM형 . HTML element 통해 Naver Plug-in .

3.

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

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