実用的なExtensionの作成
ここまででExtensionの開発に必要な知識は一通り学びました。ここで復習も兼ねて,
どういったExtensionが実用的であるかは悩ましいところですが,
FirefoxのAdd-onではSBMカウンタなどがあります。また,
ToolstripのHTML/ CSS
まずは,
ToolstripのHTML
<ul id="sbmlist">
<li class="add">
<a id="add_hatena" target="_blank" title="はてなブックマークに追加">
<img src="hatena.favicon.gif" id="icon_hatena">
</a>
</li>
<li class="counter">
<a id="text_hatena" target="_blank"> </a>
</li>
<li class="add">
<a id="add_delicious" target="_blank" title="Save this bookmark">
<img src="delicious.small.gif" id="icon_delicious">
</a>
</li>
<li class="counter">
<a id="text_delicious" target="_blank"> </a>
</li>
</ul>
ToolstripのCSS
#sbmlist{
display:table;
margin:5px 3px;
list-style-type:none;
height:18px;
min-width:8em;
}
#sbmlist li{
display:table-cell;
vertical-align:middle;
}
#sbmlist li.counter{
min-width:2.5em;
text-align:center;
padding:0 3px 0 0;
}
HTMLはulとliのリストで構成し,
APIを処理するJavaScriptの実装
続いて,
ページのURLの取得⇒リクエスト⇒アップデート処理と,
SBMクラスの実装
function SBM(service){
this.text = document.getElementById('text_' + service.id);
this.icon = document.getElementById('icon_' + service.id);
this.add = document.getElementById('add_' + service.id);
this.api_get = service.api_get;
this.api_link = service.api_link;
this.api_add = service.api_add;
this.responceFilter = service.responceFilter;
this._cache = {};
}
SBM.prototype = {
request:function _sbm_request(only_request){
var self = this, xhr = new XMLHttpRequest();
var api_url = this.replace(this.api_get);
xhr.open('GET', api_url, true);
xhr.onload = function(){
var count = self.responceFilter(xhr.responseText);
self._cache[self.url] = {count:count};
if (!only_request) self.update(count);
};
xhr.send();
},
set:function _sbm_set(url, force_request, only_request){
if (!only_request) {
this.text.textContent = '-';
}
this.url = url;
this.encoded_url = encodeURIComponent(url);
if ((force_request || only_request) || !this._cache[url]) {
this.request(only_request);
} else {
this.update(this._cache[url].count);
}
},
update:function _sbm_update(count){
this.text.textContent = count;
this.text.href = this.replace(this.api_link);
this.add.href = this.replace(this.api_add);
},
replace:function _sbm_replace(str){
var self = this;
return str.replace(/#\{([^}]+)\}/g, function(_, _$){
return self[_$] || '';
});
}
};
まずsetメソッドでURLを設定し,
APIのレスポンスの形式は各サービスごとに異なるので,
Servicesの定義
var Services = [
{
id:'hatena',
api_get:'http://b.hatena.ne.jp/entry.count?url=#{encoded_url}',
api_link:'http://b.hatena.ne.jp/entry/#{url}',
api_add:'http://b.hatena.ne.jp/add?&url=#{encoded_url}',
responceFilter:function(text){
if (/\D/.test(text)) {
return '';
} else {
return text;
}
}
},
{
id:'delicious',
api_get:'http://badges.del.icio.us/feeds/json/url/blogbadge?url=#{encoded_url}',
api_link:'http://delicious.com/url/#{hash}',
api_add:'http://delicious.com/save?v=5&jump=close&url=#{encoded_url}',
responceFilter:function(text){
try {
var r = JSON.parse(text);
if (r.length === 0) {
return '';
}
this.hash = r[0].hash;
return r[0].total_posts;
} catch (e) {
console.error(e);
return '';
}
}
}
];
var services = Services.map(function(service, i){
return new SBM(service);
});
ChromeではJSON.
ここまでは一般的なJavaScriptの実装です。ここからは本題であるExtensions APIの使い方を見ていきます。