Home > 技術 > Firefox拡張機能(Extention)の簡単な作り方メモ

Firefox拡張機能(Extention)の簡単な作り方メモ

Firefoxの拡張はJavaScript、CSS、XMLを使うことにより自作することができるのですが、意外と敷居が高くそこまでドキュメントなんかも豊富ではないので、自分用のメモとして簡単な作り方レシピを残してみようと思います。

開発用のプロファイルを作成する

既存のプロファイルで開発してもいいのですが、いろいろ設定をいじることになるのでここでは開発用のプロファイルを作成しています。

  1. Firefoxを閉じる
  2. ファイル名を指定して実行から「firefox -ProfileManager」で起動する
  3. 適当な名前(ここではdev)でプロファイルを作成する
  4. ファイル名を指定して実行から「firefox -no-remote -P dev」で起動する

これで新しい環境でFirefoxがしたと思います。

開発用に設定値を変更する

Firefoxのアドレスバーにabout:configを打ち込んで、以下の4つの値をtrueにします。

  • javascript.options.showInConsole
    • JavaScriptのエラーをエラーコンソールに出力する
  • javascript.options.strict
    • JavaScriptのエラーを厳密にする
  • browser.dom.window.dump.enabled
    • dump関数によってコンソール(Windowsの場合,コマンドプロンプト)へ文字列を出力可能にする
  • nglayout.debug.disable_xul_cache
    • XULのキャッシュを無効にする

■参考記事
Firefox 3ではじめる拡張機能開発:第1回 最小構成でインストール|gihyo.jp … 技術評論社

んでボクの環境では下の2つがなかったので、
C:\Documents and Settings\user\Application Data\Mozilla\Firefox\Profiles\hogehoge.devにあるprefs.jsに以下を直接設定しました。

これでコードを修正するたびにFirefoxを再起動しなくて済みます。

作業ディレクトリを作成する

Firefoxは通常xpiファイルとして配布されますが、コードを修正するたびにxpiファイルにしてFirefoxにドラッグするとなると、
これは相当な面倒になるので、Firefoxには他の場所にあるソースコードをリンクとして読み込むように設定します。

今回は、

C:\_\firefox\hello ←ここが作業ディレクトリ

のようにフォルダを作成して、Firefoxからこのフォルダを見てもらうようにします。

リンクファイルを作成する

先ほどFirefoxにはソースコードのリンクを指定すると説明しましたが、普通Firefoxの拡張は

「C:\Documents and Settings\user\Application Data\Mozilla\Firefox\Profiles\hogehoge.dev\extensions」

のような場所に存在します。
ここにリンクを作成する感じです。

まずはこのディレクトリ内に「hello@xuldev.org」というファイルを作成しましょう。
そしてファイルの中身に

C:\_\firefox\hello

と書いて、先ほどのディレクトリへのリンクファイルを作成します。
これでhelloディレクトリ内にあるソースコードが読み込まれる感じになります。

クロムマニフェスト(chrome.manifest)の作成

chrome.manifestファイルをhelloディレクトの直下に作成し、以下を記述します。

content hello content/
overlay chrome://browser/content/browser.xul chrome://hello/content/hello.xul

chromeパッケージ名とソースファイルの相対パス指定します。
ここのoverlay宣言ですが、これはFirefoxの画面情報としてで読み込まれるchrome://browser/content/browser.xulに対して
chrome://hello/content/hello.xulも追加してちょみたいな感じです。
これにより自分で追加したメニューなどが表示されることになります。

install.rdfの作成

helloディレクトリ直下にinstall.rdfファイルを作成し、以下を記述します。
ここは作る拡張の情報が記載されているファイルになります。

拡張のバージョンや対応しているFirefoxのバージョンなどを記述します。

以下重要なエレメントだけ説明。

em:id
メアド形式かUUIDで指定します。ここは一意にならなくてはなりません
em:version
拡張機能のバージョン
em:type
2:拡張機能、4:テーマ、8:ロケール、16:プラグイン、などなど
em:optionsURL
メニューのアドオン→設定ボタンを押せるようになります

■参考リンク
Install Manifests - MDC

自作xulを作成する前の事前準備

事前準備としてhelloディレクトリ直下にcontentフォルダを作成しときます。
現状前の構成は、

「C:\_\firefox\hello」ディレクトリの直下に

・contentフォルダ
・chrome.manifestファイル
・install.rdfファイル

がある感じです。

hello.xulの作成

contentディレクトリの直下にhello.xmlxulファイルを作成し、以下を記述します。

ここが実際の拡張に対するxulコードになります。
xml形式でボタンやラベルなどを配置できるので、htmlの知識がある人ならピンとくるはずです。
特にイベント登録でonmousedownを使っているのでまさにJavaScriptですね。

ここで重要なのがstatusbarというタグにid="status-bar"を指定していますが、これは適当につけているわけではなく
すでにchrome://browser/content/browser.xulで定義されているid="status-bar"のstatusbarタグに対するオーバーレイになります。
なので、このid指定を間違えるとステータスバーに表示されなくなってしまうので気をつけてください。

どうゆうidが指定されているかの調査方法は↓のほうに書きます。

hello.jsの作成

↑のxmlのscriptタグで外部jsファイルを読み込んでいるので、それを作成します。
contentディレクトリの直下にhello.jsファイルを作成し、以下を記述します。

単にalertを実行しているだけなので、onmousedown='Hello.alert("Hello")'としちゃってもいいのですが、
ここはサンプルなのであえてそうしてます。

またHelloオブジェクトを作成して、その中にalert関数を入れていますが、ここで読み込まれるjsファイルは
グローバルな環境になってしまうので、すでにありそうな名前のオブジェクトを作ってしまうと他の拡張が動かない場合があります。
(Helloも微妙にあぶないですが…w)

なので、拡張に見合った名前のオブジェクトを作成してその中に関数を追加していくようにしましょう!

アドオン→設定ボタンを押せるようにする

contentディレクトリの直下にprefs.xulファイルを作成し、以下を記述します。
常にデフォルトな設定が読み込まれる拡張なら良いのですが、ユーザーに設定値を選ばせる拡張なら設定ボタンを押せる必要があります。

とりあえずラジオボタンで選べるように作ってみましょう。
preferencesタグのidとradiogroupタグのpreferenceは一致するように指定してください。
ここが間違っているとエラーになってしまいます。

現時点では設定ボタンが押せる状態になるだけですが、後で取得する方法を説明します。

Firefxoを起動してみる

ではとりあえずFirefoxを起動してみましょう!
ちゃんと拡張が読み込まれれば、アドオンを追加したときのウィンドウが表示されると思います。

もしアドオンのウィンドウにビックリマークがある場合はどこかの指定が間違っていることになります。

設定で指定した条件を取得する

Firefox起動のテストがOKなら、次に設定で指定したラジオボタンの情報を取得してみましょう。
まずはhello.xulのonmousedown='Hello.alert("hello")'をonmousedown='Hello.alert()'と引数なしにします。

続いてhello.jsを以下のように変更します。

JavaScriptからXPCOMを利用するには,XPConnectという技術を使います。
XPCOMとはFirefox側で提供している機能をまとめたフレームワークになります。
今回は設定画面で設定した内容を取得するので、XPCOM経由で取得する感じです。

またデフォルト値を設定しておく必要があるので、
helloディレクトリの直下にdefaultsフォルダpreferencesフォルダhello-prefs.jsファイルを作成しときます。

その中に以下のコードを記述してください

これをしとかないと、ユーザーが設定画面でOKを押さない限りthis.getPref("hello", "extensions.hello.")の戻り値が
undefinedになってしまいます。

再テストしてみる

基本的にソースコードを修正したら、Ctrl + Nなどで新しいウィンドウを開けば再読み込みされます。
ですが、install.rdfを修正した場合はそれだけではダメなので、一旦Firefox上で拡張を削除してから
もう一度hello@xuldev.orgファイルをドラッグしてあげましょう。


設定画面で選んだ値がalert表示されたでしょうか?(0 or 1)
よっしゃ~~~!

番外編 - browser.xul内のidを特定する方法

オーバーレイのところでもお話しましたが、オーバーレイ対象のidが分からないとxulを書くことができないので
そのidを探す方法を書いてみようと思います。

以下のをアドレスバーに入力してみてください。

chrome://browser/content/browser.xul

Firefoxの中にFirefoxが表示されると思いますw(なんかすごい)

そしたらFirebugを開いてインスペクター(調査)で目的の箇所をクリックすればそこのxul情報が見れるので、
これでidも特定できますね。

Firebug以外にもDOMInspectorでも同じことができるみたいです。

番外編 - デバッグ方法

デバッグをする方法はボクが知る限り3つあります。

・1つ目はalert表示させるパターンですが、これは普通のJSのデバッグでも有用ですが、
for文とかで回している中でalertするとループのたびにポンッと表示されるのでちょっとうざいです。

alert - MDC

・2つ目はdumpを使う方法ですが、これは試したことがないですw
Firefoxを起動時に「-console」を付けたりしないといけないので、これもまたちょっと面倒です。

dump - MDC

・3つ目はエラーコンソールに出力させる方法です
ボクはこれを良く使います。

ただし、この書き方はFirefox3かららしいです。
今まではXPCOM経由でログを吐かなければならなかったようで、実際には以下のコードになります。

こうゆう関数を一個作ってしまえば問題ないのですが、毎回書くのは難点ですね。
しかもlogという名前の関数だと他の拡張とバッティングしそうなので、もう少し工夫する必要もありますしね。

まとめ

ここまでのことが一通りできたら、他にいろいろ応用できそうですね。
ブロガーなら自分の使いやすいようなcopy+の作成や、Firebugに機能の追加なんかもできちゃいます。

ちょっと面倒ではありますが、作ると楽しいFirefox拡張をどんどん作っちゃいましょう!

Part2へ続く。
Firefox拡張機能(Extention)の簡単な作り方メモ Part2

参考リンク

XUL Reference - MDC
XUL Apps > Tips > prefs.js に設定を保存する・設定を読み込む - outsider reflex
Firefox拡張機能(extension)の作り方 ― ありえるえりあ
FireFox Extensionの作り方

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1140
Listed below are links to weblogs that reference
Firefox拡張機能(Extention)の簡単な作り方メモ from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > Firefox拡張機能(Extention)の簡単な作り方メモ

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top