だらだらと Firefox アドオンに関するメモを書きなぐってみた

CoffeeScript で記述されているので、coffee -cb とかでコンパイルしてみてください。

1 require する

CommonJS の require 関数は Ruby のそれとはまた違っています。
戻り値が require したモジュールのオブジェクトなので、それを変数に保存しておく必要があります。

widgets = require 'widget'
tabs = require 'tabs'
self = require 'self'
data = self.data
panels = require 'panel'
network = require 'request'

上から順に、ウィジェット関連(widget)、タブ関連(tabs)、アドオンディレクトリ関連(self)、アドオンディレクトリの data ディレクトリ(data) パネル関係(panels)、ネットワーク関係(network)になっています。

2 パネルを作成する

show_panel = panels.Panel
    width: 250
    height: 400
    contentURL: data.url( "show.html" )
    contentScriptFile: data.url( "show.js" )

幅が 250、高さが 400 のパネルを作成します。
パネルとは、ウィジェットのビューです。
つまり、ウィジェットの内容で、HTML で記述することができます。
contentURL オプションで、HTML ファイルへの URI を指定します。
contentScriptFile オプションは、パネルの中に組み込む JavaScript ファイルの URI を指定します。

3 パネルにイベントハンドラを指定する

パネルの中では main.js で可能なことが全くできません。
require 関数、console.log 関数は使えません。
なので、main.js に書く必要があるんです、が、どの様にやればいいのか、全くわかりません。

# init
show_panel.on 'init', (image_element) ->
    console.log "in init"
    null

# show
show_panel.on 'show', () ->
    console.log "in show"
    show_panel.port.emit "show"
    null

上の init イベントは私が作ったのですが、パネルを表示しても端末に

in init

がでることはありませんでした…。

4 パネルをウィジェットに丸め込む

addon_bar_button = widgets.Widget
    id: "imgly-icon"
    label: "show image"
    contentURL: "http://img.ly/assets/favicon-a1b5a899dcd5f68a9feb9e80b4b63935.ico"
    panel: show_panel

ウィジェットをアドオンバーに登録します。
アイコンは img.ly のファビコンにしました。
これで、アドオンバーに img.ly のファビコンが出現し、クリックするとパネルが出現するようになりました。

あとは全くわかりません。
どーすればいいんでしょうか？ｗ