HiiHahWIKI - making some notes for... -
JavaScript：ChromeExtension：tutorialのアクセス先をFlickrからはてなに変えてみる
をテンプレートにして作成
開始行:
[[JavaScript：GoogleChromeのExtensionでJavaScriptを勉強す...
*JavaScript：ChromeExtension：tutorialのアクセス先をFlick...
tutorialのサンプルはflickrにアクセスして写真を撮ってくる...
元のソースとかはこちらから
-https://developer.chrome.com/extensions/getstarted.html
***ソース [#pd4582f9]
サンプル同様、ソース3つとアイコン1つです。
-manifest.json
-popup.html
-popup.js
やったこと
-manifest.jsonのpermissionsに「http://f.hatena.ne.jp」を...
-pupup.jsの中身を改造
実は、これが自分でちゃんと書いた初めてJavaScriptだったり...
■manifest.json
{
"manifest_version": 2,
"name": "One-click HatenaFoto",
"description": "This extension demonstrates a browser ...
"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: s...
- Policy documentation[1] for details and explanat...
-
- [1]: http://developer.chrome.com/extensions/cont...
-->
<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);
},
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].namespaceURI,items[i].firstCh...
img.src = items[i].firstChild.nodeValue;
document.body.appendChild(img);
}
},
};
// Run our generation script as soon as the document's D...
document.addEventListener('DOMContentLoaded', function (...
hatenafotoGenerator.requestHatenaFotos();
});
***ポイント [#xaea843c]
ちょっとは待ったところは、はてなフォトライフのRSSの処理で...
結論としては、XMLHttpRequestのレスポンスの「responseXML」...
■通ったやつ
var items = resXML.querySelectorAll('imageurlsmall');
■こうやると通らない
var items = resXML.querySelectorAll('hatena:imageurlsmal...
また、実際に取得した要素でnamespaceも含めて評価したい場合...
■ためしに「namespaceURI」をコンソールに出力してみた
console.log(items[i].namespaceURI,items[i].firstChild.no...
（出力）＝＞http://www.hatena.ne.jp/info/xmlns# http://c...
ふむふむ、なるほどねー
終了行:
[[JavaScript：GoogleChromeのExtensionでJavaScriptを勉強す...
*JavaScript：ChromeExtension：tutorialのアクセス先をFlick...
tutorialのサンプルはflickrにアクセスして写真を撮ってくる...
元のソースとかはこちらから
-https://developer.chrome.com/extensions/getstarted.html
***ソース [#pd4582f9]
サンプル同様、ソース3つとアイコン1つです。
-manifest.json
-popup.html
-popup.js
やったこと
-manifest.jsonのpermissionsに「http://f.hatena.ne.jp」を...
-pupup.jsの中身を改造
実は、これが自分でちゃんと書いた初めてJavaScriptだったり...
■manifest.json
{
"manifest_version": 2,
"name": "One-click HatenaFoto",
"description": "This extension demonstrates a browser ...
"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: s...
- Policy documentation[1] for details and explanat...
-
- [1]: http://developer.chrome.com/extensions/cont...
-->
<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);
},
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].namespaceURI,items[i].firstCh...
img.src = items[i].firstChild.nodeValue;
document.body.appendChild(img);
}
},
};
// Run our generation script as soon as the document's D...
document.addEventListener('DOMContentLoaded', function (...
hatenafotoGenerator.requestHatenaFotos();
});
***ポイント [#xaea843c]
ちょっとは待ったところは、はてなフォトライフのRSSの処理で...
結論としては、XMLHttpRequestのレスポンスの「responseXML」...
■通ったやつ
var items = resXML.querySelectorAll('imageurlsmall');
■こうやると通らない
var items = resXML.querySelectorAll('hatena:imageurlsmal...
また、実際に取得した要素でnamespaceも含めて評価したい場合...
■ためしに「namespaceURI」をコンソールに出力してみた
console.log(items[i].namespaceURI,items[i].firstChild.no...
（出力）＝＞http://www.hatena.ne.jp/info/xmlns# http://c...
ふむふむ、なるほどねー
ページ名:
