今のところ、特に恥ずかしい思いを過去にしたわけでもないのだが、勝手に消えてくれた方がなんとなく嬉しい。というわけで、そんな機能を firefox の拡張(addon)で作ってみようと思い立った。SearchBox を Clear するので、名付けて clearsb (クリアエスビー) です。

参考にしたサイトは、次の通り。とくにまとめサイトの方がわかりやすかった。

• 拡張の作成 – Mozilla Firefox まとめサイト
• Building an Extension – MDC

できあがった拡張(xpi)はこちらの trac に置いておいたので、ご興味の方、どうぞお持ちください。win 環境 Firefox 2.0.0.3 と linux 環境 Firefox 2.0.0.6 で動作確認済です。初めて作ったものなので、何かと行き届かない部分はご容赦を。あ、あと、最低限のコードしかしてないので、環境によっては変な動きをするかもしれません。ご利用は自己責任でお願いします。

以下、作業メモ。xpi の実体は zip 圧縮されたファイルなので、伸張すれば、簡単に解読できますです。

まず、ディレクトリ構成は、こんな感じ。

<拡張を作るディレクトリのルート>$ ls -R
.:
chrome  chrome.manifest install.rdf
./chrome:
content  skin
./chrome/content:
about.xul  clearsb.js  clearsb.xul
./chrome/skin:
clearsb.png  clearsbb.png

上記の通り、ごく少量のファイルで拡張が作れてしまうわけだが、自作のアイコンや about 用のダイアログが不要であれば、用意するファイルは、次の 4 つだけで良い。

• インストール方法を記述した /install.rdf
• 配布ファイルの構成を記述した /chrome.manifest
• 拡張の UI への割当て方法を記述した /chrome/content/clearsb.xul
• 拡張の実処理を記述した /chrome/content/clearsb.js

これだけだから、中身も全部貼っておく。

/install.rdf

<br /> <?xml version="1.0"?><br /> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"<br /> xmlns:em="http://www.mozilla.org/2004/em-rdf#"><br /> <Description about="urn:mozilla:install-manifest"><br /> <em:id>{786ac958-0f07-46cf-b072-529a4160e8fe}</em:id><br /> <em:name>clearsb</em:name><br /> <em:version>0.1</em:version><br /> <em:description>検索アクション後に検索ボックスに入力した文字列をクリアする</em:description><br /> <em:creator>tmtysk</em:creator><br /> <em:homepageURL>http://blog.tmty.jp/</em:homepageURL><br /> <em:iconURL>chrome://clearsb/skin/clearsb.png</em:iconURL><br /> <em:aboutURL>chrome://clearsb/content/about.xul</em:aboutURL><br /> <em:type>2</em:type><br /> <!-- Target Application this extension can install into,<br /> with minimum and maximum supported versions. --><br /> <em:targetApplication><br /> <Description><br /> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id><br /> <em:minVersion>2.0.0.0</em:minVersion><br /> <em:maxVersion>2.0.*</em:maxVersion><br /> </Description><br /> </em:targetApplication><br /> </Description><br /> </RDF><br />

なお、em:id(GUID) はオンラインサービスで取得してきた。

/chrome.manifest

overlay chrome://browser/content/browser.xul chrome://clearsb/content/clearsb.xul
content clearsb jar:chrome/clearsb.jar!/content/
skin clearsb default jar:chrome/clearsb.jar!/skin/

拡張の実体とスキンがどこにあるかを規定するファイル。chrome:// で始まる URI を適宜書き換えれば、ディレクトリ構成はわりと自由にいけるぽい。

/chrome/content/clearsb.xul

<br /> <?xml version="1.0"?><br /> <overlay id="clearsbOverlay"<br /> xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><br /> // JavaScript をインポートする<br /> <script type="application/x-javascript" src="chrome://clearsb/content/clearsb.js"> </script><br /> </overlay><br />

ここで処理の実体である clearsb.js を指定している。

/chrome/content/clearsb.xuljs

var ClearSB = {
// 初期化処理 .. サーチアクションにリスナをバインドする
init: function() {
sb = document.getElementById("searchbar");
eval("sb.handleSearchCommand = " + sb.handleSearchCommand.toString().replace(
"{", "{ ClearSB.onSearch();"));
},
// サーチアクション時に呼ばれる
// 検索エンジンに文字列が渡るよう、1msec 後にフォームをクリアする
onSearch: function() {
setTimeout(function() {
sb = document.getElementById("searchbar");
sb._textbox.textValue = "";
}, 1);
}
};
// 起動時に上記のオブジェクトをロードする
window.addEventListener("load", ClearSB.init, false);

実は、肝心のこれだけのコードの書き方がなかなかわからなかった。まず、検索ボックスの検索アクションに function を bind させる方法がわからず(上記 init で eval してるところ)、次に、検索時に検索ボックスを空にすると検索エンジンに検索文字列が渡らないという現象に悩まされた(上記 onSearch で setTimeout してるところ)。
結局、いろいろ探しているうちに、userchrome.js の上で同じ事をやってる人を、こちらのブログのコメント欄で発見し、これを頼りに上記のように書いてみたら、ようやくうまくいった感じ。この辺のプロパティ名とかがオフィシャルにまとめてあるところが見付からないんだな.. どなたかご存知でしたら教えてください。

最後に、上述のまとめサイトのチュートリアルに掲載されているパッケージング用のスクリプトを用意して、こいつを PATH の通ったところに突っ込む。(今回の構成用に、微妙にファイル名をカスタマイズしてあります。)

#!/bin/sh -f
x=$(pwd)
x=${x##*/}
rm $x.xpi
# archive chrome (non-compressed)
mkdir -p build/chrome
cd chrome
find . ! -name '.*' -exec zip -0 ../build/chrome/$x.jar {} ;
cd ..
cp -f chrome.manifest install.rdf build
# archive whole (compressed)
cd build
find . ! -name . -exec zip -9 ../$x.xpi {} ;
cd ..
rm -rf build

これを、冒頭に書いたルートのディレクトリから実行してやると、xpi ができあがり。簡単な事をやりたかった割には時間がかかってしまった。でも JavaScript でブラウザを拡張していくという感覚は面白いな。乗り遅れたな..

あ、最後に、アイコン作ってくれた嫁さんと、動作確認に協力してくれた(「小倉智昭」を検索しっぱなしで恥ずかしい思いをしたばかりの) 弟に感謝。

(2007/10/31 18:59 追記) clearsb.js のファイル名表記が間違ってたので直しました。


関連していそうなエントリ:

• 拾ったJavaScriptライブラリをすぐ試してみる方法
• Google Blog Bar Wizard を使ってみた
• JavaScript本を買った