2. ¶
- 크 Plug-in 할 extension program 하 . 펴 해 행 .. 화=ㅂ= 펴 .json확 하 CSS HTML. DOM형 파하 . 히 크 HTML element 통해 Naver 하 Plug-in 한.
4.1. 하 하 하 ¶
- Chrome extention overview
- Overview
- Tutorial (getstarted) with fileset(manifest.json,.js,.html)
- manifest.json attribute.
- Contents policy security. 확 하 하
- Overview
4.2.1. ¶
크 API 트 하 code developer 하 . index .
Tutorial 행하 .
확 행
Chrome 환( ) -> -> 확 -> Check -> 해 확 하 퓨 플 폴 .
4.2.2. 튜토 해 ¶
flickr permission 플 . 파 HTML 하 CSS. AJAX, Javascript 하 (AJAX ) 한. json 통해 하. 흥.
Wikipedia JSON : http://ko.wikipedia.org/wiki/JSON
하 한. 히 하 형 하 javascript 하 파. xml web 효 web 한. .
Wikipedia Ajax : http://ko.wikipedia.org/wiki/Ajax
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.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.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 해한. 힘. .