[PR]看護師の好条件な求人情報満載:今人気の転職サイト♪6分に1人が登録中

FireFox Extensionの作り方(らしきもの)

FireFox Extensionの作り方は,このサイトが 非常に充実している。正直,ここを誰か翻訳すればオッケエといった感じで,ボクが何か書くまでもないと思う。


まあいいや。ちょいと続けよう。
FireFoxのExtensionは,拡張子こそ「.xpi」になっているが,構造は.zipファイルそのもの。Windowsで作るときは普通のアー カイバを使えばいい。んでもって見えるのは
install.js
install.rdf
chrome/なんとか.jar
の三つだけ。しかもinstall.jsはどうやら古いMozilla向けで,FireFox向けではないようだ。というのも両者を見ると,明らかに情報 が重複しているし,FireFoxのパッケージングにそう説明してある。これで古いMozillaにインストールできるかどうか は,正直なところわからない。
 FireFoxで「ツール」メニューで「拡張機能」を選択したときに,インストール済みのExtensionが表示される。ここに表示される情報は,こ のinstall.rdfに記述したものだ。だから,見栄えを考慮する人はちゃんとここから書かなければいけない。

install.rdf


<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">

 <Description about="urn:mozilla:install-manifest">

  <em:id>{7091fefd-e036-4ae0-98c2-xxxxxxxxxxxx}</em:id> --- > GUIDをどっかから得る
  <em:name>なんとか拡張機能</em:name>    ---> 表示される名前(UTF-8で)
  <em:version>0.1</em:version>
  <em:description>まあ,とにかくそういうものなんだよ</em:description> ---> 表示される説明
  <em:creator>northCountry</em:creator>    ---> たぶんオプション
  <em:homepageURL>http://blog.livedoor.jp/northCountry/</em: homepageURL>
  <em:iconURL>chrome://nantoka/skin/nantoka.png</em:iconURL>  --->表示するアイコンの指定
  <em:aboutURL>chrome://nantoka/content/about.xul</em: aboutURL> --->「...について」で表示するもの。
                                                 この場合内部から呼び出している
  <em:optionsURL>chrome://nantoka/content/config.xul</em: optionsURL>   --->「拡張機能」を一覧表示させ,
                                                    「設定」ボタンをクリックしたときに出すダ イアログ
    <em:file>
   <Description about="urn:mozilla:extension:file:nantoka.jar"> --->中身のファイルの指定
    <em:package>content/nantoka/</em:package>  --->パッケージの 所在地
    <em:skin>skin/classic/nantoka/</em:skin>  --->スキンの所在 地。classicってデフォだっけ。
   </Description>
  </em:file>

  <em:targetApplication>          --->で,こっからターゲット(FireFox)を指定して いるところ
   <Description>
    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
    <em:minVersion>0.7</em:minVersion>
    <em:maxVersion>1.5</em:maxVersion>
   </Description>
  </em:targetApplication>

 </Description>
</RDF>


*jarファイルの構成

 で,拡張機能の本体だが,これが「nantoka.jar」なわけだ。こいつもxpiと同様,jarといってもzipである(jarのフォーマッ トって,元々zipだったっけ?tar.gzだと思っていた…)。こいつをひもとくと「content」と「skin」というフォルダが作られる。 skinの方はイマイチよくわからないが,インストール済み拡張機能で表示されるアイコンなんかはこっちに入っている。

nantoka.jarはこんな構造だ。
nantoka.jar
 +-- content -- nantoka --+-- nantoka.js
 |            +-- nantoka.xul
 |            +-- contents.rdf
 |            +-- about.xul
 |            +-- config.xul
 |
 +-- skin -- classic -- nantoka --+-- nantoka.png
                 +-- nantokadb.png
                 +-- contents.rdf

 contentの方が処理の本体部分である。たぶん構造上決まっているのだと思うが,そこにはマトリョーシカ人形のようにフォルダがまたある。その名前 はさっきの「nantoka」だ。実はこれが「nantoka」でなければならないのは,十中八九install.rdfに記述してあるからだと睨んでい るのだが,今ひとつ自信はないし,試す気もない。実は最初に作ったパッケージで一度,FireFoxが起動しなくなったのだ。とりあえずリカバリ方法が分 かったので事なきを得たが,またあれをやるのかと思うとちょっとね。あと適当なデバッグ方法がないのも正直,往生した。

contents.rdfその1

 FireFox本体に結びつける接着剤がcontents.rdfということになるようだ。contents.rdfについては, install.rdfに特に記述していないので,デフォでこういう名前にしなければならないのだろう。skinの方にもあるところを見ると,中身を自己 参照できるようにするシカケとしてcontents.rdfを使っていると判断してよさそう。
contents.rdfはこんな感じになる。

<?xml version="1.0"?>

<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#">

 <RDF:Seq RDF:about="urn:mozilla:package:root">
  <RDF:li RDF:resource="urn:mozilla:package:nantoka"/>
 </RDF:Seq>

 <RDF:Seq RDF:about="urn:mozilla:overlays">
  <RDF:li RDF:resource="chrome://browser/content/browser.xul"/>
  <RDF:li RDF:resource="chrome://navigator/content/navigator.xul"/>
 </RDF:Seq>

 <RDF:Seq RDF:about="chrome://browser/content/browser.xul">
  <RDF:li>chrome://nantoka/content/nantokaOverlay.xul</RDF: li>
 </RDF:Seq>

 <RDF:Seq about="chrome://navigator/content/navigator.xul">
  <RDF:li>chrome://nantoka/content/nantokaOverlay.xul</RDF: li>
 </RDF:Seq>

 <RDF:Description RDF:about="urn:mozilla:package:nantoka"
  chrome:displayName="なんとか 0.1"
  chrome:author="northCountry"
  chrome:authorURL="mailto:northCountry@brown.livedoor.com"
  chrome:name="nantoka"
  chrome:extension="true"
  chrome:description="なんとか?まあそういうものなんだ">
 </RDF:Description>

</RDF:RDF>

 正直言って,この内容は今ひとつよくわからない。
 特にurn形式による参照とディレクトリ構造の一貫性がイマイチ不明。大体,何をどこに登録しているのやら…。

nantokaOverlay.xulとか

 で,操作に絡む部分を.xulに記述する。
 .xulは基本的にUIを構成する。例えばメニューを増やすのも.xulに書く。そしてその操作をしたときに呼び出すべきJavaScriptファイル とそのファンクションも指定する。

メイン部分(nantokaOverlay.xul)
<?xml version="1.0"?>

<overlay id="nantokaOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

// JavaScriptファイルを指定。もしかしたらソースベタに書くのもOKか
<script type="application/x-javascript" src="chrome://nantoka/content/nantokaOverlay.js">

</script>

// This is for the Tools menu.
<menupopup id="menu_ToolsPopup">
 <menuitem insertafter="devToolsSeparator" label="なんとか!"
 accesskey="H" oncommand="nantoka();" /> 
</menupopup>

</overlay>

について(about.xul)

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window class="dialog"
 title="なんとか!"
 orient="vertical"
 autostretch="always"
 onload="sizeToContent()"
 xmlns="http: //www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<groupbox align="center" orient="horizontal">
<vbox>
<text value="なんとか" style="font-weight: bold; font-size: x-large;"/>
<text value="ver. 0.1"/>
<separator class="thin"/>
<text value="Created By: northCountry" style="font-weight: bold;"/>
<separator class="thin"/>
</vbox>
<spring flex="1"/>
<image src="chrome://nantoka/skin/nantokadb.png"/>
</groupbox>

<hbox>
<spacer flex="1"/>
<button label="Close" oncommand="window.close();"/>
</hbox>

</window>

本体のJavaScript

ようやく。
nantokaOverlay.js
//
//
function nantoka()
{
 alert("かんとか!");
}

これを.zipで固めてリネームして,って作業を繰り返していって.xpiファイルを作ればOK。かんとか!はバケラッタするが。
作ったxpiはここ。冒頭に紹介したサイトのhelloworldと比較したりすると,どこを直せ ばよいのかが浮き彫りになってよいかも。だってほとんど一緒だからね。

設定(config.xul)

3/14 追記
ダイアログ・ボックスの中に今回はJavaScriptも書いている。

ここでのポイントは二つ。preferences文字列の設定/取得と,ファイル・ダイアログの呼び出し(ファイル名の設定をしたため)である。
いずれにしても,FireFox/Mozillaのオブジェクト・モデルが分かってないと,結構キツいというか。なぜ「getService」なのか 「createInstance」なのかとか考えると,アタマがウニになるのでそういうものだと割り切っている。

preferences文字列の設定/取得はこんな感じ。
    var prefIn = Components.classes["@mozilla.org/preferences-service;1"];
    var prefs = prefIn.getService(Components.interfaces.nsIPrefBranch);
    設定済みの値 = prefs.getComplexValue("へらへら設定", nsISupportsString).data; // 日本語通るかどうかは知りません。ご注意を。
    prefs.setComplexValue("へらへら設定", nsISupportsString, "設定する値");

ファイル名については,ファイルを選択するダイアログボックスを呼び出せる。ただしそ のへんに転がっているサンプルだと失敗する可能性があるから注意されたい。そのコードを紹介するとこんな感じ。

    var fp = Components.classes["@mozilla.org/filepicker;1"]
        .createInstance(Components.interfaces.nsIFilePicker);
    alert("try to init fp");
//   fp.init( window, "Select a File", nsIFilePicker.modeOpen);  //あやまり
    fp.init( window, "Select a File", fp.modeOpen);  //正しい
    alert("let's show fp");
    var res = fp.show();
//   if (res == nsIFilePicker.returnOK){
    if (res == fp.returnOK) {

fpというのは,nsIFilePickerクラスのオブジェクトだと思ってもらえれば大体間違っていない。インタフェースをインスタンス化したもの,と いった方が正確ではあるが。
おそらくMozillaでは正しいコード。この「あやまり」としているコードを書け,と書いてあるサイト(公式サイトを含む)の方が圧倒的に多い。ただし それはFireFox Extensionの書き方の紹介ではなく,MozillaあるいはXULを使ったアプリケーションの記述方法として説明している。ここから推測するとお そらくMozillaでは正しく動くのだろうということだ。


総評

こう書くと簡単だが,デバッグが面倒。もしかしたらデバッガ()が使えるのかもしれないが,その使い方は分からず。デバッグ中にこのデバッガ動かしても反 応なかったし。エラーもJavaScriptコンソールに出るときと出ないときがあるし。いちいちインストール→再起動→テスト→アンインストール→再起 動を繰り返すのは面倒。JavaScriptを変えるだけなら,FireFoxのExtensionを格納するディレクトリ(例えばC:\ Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles\人によって違う名前\extensions\GUID)に入る.jarファイルだけを入れ 替えてFireFoxを再起動するというのでもいける。

 あと,ちょっとパス名をしくじっただけでFireFoxは起動しなくなる。セーフモードで動いてくれればまだめでたいが,プロセスがゾンビ状態になるこ とも珍しくない。この場合は,タスクマネージャでプロセスを殺したあと,Chromeディレクトリ(C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles\人によって違う名前にある)を消して(も大丈夫だが,普通はリネームするか), XUL.mflファイルを消すと再起動が可能になる。その際,入れておいたはずのほかの拡張機能も一蓮托生になるかもしれないが。

あんまり見てませんが,ご意見・ご要望がありましたらこちらま で。質問や要望に100%答えられる保証はありませんのでご容赦を。返事しなくても怒らないでね。このメアドより,下のHomeのブログにコメント付けた 方が見ている可能性は高いです。それも不定期ですが。
Homeに戻る
[PR]正社員転職はマイナビ転職:全国の厳選求人と転職活動を支える情報