バッキーの日々是爆食

アクセスカウンタ

zoom RSS Mozilla Add-on Builderによる拡張機能開発の入門 : ビギナー向け操作方法

<<   作成日時 : 2012/06/15 19:07   >>

ブログ気持玉 0 / トラックバック 1 / コメント 0

Firefox用の拡張機能を開発するに際に Add-on Builderの操作方法を解説しているサイトが見つからなかったので、自分の復習を兼ねて資料を作ることにしました。
とりあえずGUI無しの簡単な拡張機能を開発する手順を説明します。

尚、説明と画面キャプチャは2012年6月ごろのものであり将来変更になっている可能性があります。



【概要】
Mozilla Add-on Builderのいいところ
  • Firefox(ブラウザ)で開発できる
  • ソースコードなどはサーバー側に保存される
  • リビジョン(更新履歴)が管理される
  • ネットワークさえつながっていれば、いつでも、どこでも、どのパソコンでも開発できる
  • Firefox(ブラウザ)の再起動が不要な拡張機能を作れる(restartless)

尚、次の2つがFirefox(ブラウザ)のセキュリティ設定に必要です
  • クッキーの保存が許可されていること
  • HTTPリファラが送信されていること (HTTPリファラが無いと"BrowserID Not enabled"というエラーになります)



【準備】
Add-on Builderによる拡張機能の開発には事前に2つの準備が必要になっています
1. Addon Builder Helper(拡張機能)のインストール
拡張機能を開発してテストするために "Addon Builder Helper"という拡張機能が必要です
https://addons.mozilla.org/ja/firefox/addon/add-on-builder-helper/ にアクセスしてインストールしてください

2. 開発者アカウントの作成
開発する拡張機能は Mozillaのサーバー上で管理されます
そのために開発者アカウントが必要です
https://addons.mozilla.org/ja/firefox/users/register にアクセスしてユーザ登録してください



【操作開始】
・Add-on Builderの起動
Firefoxで https://builder.addons.mozilla.org にアクセスして Add-on Builderを起動してください

・ログイン(Sign in)
画面右上の "Sign In" をクリックするとログイン開始です
画像

画像

画像

画像


ログインが完了すると「アカウント名」や「作成した拡張機能とライブラリの情報」が表示されます
画像


・拡張機能の新規作成
Createプルダウンメニューから Add-on を選ぶと拡張機能の新規作成が始まります
画像

画像

画像


・プロパティの設定
まずは「拡張機能の名前」や「拡張機能の説明」、「公開方法(Publicなら一般公開、Privateなら非公開)」を設定してください
画像

画像

画像

画像


・コードの入力
export.mainは拡張機能の起動時に呼び出される処理を記述します
export.onUnloadは拡張機能の終了時などに呼び出される処理を記述します
※ console.log は「エラーコンソール」に情報を出力します
画像


・動作テスト開始 - 拡張機能のインストール
Testボタンで拡張機能の組み込み(インストール)を行います
画像

画像


・エラーなどの確認
もしエラーなどがあれば「エラーコンソール」に表示されます
この例ではエラーは無く exports.main に記述された console.log でメッセージ(情報)が出力されています
画像

画像


・動作テスト終了 − 拡張機能のアンインストール
Testボタンをもう一度押すことで拡張機能をアンインストールできます
画像

画像


・エラーなどの再確認
この例ではエラーは無く exports.onUnload に記述された console.log でメッセージ(情報)が出力されています
画像


・拡張機能の保存
Save Optionsボタンで「バージョン番号」や「更新のコメント」を設定してください
画像

画像


Saveボタンで拡張機能が保存されます
画像

画像


・リビジョンの確認
Revisionsボタンで更新履歴をみることができます
画像

画像


・拡張機能パッケージ(xpi)のダウンロード
Downloadボタンでパッケージ化(xpi)された拡張機能をダウンロードできます
画像

画像


・拡張機能の複製
Copyボタンで拡張機能の複製を作成できます
画像


・開発した拡張機能の確認
My Accountをクリックすると初期画面に戻ります
画像

画像


初期画面の各項目をクリックすると一覧で表示されます
画像


・ログアウト(Sign out)
Sign Outをクリックして開発終了です
画像



以上、ご参考になれば幸いです。


[2012/06/20 追記]
よかったら「Mozilla Add-on Builderによる拡張機能開発の入門 : ドキュメント・リードマップ」もどうぞ。


[2013/12/19 追記]
非常に残念ですが「Add-on Builderは 2014年4月でサービスを終了します」




Firefox 3 Hacks ―Mozillaテクノロジ徹底活用テクニック
オライリージャパン
江村 秀之

amazon.co.jpで買う
Amazonアソシエイト by Firefox 3 Hacks ―Mozillaテクノロジ徹底活用テクニック の詳しい情報を見る / ウェブリブログ商品ポータル


Firefox Hacks Rebooted ―Mozillaテクノロジ徹底活用テクニック
オライリージャパン
浅井 智也

amazon.co.jpで買う
Amazonアソシエイト by Firefox Hacks Rebooted ―Mozillaテクノロジ徹底活用テクニック の詳しい情報を見る / ウェブリブログ商品ポータル



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(1件)

タイトル (本文) ブログ名/日時
Mozilla Add-on Builderによる拡張機能開発の入門 : ドキュメント・リードマップ
バッキーはソフトウェアエンジニアとしてプログラミングの経験は長いのですが、Firefoxの拡張機能の開発は初心者です。 ネット検索で調べていろいろと資料を読んでみましたが、ピンポイントの情報は得られるもののどうやって組み合わせてプログラミングするのか悩みました。 そこで、拡張機能のプログラミングを理解しやすいように、どういう順序でドキュメントを読んでいったらいいのかリードマップを作ってみました。 尚、このリードマップは現時点(2012/06ごろ)の Add-on SDK 1.7 と ... ...続きを見る
バッキーの日々是爆食
2012/06/20 08:50

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
Mozilla Add-on Builderによる拡張機能開発の入門 : ビギナー向け操作方法 バッキーの日々是爆食/BIGLOBEウェブリブログ
文字サイズ:       閉じる