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 . . 는 들.
