kur.jp

バイオリンと自転車をこよなく愛するkurのチラシの裏。たまには技術的なことを書いたりするかも知れません。

Firefox 拡張機能に手を出してみた

Webユーザビリティを評価するためのツールを作ってよ!みたいなことを言われたので,Firefoxの拡張機能として実装できないかどうか調べています.

まずはとりあえず,拡張機能の仕組みとか,勉強しないとどうにもならないので,それっぽいWebページを探しながら,実際にコードを書いてみることに.というわけで,環境構築の仕方をメモ.

とはいえ,戸惑ったのは少しだけで,Windows XPとWindows Vistaでアプリケーションデータの保存場所が異なる点ぐらいでした.

下準備

まずは環境構築.

ちなみに私の環境は下記の通り.

  • WindowsVistaSP1
  • Firefox3.5.3

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

Firefoxを終了していることを確認し,コマンドプロンプトに

“C:\Program Files\Mozilla Firefox\firefox” ?ProfileManager

と打ち込み,Firefoxを起動する.ダイアログが表示されるので”dev”という名前で開発用のプロファイルを作成する.開発用と,通常のWeb閲覧用のプロファイルを分けておくことで,いろいろいじっても安心です.

このプロファイルでFirefoxを起動させるには,下記のようにコマンドプロンプトに打ち込みます.

“C:\Program Files\Mozilla Firefox\firefox” ?ProfileManager

が,これってすごくめんどうなので,こんな感じで,バッチファイルを作ることに.

@echo off : batch file for firefox extension development "C:\Program Files\Mozilla Firefox\firefox" -no-remote -P dev

これで,バッチファイルをダブルクリックするだけで,開発用プロファイルのFirefoxが立ち上がってくれます.

開発用に設定値の変更

firefoxのアドレスバーにabout:configを打ち込んで,下記の値をtrueにする.

  • javascript.options.showInConsole
  • javascript.options.strict

C:\Users{ユーザ名}\AppData\Roaming\Mozilla\Firefox\Profiles{プロファイル名}\pref.jsをエディタで開き下記の2行を追加する.

user_pref("browser.dom.window.dump.enabled", true); user_pref("nglayout.debug.disable_xul_cache", true);

ネット上にある情報の多くはWindows XP上での開発について書かれているため,ディレクトリが異なっており,注意する必要がある.

以上の設定で,実際に拡張機能を開発するための環境が整う.

参考にしたWebサイト

Firefox拡張機能(extension)の作り方 - ありえるえりあ

Firefox拡張機能(Extention)の簡単な作り方メモ at HouseTect, JavaScriptrt Blog