JetpackでFirefox拡張を書いてみたので公開
Firefox 拡張を jQuery で書く! Jetpack を使ってみた。を見て面白そうだったので作ってみました。インストールすると現在見ているサイトのQRコードを表示できます。
QR code Manager
http://webtech.s262.xrea.com/blog/jetpack/qrm/
コードはこちら
// Google Chart APIでQRコードを生成 function getChartURL(url){ var encode_url = encodeURIComponent(url); return 'http://chart.apis.google.com/chart?chs=120x120&cht=qr&chl='+encode_url; } // ステータスバーに追加 jetpack.statusBar.append({ html: '<img src="http://webtech.s262.xrea.com/blog/jetpack/qrm/icon.jpg" style="width:20px;">', onReady: function(widget){ // 履歴保存用 if(!jetpack.sessionStorage.qrm){ jetpack.sessionStorage.qrm = {}; jetpack.sessionStorage.qrm.history = new Array(); } $(widget).click(function(){ var doc = jetpack.tabs.focused.contentDocument; var url = jetpack.tabs.focused.url; var history = jetpack.sessionStorage.qrm.history; var a_style = 'font-size:12px; color:black; padding2px;'; // ウィジェットの開閉用 if($('#qrm_box', doc).length > 0){ $('#qrm_box', doc).remove(); return; } if($.inArray(url, history) == -1){ history.push(url); } var box = $('<div id="qrm_box">') .css({ width: '600px', height: '200px', background: '#ffffff', border: '1px solid #000000', position: 'fixed', bottom: '10', right: '10', zIndex: '10000' }); var history_list = $('<div id="qrm_history">') .css({ width: '430px', height: '150px', overflow: 'auto', textAlign: 'left', margin: '10px 10px 10px 150px' }); $.each(history, function(k, v){ $(history_list).append('<a href="#" style="'+a_style+'">'+v+'</a><br>'); }); var qr_img = $('<div>') .css({ width: '150px', float: 'left' }) .append('<img id="qrm_qr" src="'+getChartURL(url)+'">'); var footer = $('<div>') .css({ textAlign: 'right', margin: '10px' }) .append('[ <a href="#" id="qrm_clear" style="'+a_style+'">clear</a> ] ') .append('[ <a href="#" id="qrm_close" style="'+a_style+'">close</a> ]'); $(doc) .find("body") .append(box .append(footer) .append(qr_img) .append(history_list) ); $('#qrm_history > a', doc).click(function(){ $('#qrm_qr', doc).attr('src', getChartURL($(this).text())); return false; }); $('#qrm_clear', doc).click(function(){ jetpack.sessionStorage.qrm.history = new Array(); $('#qrm_history', doc).empty(); return false; }); $('#qrm_close', doc).click(function(){ $('#qrm_box', doc).remove(); return false; }); }); }, width: 20 });
Jetpackのサイトに用意されているチュートリアルで大枠は理解できるので問題なかったのですが、jQueryのイベント処理のところではまりました。いつもの感覚で
$('#qrm_history > a').click(function(){...});
と書いてたのですが、タブを切り替えるとイベントが動作しない。で、
$('#qrm_history > a', jetpack.tabs.focused.contentDocument).click(function(){...});
とすると各タブで問題なくイベントを取得できました。
ExtJSと組み合わせるとリッチな拡張が簡単に書けそうな感じです。