Slashdot Extension開発版アップデート。個人的に欲しかったので検索バーを作ってみた。

検索バーの作り方はMDCにはあまり記述がない。簡単にできるかと思ったらちょっとはまった。ちなみにFirefox 3.1ではもう少し楽に作れるようだ。

まず、browser.xulへのoverlayに下記を追加。ツールバーにボタンを追加する場合は<toolbarbutton>を使ったが、それ以外のUI要素を入れるには<toobaritem>で要素を囲む。今回はとりあえずテキストボックスのみ。ちなみに<toobaritem>のtitleはツールバーパレットで表示される。

<!-- add button to tool palette -->
<toolbarpalette id="BrowserToolbarPalette">
  <toolbaritem id="slashext-search" title="&slashext_searchbar.title;" >
    <textbox id="slashext-searchbox" type="search"
             newlines="replacewithspaces"
             emptytext="&slashext_searchbox.empty;"
             onkeypress="slashext.searchKeyPress(event);"
             />
  </toolbaritem>
</toolbarpalette>

newlines="replacewithspaces"を指定すると、複数行をコピー＆ペーストした場合に改行をスペースに自動変換してくれる。また、emptytextを指定すると、テキストボックスが空の場合にグレーで指定した文字を表示してくれる。今回は「スラッシュドット検索」としてみた。あとはCSSで高さと幅を調節。Googleツールバーのように可変幅にしたかったのだが、面倒そうなので今回はとりあえずナシ。

で、textbotではenterキーを入力してもoncommandイベントは発生しないので、onkeypressイベントで自前でキー入力をチェックし、Enterキー入力で検索を行うようにする。コードは下記。

    searchKeyPress : function(event) {
        if( (event.keyCode == 13) || // DOM_VK_RETURN
            (event.keyCode == 14 ) ) { //DOM_VK_ENTER
            var text = document.getElementById("slashext-searchbox").value;
            this.searchSlashdot( text, (event.metaKey|event.ctrlKey|event.altKey) );
        }
    },

キーがReturnもしくはEnterなら、検索関数を呼び出す。検索関数を呼び出す際はMeta/Control/Altキーが押されているかをチェックし、どれかが押されていれば新規タブで検索結果を開くようにする。

検索関数は下記のようにしてみた。/.orgと/.jp両対応なので、オプション設定をまずチェックし、開くURLをセット。また、オプション設定で「スコア順」「日付順（降順）」「日付順（昇順）」のどれで検索するかを事前に設定しておき、その値によってパラメータを変える。あとはそのURLを開く/新規タブで開くだけ。

    searchSlashdot : function( str, isNewTab ) {
 
        var prefSvc = Components.classes["@mozilla.org/preferences-service;1"]
        .getService(Components.interfaces.nsIPrefService);
        var prefBranch = prefSvc.getBranch("extensions.slashext.");
        var strTarget = prefBranch.getCharPref("target");
        var strOrder = prefBranch.getCharPref("default_search_order");
 
        var browser = document.getElementById("content");
        var url;
        var encoded_str = escape(str);
 
        if( strTarget == "jp" ) {
            url = "http://srad.jp/search.pl?q=";
            url = url + encoded_str;
 
            switch(strOrder) {
            case "score":
                break;
            case "ascend":
                url = url + "&order=%40cdate+NUMA";
                break;
            case "descend":
                url = url + "&order=%40cdate+NUMD";
                break;
            }
 
        } else { // strTarget == "org"
            url = "http://slashdot.org/search.pl?query=";
            url = url + encoded_str;
 
            switch(strOrder) {
            case "score":
                url = url + "&sort=2";
                break;
            case "ascend":
                url = url + "&sort=1";
                break;
            case "descend":
                url = url + "&sort=1";
                break;
            }
        }
 
        if ( isNewTab ) {
            var tab = browser.addTab(url);
            browser.selectedTab = tab;
        } else {
            browser.loadURI(url);
        }
 
    },

/.本家の検索と/.Jの検索は微妙に仕様が違うのが面倒。さらに本家はソート順がスコアと日付（降順）しか選択できないことに気付く……。