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と組み合わせるとリッチな拡張が簡単に書けそうな感じです。