- 追加された行はこの色です。
- 削除された行はこの色です。
[[JavaScript:GoogleChromeのExtensionでJavaScriptを勉強する]]
*JavaScript:ChromeExtension:tutorialのアクセス先をFlickrから「はてな」に変えてみる [#w86439b7]
tutorialのサンプルはflickrにアクセスして写真を撮ってくるってやつだけど、自分はflickr全然使わないので、はてなフォトライフに変えてみた。
***ソース [#pd4582f9]
サンプル同様、ソース3つとアイコン1つです。
-manifest.json
-popup.html
-popup.js
やったこと
-manifest.jsonのpermissionsに「http://f.hatena.ne.jp」を追加
-pupup.jsの中身を改造
実は、これが自分でちゃんと書いた初めてJavaScriptだったりしますw
■manifest.json
{
"manifest_version": 2,
"name": "One-click HatenaFoto",
"description": "This extension demonstrates a browser action with kittens.",
"version": "1.0",
"permissions": [
"http://f.hatena.ne.jp/"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
■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: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
-->
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
■popup.js
var hatenafotoGenerator = {
/**
* HatenaFotoLife URL
*/
BASE_URL_: 'http://f.hatena.ne.jp/' ,
HATENAID : '',
/**
* @public
*/
constructURL_: function() {
if(this.HATENAID == ''){
return this.BASE_URL_ + 'hotfoto?mode=rss';
}
return this.BASE_URL_ + this.HATENAID + '/rss';
},
requestHatenaFotos: function() {
var req = new XMLHttpRequest();
req.open("GET", this.constructURL_(), true);
req.onload = this.showHatenaFotos_.bind(this);
req.send(null);
console.log("test");
},
showHatenaFotos_: function (e) {
var resXML = e.target.responseXML;
var items = resXML.querySelectorAll('imageurlsmall');
for (var i = 0; i < items.length; i++) {
var img = document.createElement('img');
console.log(items[i].firstChild.nodeValue);
img.src = items[i].firstChild.nodeValue;
document.body.appendChild(img);
}
},
};
// Run our generation script as soon as the document's DOM is ready.
document.addEventListener('DOMContentLoaded', function () {
hatenafotoGenerator.requestHatenaFotos();
});
***ポイント [#xaea843c]
ちょっとは待ったところは、はてなフォトライフのRSSの処理で、namespaceをどのように処理すればよいかってこと。
いろいろ試したけど、namespaceの接頭辞を外してアクセスしたらすんなり通ったw
■通ったやつ
var items = resXML.querySelectorAll('imageurlsmall');
■こうやると通らない
var items = resXML.querySelectorAll('hatena:imageurlsmall');
実際はちゃんとnamespaceをごにょごにょすればちゃんと取得できるんだろうけど、、、