Firefox ExtDev PrepareFirefox 拡張機能開発 ＠ 準備編by Tomoya Asai (aka. dynamis)

準備編

拡張機能開発に備えて準備しよう .(・・).

✴ 開発環境の準備✴ UTF-8 を扱えるテキストエディタ

✴ 開発用プロファイル✴ 開発用の Firefox 環境を別途用意する

✴ Firefox の設定変更✴ 開発用の設定をオンにする

✴ 開発者必携アドオン✴ DOM Inspector をインストール

✴ 基礎知識の再確認✴ XML や JavaScript の基本を再確認

拡張機能開発に備えて準備しよう .(・・).

✓開発環境の準備✓ UTF-8 を扱えるテキストエディタ

✴ 開発用プロファイル✴ 開発用の Firefox 環境を別途用意する

✴ Firefox の設定変更✴ 開発用の設定をオンにする

✴ 開発者必携アドオン✴ DOM Inspector をインストール

✴ 基礎知識の再確認✴ XML や JavaScript の基本を再確認

拡張機能開発に備えて準備しよう .(・・).

テキストエディタ拡張機能は基本的にテキストエディタだけで開発可能

文字コードを UTF-8 で保存できれば何でも OKメモ帳は改行文字や BOM 等で問題あるので避ける

Windows 専用エディタ

秀丸、サクラエディタ、TeraPad、EmEditor など

Mac OS X 専用エディタ

Jedit X、mi、KEdit、CotEditor、LightWayText など

マルチプラットフォーム対応エディタ

Eclipse、Netbeans、jEdit、Vim、Emacs など個人的には jEdit の独自ビルドを作って使用していますが推奨はしません

Zip ユーティリティ配布用インストーラの作成、展開時に Zip ツールが必要

Windows の Zip ユーティリティ

XP 以降標準の圧縮フォルダ機能右クリックして「送る」→「圧縮(zip形式)フォルダ」

Laplus: 使いやすい定番ユーティリティ7-Zip: 圧縮率の高い Zip ファイルを作成可能

Mac OS X の Zip ユーティリティ

The Unarchiver: 定番のアーカイブ展開ツールCleanArchiver: 不要ファイルを含めずに Zip できる

何でも良いから Zip の圧縮展開を自由にできるように

✴ 開発環境の準備✴ UTF-8 を扱えるテキストエディタ

✓開発用プロファイル✓ 開発用の Firefox 環境を別途用意する

✴ Firefox の設定変更✴ 開発用の設定をオンにする

✴ 開発者必携アドオン✴ DOM Inspector をインストール

✴ 基礎知識の再確認✴ XML や JavaScript の基本を再確認

拡張機能開発に備えて準備しよう .(・・).

ユーザプロファイルユーザの設定やデータを収めたファイル群のこと

設定、ブックマーク、履歴、拡張機能などを含む

Firefox では複数のプロファイルを使い分けできる

OS に複数のユーザを登録できるのと同じ別プロファイルで複数の Firefox を同時起動も可能

拡張機能の開発用プロファイルを作るとよい

開発用の設定や拡張機能をインストールする他のアドオンがない方がデバッグが簡単万一起動しなくなったりデータ壊しても安心

初心者は特に専用のプロファイルで開発することを強く推奨します

プロファイルマネージャプロファイルの新規作成や選択を行う管理画面を起動

Firefox を -P オプション付きで起動すると表示される-no-remote をつけると別プロファイルで同時起動可能

Vista 以降ではスタートメニューの検索ボックスにXP 以前では「ファイル名を指定して実行」に入力:

Mac ではターミナルで次のコマンドを実行:

firefox -P extdev などと -P に続けてプロファイル名を指定して起動することもできる

firefox.exe -no-remote -P

/Applications/Firefox.app/Contents/MacOS/firefox -P

プロファイルマネージャプロファイルの新規作成や選択を行う管理画面を起動

Firefox を -P オプション付きで起動すると表示される-no-remote をつけると別プロファイルで同時起動可能

Vista 以降ではスタートメニューの検索ボックスにXP 以前では「ファイル名を指定して実行」に入力:

Mac ではターミナルで次のコマンドを実行:

firefox -P extdev などと -P に続けてプロファイル名を指定して起動することもできる

firefox.exe -no-remote -P

/Applications/Firefox.app/Contents/MacOS/firefox -P

プロファイルマネージャプロファイルの新規作成や選択を行う管理画面を起動

Firefox を -P オプション付きで起動すると表示される-no-remote をつけると別プロファイルで同時起動可能

Vista 以降ではスタートメニューの検索ボックスにXP 以前では「ファイル名を指定して実行」に入力:

Mac ではターミナルで次のコマンドを実行:

firefox -P extdev などと -P に続けてプロファイル名を指定して起動することもできる

firefox.exe -no-remote -P

/Applications/Firefox.app/Contents/MacOS/firefox -P

開発用プロファイルプロファイルマネージャで開発用プロファイルを作る

extdev という名前でプロファイルを新規作成「今後このプロファイルを使用する」を無効にする-P オプション無しでプロファイルマネージャが起動する

extdev プロファイルで Firefox を起動する

開発用プロファイルプロファイルマネージャで開発用プロファイルを作る

extdev という名前でプロファイルを新規作成「今後このプロファイルを使用する」を無効にする-P オプション無しでプロファイルマネージャが起動する

extdev プロファイルで Firefox を起動する

プロファイルディレクトリユーザプロファイルのデータを収めるディレクトリ

%APPDATA% は Windows Vista/7 では C:¥Users¥<username>¥AppData¥Roaming¥%APPDATA% は Windows XP/2000 では C:¥Documents and Settings¥<username>¥Application Data¥

xxxxxxxx.extdev の xxxxxxxx はランダムな 8 文字 (salt) になりますxxxxxxxx.extdev の extdev はプロファイル名になります

開発用でなくデフォルトのプロファイル名は extdev でなく default

http://support.mozilla.com/ja/kb/プロファイル

OS フォルダパス

Win 2000～ %APPDATA%¥Mozilla¥Firefox¥Profiles¥xxxxxxxx.extdev

Win 98/Me C:¥Windows¥Application Data¥Mozilla¥Firefox¥Profiles¥xxxxxxxx.detdev

Mac OS X ~/Library/Application support/Firefox/Profiles/xxxxxxxx.extdev

Linux ~/.mozilla/firefox/xxxxxxxx.extdev

プロファイルデータユーザデータはプロファイルディレクトリに保存される

extensions ディレクトリ配下の拡張機能 ID 名のディレクトリに拡張機能の構成ファイルが保存されるextensions.cache, extensions.ini, extensions.rdf などは インストール済み拡張機能の情報をキャッシュしているlocalstore.rdf はウィンドウ位置などの情報をキャッシュsearchplugins ディレクトリには検索エンジンを保存places.sqlite ファイルは履歴とブックマークのDB ...etc

各ファイルの説明は mozillaZine の KB を参照

http://kb.mozillazine.org/Profile_folder_-_Firefox取りあえず拡張機能がプロファイルディレクトリの中に保存されることだけ知ってれば OK

✴ 開発環境の準備✴ UTF-8 を扱えるテキストエディタ

✴ 開発用プロファイル✴ 開発用の Firefox 環境を別途用意する

✓ Firefox の設定変更✓ 開発用の設定をオンにする

✴ 開発者必携アドオン✴ DOM Inspector をインストール

✴ 基礎知識の再確認✴ XML や JavaScript の基本を再確認

拡張機能開発に備えて準備しよう .(・・).

開発用の設定about:config を開いて次の開発環境用の設定をオンにする

javascript.options.showInConsole = truejavascript.options.strict = truenglayout.debug.disable_xul_cache = truebrowser.dom.window.dump.enabled = trueすべて真偽値、表示されない設定は新規作成する

Extdev Preferences 拡張機能をインストールするのが簡単https://addons.mozilla.org/ja/firefox/addon/12920/

上記の設定をデフォルト設定にするだけの単機能アドオン

ロケーションバーに about:config と入力すると Firefox の内部設定画面が表示されます

各設定の効果javascript.options.showInConsole = true

Web ページだけでなく Firefox や拡張機能内部 (Chrome)での JavaScript エラーもエラーコンソールに出力する

javascript.options.strict = true

JavaScript コードの警告もエラーコンソールに出力する

nglayout.debug.disable_xul_cache = true

Firefox 内部の XUL キャッシュ機能を無効化する

browser.dom.window.dump.enabled = true

デバッグ用の dump() メソッドを有効化する

https://addons.mozilla.org/ja/firefox/addon/12920/

✴ 開発環境の準備✴ UTF-8 を扱えるテキストエディタ

✴ 開発用プロファイル✴ 開発用の Firefox 環境を別途用意する

✴ Firefox の設定変更✴ 開発用の設定をオンにする

✓開発者必携アドオン✓ DOM Inspector をインストール

✴ 基礎知識の再確認✴ XML や JavaScript の基本を再確認

拡張機能開発に備えて準備しよう .(・・).

DOM InspectorFirefox や Web ページの DOM 解析ツール

左ペインに DOM ツリー、ID、クラスを表示右ペインに各要素の属性、スタイルなどの情報を表示

詳しい使い方は実践編で https://developer.mozilla.org/ja/DOM_Inspector

ConsoleFirefox 標準のエラーコンソールを少しパワーアップ

柔軟な絞り込みや検索機能などが追加される

デバッグ時にあると効率アップ https://addons.mozilla.org/ja/firefox/addon/1815/

2

✴ 開発環境の準備✴ UTF-8 を扱えるテキストエディタ

✴ 開発用プロファイル✴ 開発用の Firefox 環境を別途用意する

✴ Firefox の設定変更✴ 開発用の設定をオンにする

✴ 開発者必携アドオン✴ DOM Inspector をインストール

✓基礎知識の再確認✓ XML や JavaScript の基本を再確認

拡張機能開発に備えて準備しよう .(・・).

Firefox 基本用語集プロファイル: 設定やアドオンなどユーザ別データの集合

pref 設定: about:config などでも確認できるユーザ設定

アドオン: 拡張機能、テーマ、プラグインなどの総称

拡張機能: Firefox に機能的変更を加えるアドオン

テーマ: Firefox の UI デザインだけ変化させるアドオン

プラグイン: 非標準コンテンツを表示するためのアドオン

XPI: 拡張機能やテーマのインストールパッケージ

XUL (ズール): Firefox で使う UI 記述用の XML 言語

XUL アプリ: XUL で記述されたソフトウェア厳密な説明じゃないけど気にしない

拡張機能 基本用語集chrome (クロム): GUI 構成要素やパッケージシステム元々は表面的な(あまり実質的でない)機能を指す用語

chrome URL: 登録パッケージの位置を指す仮想パスchrome://browser/content/browser.xul など

パッケージ: アプリを構成するコンポーネントの登録単位 あるいは拡張機能インストーラの単位

マニフェスト: パッケージの登録情報を記載するファイル

オーバーレイ: 既存 XUL を別ファイルで上書きする技術

XPCOM: JavaScript からアクセスできるライブラリ

詳細は入門編で解説します

XML の書き方XML は整形式になっていなければならない

開始タグと終了タグが対応する完全な入れ子構造になることルート要素は単一の要素であること、属性値は引用符で括る同じ名前の属性が重複しない、"<" や "&" は実体参照にする

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox pack=center align=center height=300> <label value="(>.<)" style="font-size: 64px" style="font-weight: bold"> </hbox></window>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox pack="center" align="center" height="300"> <label value="(>.&lt;)" style="font-size: 64px; font-weight: bold"/> </hbox></window>

悪い例

良い例http://www.w3.org/TR/xml/

XML の書き方XML は整形式になっていなければならない

開始タグと終了タグが対応する完全な入れ子構造になることルート要素は単一の要素であること、属性値は引用符で括る同じ名前の属性が重複しない、"<" や "&" は実体参照にする

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox pack=center align=center height=300> <label value="(>.<)" style="font-size: 64px" style="font-weight: bold"> </hbox></window>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox pack="center" align="center" height="300"> <label value="(>.&lt;)" style="font-size: 64px; font-weight: bold"/> </hbox></window>

悪い例

良い例

属性値は引用符で括る

"<" は実体参照で記述 属性は重複しない 空要素は "/>" で終わる

引用符のない属性値

直接書かれた "<" 重複する style 属性 終了タグのない開始タグ

http://www.w3.org/TR/xml/

XML の名前空間要素や属性は名前空間と名前の組み合わせで識別される

名前空間の指定がないと未知の要素として扱われてしまうXHTML の <button> と XUL の <button> は別なので注意

xmlns 属性でその要素と子孫の名前空間を指定する

別の種類の XML を埋め込む時にも xmlns 属性を使う<?xml version="1.0"?><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox pack="center" align="center" height="300"> <label value="(>.&lt;)" style="font-size: 64px; font-weight: bold"/> <div xmlns="http://www.w3.org/1999/xhtml"> <video src="video.ogg"/><img src="image.png"> </div> </hbox></window>

http://www.w3.org/TR/xml-names/

<div xmlns="http://www.w3.org/1999/xhtml"> <video src="video.ogg"/><img src="image.png"></div>

XML の名前空間要素や属性は名前空間と名前の組み合わせで識別される

名前空間の指定がないと未知の要素として扱われてしまうXHTML の <button> と XUL の <button> は別なので注意

xmlns 属性でその要素と子孫の名前空間を指定する

別の種類の XML を埋め込む時にも xmlns 属性を使う<?xml version="1.0"?><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox pack="center" align="center" height="300"> <label value="(>.&lt;)" style="font-size: 64px; font-weight: bold"/> <div xmlns="http://www.w3.org/1999/xhtml"> <video src="video.ogg"/><img src="image.png"> </div> </hbox></window>

http://www.w3.org/TR/xml-names/

<div xmlns="http://www.w3.org/1999/xhtml"> <video src="video.ogg"/><img src="image.png"></div>

全体は XUL の要素

ここだけ XHTML の要素

DTD の書き方DTD: SGML や XML 文書の古典的なスキーマ言語

XML には XML Scheme などの方が普通

DTD を使い文字列を実体参照として分離定義する

XML 文書で文字列を分離、一元管理する古典的手法タグを含む XML の一部分を実体として定義できる&amp; 同様に実体は &entity.id; で参照できる

DTD の仕様は非常に複雑だが拡張機能で使うのはこれだけ

<!ENTITY lable.value "(>.&lt;)"><!ENTITY label.style "font-size: 64px; font-weight: bold">

sample.dtd

DTD の書き方DTD: SGML や XML 文書の古典的なスキーマ言語

XML には XML Scheme などの方が普通

DTD を使い文字列を実体参照として分離定義する

XML 文書で文字列を分離、一元管理する古典的手法タグを含む XML の一部分を実体として定義できる&amp; 同様に実体は &entity.id; で参照できる

DTD の仕様は非常に複雑だが拡張機能で使うのはこれだけ

<!ENTITY lable.value "(>.&lt;)"><!ENTITY label.style "font-size: 64px; font-weight: bold">

sample.dtd

実体参照宣言により名前と値のペアを定義

DTD の読み込み文書型宣言で DTD ファイルを読み込む

DTD の仕様は非常に複雑だが拡張機能で使うのはこれだけ

<!DOCTYPE overlay [ <!ENTITY % sampledtd SYSTEM "sample.dtd" > %sampledtd;]><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox pack="center" align="center" height="300"> <label value="&label.value;" style="&label.style;"/> </hbox></window>

<!ENTITY lable.value "(>.&lt;)"><!ENTITY label.style "font-size: 64px; font-weight: bold">

sample.dtd

<!DOCTYPE overlay SYSTEM "sample.dtd"><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ...

DTD の読み込み文書型宣言で DTD ファイルを読み込む

DTD の仕様は非常に複雑だが拡張機能で使うのはこれだけ

<!DOCTYPE overlay [ <!ENTITY % sampledtd SYSTEM "sample.dtd" > %sampledtd;]><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox pack="center" align="center" height="300"> <label value="&label.value;" style="&label.style;"/> </hbox></window>

<!ENTITY lable.value "(>.&lt;)"><!ENTITY label.style "font-size: 64px; font-weight: bold">

sample.dtd

DTD での定義に従って実体参照は値に置き換え

分離した DTD ファイルを外部パラメータ実体として宣言して読み込む (include)

実体参照宣言により名前と値のペアを定義

<!DOCTYPE overlay SYSTEM "sample.dtd"><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ...

DTD ファイルが 1 つだけの時は簡単な書式での読み込みも可能

JavaScript の変数JavaScript は変数に固定型がない動的型言語

数値、文字列、真偽値、配列、オブジェクト、null

// 変数宣言は var で行う (var なしで代入するとグローバル変数になる)// 数値は倍精度実数(整数型はない)、文字列は可変長var num = 2.71828183, str = "文字列", bool = true;

// 配列は Array 型のオブジェクトとして生成するvar arr = new Array();arr[0]= num; arr[1]=str; arr[2]=bool;// [item0, item1, ... ] で簡単に宣言することも可能// var arr = [num, str, bool];

// 連想配列(ハッシュ)は Object 型のオブジェクトobj = new Object();obj.k= num; obj.e=str; obj.y=bool;// {key1: val1, key2: val2, ... } で簡単に宣言することも可能// var obj = { k: num, e: str, y: bool };

構文エラーなどはエラーコンソールに出力される

JavaScript の関数関数もプリミティブなオブジェクト

変数に代入したり引数に渡したりできる

// 名前付き関数は function functionName(arg1, arg2, ...) { ... } で定義するfunction funcA(arg) { alert("この関数 funcA の引数は" + arg + "です！");}funcA("Firefox といえば拡張機能");

// 無名関数は function(arg, arg2, ...) { ... } で定義し、変数に代入したり引数に渡すvar funcB = function(arg) { alert("この無名関数の引数は" + arg + "です！");}funcC = funcB; // funcB も funcC も同じ無名関数を参照funcC("無名関数は代入した変数に () つけて呼び出す");

// 関数を文字列に変換するとそのソースコードが表示されるalert("関数 funcA のソースコードは" + funcA + "です");

構文エラーなどはエラーコンソールに出力される

変数のスコープJavaScript の var 変数は宣言した関数内でのみ有効

関数外で宣言または var なし変数はグローバル変数if 文などでブロックスコープは形成されない

var firefox = "open source"; // グローバル変数 firefox を宣言if (firefox == "open source") { var gecko = "open source"; // グローバル変数 gecko を宣言}alert(gecko); // "open source"

function apple(anything) { webkit = "open source" // グローバル変数 webkit に代入 var safari = "proprietary"; // 関数スコープ変数 safari を宣言}apple();alert(webkit); // "open source"alert(safari); // undefined 関数外では safari は未定義

Firefox や拡張機能内部では let 宣言によるブロックスコープなども利用できる

JavaScript の書き方拡張機能ではグローバル変数の使用を最小限に

Firefox 本体や他の拡張機能と変数名の重複を避ける最小限のグローバルオブジェクト(普通 1 つ)を宣言必要な変数や関数はそのオブジェクトのプロパティに名前付き関数はグローバルになることに注意

var sampleObj = { bool: true, num: 2.71828183, str: "value", func: function sampleNamedFunction(arg) { alert("named function called with argument: " + arg); }, anonFunc: function(a,r,g) { alert("anonymous function called with arguments: " + a + ", " + r + ", " + g); }};sampleObj.anonFunc(sampleObj.bool, sampleObj.num, sampleObj.str);

Firefox メインウィンドウで実行されるスクリプトでは名前空間に注意が必要

参考資料集

XML & XHTML & CSSごく簡単な HTML の説明http://www.kanzaki.com/docs/htminfo.html

セマンティック HTML/XHTML (書籍でさらに詳しく読む場合)http://www.amazon.co.jp/dp/483993195X

ごくごく簡単な DTD の説明 (実体宣言の説明部分だけ)http://www.kanzaki.com/docs/html/read-dtd.html#entity

スタイルシートの基本 - スタイル設定の方法 & CSS の主なプロパティhttp://www.kanzaki.com/docs/html/htminfo17.htmlhttp://www.kanzaki.com/docs/html/htminfo17-2.html

セオリーオブスタイルシート (書籍でさらに詳しく読む場合)http://www.amazon.co.jp/dp/4774127833

JavaScriptCore JavaScript 1.5 ガイドhttps://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference

JavaScript の再紹介https://developer.mozilla.org/ja/A_re-introduction_to_JavaScript

JavaScript のイロハ (シリーズ連載記事)http://builder.japan.zdnet.com/sp/javascript-kickstart-2007/

JavaScript 1.6 以降で導入された機能https://developer.mozilla.org/ja/New_in_JavaScript_1.6https://developer.mozilla.org/ja/New_in_JavaScript_1.7https://developer.mozilla.org/ja/New_in_JavaScript_1.8https://developer.mozilla.org/En/New_in_JavaScript_1.8.1

ECMAScript for XML (E4X)https://developer.mozilla.org/ja/E4X

開発チュートリアル拡張機能開発チュートリアルhttp://firefox3hacks.org/tutorial.html

XUL チュートリアルhttps://developer.mozilla.org/Ja/XUL_Tutorial

Firefox 3 で始める拡張機能開発http://gihyo.jp/dev/feature/01/firefox-addons

Firefox 3 的な FUEL と JSM を存分に使って拡張機能開発をしよう！http://d.hatena.ne.jp/sotarok/20090127/firefox_3_fuel_jsm

拡張機能開発の一般的な質問https://developer.mozilla.org/ja/Extension_Frequently_Asked_Questions

リファレンスMozilla Developer Center (略称: MDC, Devmo)https://developer.mozilla.org/

XUL リファレンスhttps://developer.mozilla.org/ja/XUL_Reference

Firefox User Extension Library (FUEL)https://developer.mozilla.org/ja/FUEL

XPCOM API リファレンスhttps://developer.mozilla.org/ja/XPCOM_API_Reference

Mozilla Cross-Reference (ソースコード検索)http://mxr.mozilla.org/

コードサンプルMozilla Developer Center (MIT License)https://developer.mozilla.org/

Code Snippets (MIT License)https://developer.mozilla.org/ja/Code_snippets

jslibs - JavaScript Tips & Tricks (GPL v2)http://code.google.com/p/jslibs/wiki/JavascriptTips

既存の拡張機能 (殆どは GPL/LGPL/MPL)https://addons.mozilla.org/

Firefox 本体のコード (GPL/LGPL/MPL Triple License)http://mxr.mozilla.org/