// 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";
}
<!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>
{
"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/"
]
}
<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>
<html> Hello World! </html>
{
"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
}
<div OnClick="func()"> 와 같은 html 태그안의 inline 이벤트 attach도 안되기 때문에 document의 쿼리를 날리던가 element를 찾아서 document.addEventListener 함수를 통해 event를 받아 function이 연결되게 해야한다. 아 이거 힘드네. 라는 생각이 들었다.
"background": { "scripts": ["background.js"] },
"permissions": [
"tabs", "http://*/*"
],