Embed Size (px)
DESCRIPTION
Firefox 拡張機能開発@入門編 http://dev.mozilla.jp/addons/intro/
Citation preview
Firefox ExtDev IntroFirefox 拡張機能開発 ＠ 入門編by Tomoya Asai (aka. dynamis)
入門編
拡張機能開発に備えて準備しよう .(・・).
✴ Firefox と拡張機能✴ Firefox も拡張機能も XUL アプリケーション
✴ 拡張機能の開発環境✴ 開発用の Firefox 環境を準備する (準備編参照)
✴ 拡張機能を作ってみよう✴ 取りあえず作ってインストールしてみよう
✴ パッケージ管理システム✴ クロム、パッケージ、オーバーレイとは
✴ 配布用パッケージを作ろう✴ インストーラの構造と作り方を理解しよう
拡張機能開発に備えて準備しよう .(・・).
がんばろう .(・・).
✓ Firefox と拡張機能✓ Firefox も拡張機能も XUL アプリケーション
✴ 拡張機能の開発環境✴ 開発用の Firefox 環境を準備する (準備編参照)
✴ 拡張機能を作ってみよう✴ 取りあえず作ってインストールしてみよう
✴ パッケージ管理システム✴ クロム、パッケージ、オーバーレイとは
✴ 配布用パッケージを作ろう✴ インストーラの構造と作り方を理解しよう
拡張機能開発に備えて準備しよう .(・・).
アプリも拡張機能もXUL + JS + CSS
アプリも拡張機能もXUL + JS + CSS
Mozilla PlatformFirefox などのアプリは Mozilla Platform 上で動作
Mozilla Platform = XUL Application PlatformC++ で書かれた XUL プラットフォーム
Firefox などのアプリ = XUL ApplicationXUL と JavaScript で書かれたアプリケーション
XUL アプリは Web アプリと同じようなもの
UI については (X)HTML の代わりに XUL で書く処理については Web と同様に JavaScript で書くDOM やイベントモデルなどの考え方も基本的に同じWeb 開発経験があれば比較的容易に開発できる
Jetpack: https://wiki.mozilla.org/Labs/Jetpack
Firefox と拡張機能拡張機能は Firefox を動的に書き換える方法
Firefox に追加のコードを動的に読み込み、挿入するXUL はオーバーレイを使って動的に書き換えられるJavaScript は動的言語なので何でも書き換えられる
Firefox でできることは拡張機能で何でもできる
セキュリティには注意して開発する必要がある
Jetpack プロジェクトでは API は限られるが簡単に機能を実装できる次世代拡張機能フレームワークを策定中
基本的には JavaScript だけで書けるように
ずーるって (・・)?
XUL とはXUL (ずーる) = XML User Interface Language
HTML と同じスタイルでアプリを開発できる言語XML で UI やアプリの構造を記述する言語の先駆け
XUL アプリケーション = XUL + JS + CSS
XUL で UI の構造 (枠組み) を記述要素や属性が違うだけで Web アプリと同じスタイル
JavaScript で処理 (振る舞い) を記述JavaScript でできないことは XPCOM ライブラリを利用
CSS で細かな外観 (デザイン) を記述Web と同じ CSS に加えて XUL 専用のプロパティを追加
HTML5 の先輩みたいなプラットフォーム
ねむぃ... (・・)zzZ
✴ Firefox と拡張機能✴ Firefox も拡張機能も XUL アプリケーション
✓拡張機能の開発環境✓ 開発用の Firefox 環境を準備する (準備編参照)
✴ 拡張機能を作ってみよう✴ 取りあえず作ってインストールしてみよう
✴ パッケージ管理システム✴ クロム、パッケージ、オーバーレイとは
✴ 配布用パッケージを作ろう✴ インストーラの構造と作り方を理解しよう
拡張機能開発に備えて準備しよう .(・・).
わくわく .(・・).
ユーザプロファイルユーザの設定やデータを収めたファイル群のこと
設定、ブックマーク、履歴、拡張機能などを含む
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.extdevWin 98/Me C:¥Windows¥Application Data¥Mozilla¥Firefox¥Profiles¥xxxxxxxx.detdevMac OS X ~/Library/Application support/Firefox/Profiles/xxxxxxxx.extdevLinux ~/.mozilla/firefox/xxxxxxxx.extdev
開発用の設定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 の内部設定画面が表示されます
おっけー (・・)v
✴ Firefox と拡張機能✴ Firefox も拡張機能も XUL アプリケーション
✴ 拡張機能の開発環境✴ 開発用の Firefox 環境を準備する (準備編参照)
✓拡張機能を作ってみよう✓ 取りあえず作ってインストールしてみよう
✴ パッケージ管理システム✴ クロム、パッケージ、オーバーレイとは
✴ 配布用パッケージを作ろう✴ インストーラの構造と作り方を理解しよう
拡張機能開発に備えて準備しよう .(・・).
開発の第一歩
どきどき .(・・).
困ったときは...何はともあれエラーコンソールを確認
エラーコンソールがデバッグの基本
他のアドオンを無効化してから動作確認
他にエラーを吐いているアドオンはすべて無効化XUL や XML は Firefox で読み込んで構文エラーを確認
確認時には chrome:// URL で読み込むことローカルから chrome:// を読み込むとパースエラー
ファイルの文字コードは UTF-8 (BOM なし) で保存
マルチバイト文字が使えない場合もあるので注意
拡張機能の作成手順1. どんな拡張機能を作るか考える
• ここが実は拡張機能開発最大の難関かも？2. 拡張機能の開発用ディレクトリを作る
• 修正するたびに再インストールせずにすませる3. install.rdf と chrome.manifest を書く
• 拡張機能と含まれるパッケージを登録する4. 拡張機能本体のコードを書く
• 登録しても中身がないと何もできません5. 試行錯誤しながら完成させる
• うまく動くようになるまで諦めずに頑張る簡易的な拡張機能開発を行う場合
拡張機能の ID拡張機能やアプリケーションを識別し登録するための ID
GUID 形式とメールアドレスのような形式の 2 つがある
GUID は uuidgen コマンドなどで生成できる識別子Firefox は {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
特に理由がない限り [email protected] 形式を使うドメイン持ってない場合は仕方ないので GUID を使う@extdev.org は自由に使ってくれて良いですが、他の人が作ったアドオンと名前が重複しても責任は持ちません (^^;
今回は取りあえず [email protected] とする
余力のある方は別の ID で作ってみてください
https://developer.mozilla.org/ja/Generating_GUIDs
拡張機能ディレクトリ 拡張機能のインストール＝ 拡張機能のファイルをプロファイルに展開＝ プロファイルに直接ファイルを置く
拡張機能のアンインストール＝ 拡張機能のディレクトリをプロファイルから削除
開発中は拡張機能ディレクトリのファイルを直接編集∵ 修正するたびにインストールし直すのは面倒だから
${プロファイル}/extensions/[email protected]
拡張機能の ID 名でディレクトリを作成する
開発中に間違ってアンインストール(＝ファイル削除)してしまわないように注意
プロファイルディレクトリユーザプロファイルのデータを収めるディレクトリ
%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.extdevWin 98/Me C:¥Windows¥Application Data¥Mozilla¥Firefox¥Profiles¥xxxxxxxx.detdevMac OS X ~/Library/Application support/Firefox/Profiles/xxxxxxxx.extdevLinux ~/.mozilla/firefox/xxxxxxxx.extdev
拡張機能を登録する<?xml version="1.0"?><RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>[email protected]</em:id> <em:version>0.1</em:version> <em:name>Sample Extension</em:name> <em:description>拡張機能の第一歩</em:description> <em:creator>dynamis</em:creator> <em:homepageURL>http://extdev.org/</em:homepageURL> <em:targetApplication> <Description><!-- Firefox --> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.0</em:minVersion> <em:maxVersion>3.5.*</em:maxVersion> </Description> </em:targetApplication> </Description></RDF>
コピーして青色の部分だけ変えれば OK https://developer.mozilla.org/ja/Install.rdf
[email protected]/install.rdf
拡張機能を登録する<?xml version="1.0"?><RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>[email protected]</em:id> <em:version>0.1</em:version> <em:name>Sample Extension</em:name> <em:description>拡張機能の第一歩</em:description> <em:creator>dynamis</em:creator> <em:homepageURL>http://extdev.org/</em:homepageURL> <em:targetApplication> <Description><!-- Firefox --> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.0</em:minVersion> <em:maxVersion>3.5.*</em:maxVersion> </Description> </em:targetApplication> </Description></RDF>
コピーして青色の部分だけ変えれば OK https://developer.mozilla.org/ja/Install.rdf
em:id は拡張機能の ID (一意に識別するために使う)em:version は拡張機能のバージョン番号
em:name と em:description はアドオンマネージャに表示する
拡張機能の名前と説明em:creator や em:homepageURL
なども必要に応じて設定する
em:minVersion と em:MaxVersion は対応している(インストールできる)
Firefox の最小および最大バージョン
[email protected]/install.rdf
Firefox 起動してみるFirefox を(再)起動すると登録される
v(・・) インストールできた (・・)v
• content/ ディレクトリを sample という名前のcontent 型(ソースファイル)パッケージとして登録
• chrome://sample/content/ でアクセス可能になる
• パッケージの型 ＝ content 型 ＝ ソースファイル
• content 型以外に locale 型 (言語ファイル) と skin 型(テーマファイル) と合わせて 3 種類のパッケージが存在
• パッケージの名前 ＝ sample (普通は ID の @までと同じ)
• 登録ディレクトリ ＝ content/ (相対パスで記述)
パッケージを登録するcontent sample content/
[email protected]/chrome.manifest
https://developer.mozilla.org/ja/Chrome_Registration
• content/ ディレクトリを sample という名前のcontent 型(ソースファイル)パッケージとして登録
• chrome://sample/content/ でアクセス可能になる
• パッケージの型 ＝ content 型 ＝ ソースファイル
• content 型以外に locale 型 (言語ファイル) と skin 型(テーマファイル) と合わせて 3 種類のパッケージが存在
• パッケージの名前 ＝ sample (普通は ID の @までと同じ)
• 登録ディレクトリ ＝ content/ (相対パスで記述)
パッケージを登録するcontent sample content/
[email protected]/chrome.manifest
https://developer.mozilla.org/ja/Chrome_Registration
ディレクトリパス末尾の / を忘れずに！型 名前 ディレクトリ
XUL ファイルを書く<?xml version="1.0"?><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox pack="center" align="center" height="300"> <label onclick=" " style="font-size: 64px">(・・)v</label> </hbox></window>
[email protected]/content/sample.xul
XUL ファイルを書く<?xml version="1.0"?><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox pack="center" align="center" height="300"> <label onclick=" " style="font-size: 64px">(・・)v</label> </hbox></window>
[email protected]/content/sample.xul
Sample = { alert: function() { var prompts = Components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getService(Components.interfaces.nsIPromptService); prompts.alert(window, "(・・)?", "v(・・).(・・).(・・)v"); }};
[email protected]/content/sample.js
<script type="application/javascript" src="chrome://sample/content/sample.js"/>
Sample.alert();
Firefox で表示してみる再起動して chrome://sample/content/ を表示
chrome://sample/content/ だけで index.html のようにchrome://sample/content/sample.xul が読み込まれる
Firefox で表示してみる再起動して chrome://sample/content/ を表示
chrome://sample/content/ だけで index.html のようにchrome://sample/content/sample.xul が読み込まれる
トラブルシューティングアドオンマネージャに表示されない
install.rdf の構文エラーやバージョン指定ミス？
chrome://sample/content/ が見つからない
chrome.manifest でディレクトリ指定に / がない？ファイル名やディレクトリ名が間違っていないか？
XML パースエラーが表示される
XUL が整形式になっているか？
ダイアログが表示されない
sample.js に構文エラーや typo がないか？常にエラーコンソールを確認すること
ボタンとか... (・・)?
XUL オーバーレイオーバーレイ ＝ XUL に要素や属性を挿入する技術
書き換え対象要素の ID を指定してマージする
拡張機能では Firefox 本体の XUL に要素や属性を追加するために (クロスパッケージ) オーバーレイを使用する
Firefox の振る舞いを変えるときはほぼ確実に使うパーツを分離することで見通しが良くなるテンプレートシステムとして使うこともある
今回はツールバーパレットにボタンを追加してみる
toolbarpalette 要素に子要素を挿入すればよい
https://developer.mozilla.org/ja/XUL/overlay, https://developer.mozilla.org/ja/XUL_Overlays
パッケージを追加する
content/ ディレクトリを sample という名前のcontent 型 (ソースファイル) パッケージとして登録
content/ ディレクトリを chrome://sample/content/ で読み込み可能に
skin/ ディレクトリを sample という名前のデフォルトテーマ用skin 型 (テーマファイル) パッケージとして登録
skin/ ディレクトリを chrome://sample/skin/ で読み込み可能に
overlay.xul を browser.xul にオーバーレイ
toolbar.css を customizeToolbar.xul のスタイルシートに設定
content sample content/skin sample classic/1.0 skin/overlay chrome://browser/content/browser.xul chrome://sample/content/overlay.xulstyle chrome://global/content/customizeToolbar.xul chrome://sample/skin/toolbar.css
[email protected]/chrome.manifest
https://developer.mozilla.org/ja/Chrome_Registration
パッケージを追加する
content/ ディレクトリを sample という名前のcontent 型 (ソースファイル) パッケージとして登録
content/ ディレクトリを chrome://sample/content/ で読み込み可能に
skin/ ディレクトリを sample という名前のデフォルトテーマ用skin 型 (テーマファイル) パッケージとして登録
skin/ ディレクトリを chrome://sample/skin/ で読み込み可能に
overlay.xul を browser.xul にオーバーレイ
toolbar.css を customizeToolbar.xul のスタイルシートに設定
content sample content/skin sample classic/1.0 skin/overlay chrome://browser/content/browser.xul chrome://sample/content/overlay.xulstyle chrome://global/content/customizeToolbar.xul chrome://sample/skin/toolbar.css
[email protected]/chrome.manifest型 名前 [ターゲット] ディレクトリ
classic/1.0 はデフォルトテーマ
命令 ターゲットファイル ソースファイル ファイルパスは chrome:// URL で記述
https://developer.mozilla.org/ja/Chrome_Registration
オーバーレイを書く<?xml version="1.0"?><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ..... <toolbarpalette id="BrowserToolbarPalette" ... > ... (・・) ... </toolbarpalette> .....</window>
chrome://browser/content/browser.xul
<?xml version="1.0"?><?xml-stylesheet href="chrome://sample/skin/toolbar.css" type="text/css"?><overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbarpalette id="BrowserToolbarPalette">
</toolbarpalette></overlay>
[email protected]/content/overlay.xul
簡単のため一部修正や省略した
<toolbarbutton id="sample-toolbarbutton" class="toolbarbutton-1" label="(・・)v" tooltiptext="(・・)v" oncommand="Sample.alert();"/>
<script type="application/javascript" src="chrome://sample/content/sample.js"/>
オーバーレイを書く<?xml version="1.0"?><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ..... <toolbarpalette id="BrowserToolbarPalette" ... > ... (・・) ... </toolbarpalette> .....</window>
chrome://browser/content/browser.xul
<?xml version="1.0"?><?xml-stylesheet href="chrome://sample/skin/toolbar.css" type="text/css"?><overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbarpalette id="BrowserToolbarPalette">
</toolbarpalette></overlay>
[email protected]/content/overlay.xul
簡単のため一部修正や省略した
<toolbarbutton id="sample-toolbarbutton" class="toolbarbutton-1" label="(・・)v" tooltiptext="(・・)v" oncommand="Sample.alert();"/>
<script type="application/javascript" src="chrome://sample/content/sample.js"/>
overlay 直下の要素は対象ファイルのルート要素直下に挿入される
同一 ID の要素がある場合その子孫は該当タグの下に挿入される
この toolbarpalett 配下に toolbarbutton を追加したい
オーバーレイを書く<?xml version="1.0"?><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ..... <toolbarpalette id="BrowserToolbarPalette" ... > ... (・・) ... </toolbarpalette> .....</window>
chrome://browser/content/browser.xul
<?xml version="1.0"?><?xml-stylesheet href="chrome://sample/skin/toolbar.css" type="text/css"?><overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbarpalette id="BrowserToolbarPalette">
</toolbarpalette></overlay>
[email protected]/content/overlay.xul
簡単のため一部修正や省略した
overlay 直下の要素は対象ファイルのルート要素直下に挿入される
同一 ID の要素がある場合その子孫は該当タグの下に挿入される
この toolbarpalett 配下に toolbarbutton を追加したい
オーバーレイを書く
デフォルトでは overlay する側の子要素がオーバーレイされる側の要素の最後の子要素として追加される
挿入位置は position 属性などで制御できる (MDC 参照)
<?xml version="1.0"?><?xml-stylesheet href="chrome://sample/skin/toolbar.css" type="text/css"?><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ..... <toolbarpalette id="BrowserToolbarPalette" ... > ... (・・) ...
</toolbarpalette> .....
</window>
chrome://browser/content/browser.xul
https://developer.mozilla.org/ja/XUL_Tutorial/Overlays
オーバーレイを書く
デフォルトでは overlay する側の子要素がオーバーレイされる側の要素の最後の子要素として追加される
挿入位置は position 属性などで制御できる (MDC 参照)
<?xml version="1.0"?><?xml-stylesheet href="chrome://sample/skin/toolbar.css" type="text/css"?><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ..... <toolbarpalette id="BrowserToolbarPalette" ... > ... (・・) ...
</toolbarpalette> .....
</window>
chrome://browser/content/browser.xul
<toolbarbutton id="sample-toolbarbutton" class="toolbarbutton-1" label="(・・)v" tooltiptext="(・・)v" oncommand="Sample.alert();"/>
<script type="application/javascript" src="chrome://sample/content/sample.js"/>
https://developer.mozilla.org/ja/XUL_Tutorial/Overlays
オーバーレイを書く
デフォルトでは overlay する側の子要素がオーバーレイされる側の要素の最後の子要素として追加される
挿入位置は position 属性などで制御できる (MDC 参照)
<?xml version="1.0"?><?xml-stylesheet href="chrome://sample/skin/toolbar.css" type="text/css"?><window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ..... <toolbarpalette id="BrowserToolbarPalette" ... > ... (・・) ...
</toolbarpalette> .....
</window>
chrome://browser/content/browser.xul
<toolbarbutton id="sample-toolbarbutton" class="toolbarbutton-1" label="(・・)v" tooltiptext="(・・)v" oncommand="Sample.alert();"/>
<script type="application/javascript" src="chrome://sample/content/sample.js"/>
overlay 直下の要素は対象ファイルのルート要素直下に挿入される
同一 ID の要素がある場合その子孫は該当タグの下に挿入される
https://developer.mozilla.org/ja/XUL_Tutorial/Overlays
ツールバーボタンを作る<?xml version="1.0"?><?xml-stylesheet href="chrome://sample/skin/toolbar.css" type="text/css"?><overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://sample/content/sample.js"/> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="sample-toolbarbutton" class="toolbarbutton-1" label="(・・)v" tooltiptext="(・・)v" oncommand="Sample.alert();"/> </toolbarpalette></overlay>
[email protected]/content/overlay.xul
#sample-toolbarbutton { list-style-image: url("chrome://sample/skin/icon-48x24.png");}toolbar[iconsize="small"] #sample-toolbarbutton { list-style-image: url("chrome://sample/skin/icon-32x16.png");}
[email protected]/skin/toolbar.css
ボタンやメニューは MDC のサンプルコードを見ながら作ればよい
ツールバーボタンを作る<?xml version="1.0"?><?xml-stylesheet href="chrome://sample/skin/toolbar.css" type="text/css"?><overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://sample/content/sample.js"/> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="sample-toolbarbutton" class="toolbarbutton-1" label="(・・)v" tooltiptext="(・・)v" oncommand="Sample.alert();"/> </toolbarpalette></overlay>
[email protected]/content/overlay.xul
#sample-toolbarbutton { list-style-image: url("chrome://sample/skin/icon-48x24.png");}toolbar[iconsize="small"] #sample-toolbarbutton { list-style-image: url("chrome://sample/skin/icon-32x16.png");}
[email protected]/skin/toolbar.css
ボタンやメニューは MDC のサンプルコードを見ながら作ればよい
ツールバーボタンは class 属性に toolbarbutton-1 を指定する
スタイルシートの適用を忘れないように
ボタンに使用するアイコンを大小 2 つ指定する
Firefox で表示してみるFirefox を再起動して chrome://sample/
content/ を表示
v(・・) ボタン追加された (・・)v
Firefox で表示してみるFirefox を再起動して chrome://sample/
content/ を表示
v(・・) ボタン追加された (・・)v
パレットにアイコンが追加されない
chrome.manifest の記述は正しいか？overlay.xul が整形式になっているか？
アイコンの画像がおかしい
chrome.manifest の style 命令は正しいか？overlay.xul の xml-stylesheet 処理命令は正しいか？toolbar.css に構文エラーや typo がないか？
ラベルがアイコンの下でなく横に表示される
class 属性に toolbarbutton-1 を指定しているか？
常にエラーコンソールを確認すること
トラブルシューティング
できた！ (・・)v
✴ Firefox と拡張機能✴ Firefox も拡張機能も XUL アプリケーション
✴ 拡張機能の開発環境✴ 開発用の Firefox 環境を準備する (準備編参照)
✴ 拡張機能を作ってみよう✴ 取りあえず作ってインストールしてみよう
✓パッケージ管理システム✓ クロム、パッケージ、オーバーレイとは
✴ 配布用パッケージを作ろう✴ インストーラの構造と作り方を理解しよう
拡張機能開発に備えて準備しよう .(・・).
パッケージ管理
しくみは (・・)?
クロムとパッケージFirefox の GUI や機能を実装する部分をクロムと呼ぶ
クロム (chrome) はパッケージという構成要素の集合
パッケージには content, locale, skin の 3 種類がある
拡張機能では通常新しいパッケージを作り登録する
パッケージを含まない拡張機能というのも存在するdefaults や searchplugin ディレクトリなどは登録不要
https://developer.mozilla.org/ja/Chrome
型 パッケージに含まれるものcontent XUL や JavaScript など UI や処理を記述するソースファイルlocale 各言語用の UI 文字列を含む言語リソースファイル (*dtd, *.properties)skin 各テーマ用のデザイン要素となる CSS や画像などのファイル
パッケージ管理manifest ファイルで chrome レジストリに登録する
登録されると chrome:// URL でアクセス可能になる
既存のパッケージを書き換えるにはオーバーレイを使う
ファイルを丸ごと置き換える override 命令もあるその他高度な機能については MDC を参照https://developer.mozilla.org/ja/Chrome_Registration
content example chrome/content/locale example en-US chrome/locale/en-US/locale example ja chrome/locale/ja/skin example classic/1.0 chrome/skin/overlay chrome://browser/content/some.xul chrome://example/content/overlay.xulstyle chrome://browser/content/other.xul chrome://example/skin/sample.css
https://developer.mozilla.org/ja/Chrome_Registration
chrome:// URLクロムのパッケージを参照するための特別なスキーマ
chrome://packagename/type/path/to.file 形式locale や skin はユーザ設定に合うものが選択される
chrome:// URL のファイルには特権が与えられる
ユーザ設定やファイルなどにアクセスする特権chrome:// の外から chrome:// にはアクセスできない
ローカルファイルも chrome:// に登録しないと権限なし
Firefox 本体は browser パッケージの browser.xul
chrome://browser/content/browser.xul
ディレクトリ構成基本的には Firefox 本体と同じディレクトリ構成が良い
クロムのパッケージは chrome ディレクトリに
chrome/content, chrome/locale, chrome/skinmanifest ファイルで指定すれば何処でも動作はする
拡張機能の初期設定ファイルは defaults/preferences
defaults/preferences/*.js を初期設定として読み込む
検索プラグインは searchplugins
searchplugins/*.xml が自動的に登録される
配布パッケージでは chrome 以下を jar に zip 圧縮する実際には先の例のように直下に content などを置くことも多い
わかった！ v(・・)
✴ Firefox と拡張機能✴ Firefox も拡張機能も XUL アプリケーション
✴ 拡張機能の開発環境✴ 開発用の Firefox 環境を準備する (準備編参照)
✴ 拡張機能を作ってみよう✴ 取りあえず作ってインストールしてみよう
✴ パッケージ管理システム✴ クロム、パッケージ、オーバーレイとは
✓配布用パッケージを作ろう✓ インストーラの構造と作り方を理解しよう
拡張機能開発に備えて準備しよう .(・・).
配布用パッケージ
配ろう .(・・)!
パッケージの作り方
ZIP する
XPI パッケージとはXPI = Cross(X)-Platfort Installer
拡張機能などの配布用 ZIP パッケージのこと
拡張機能の登録情報は install.rdf と chrome.manifest
ファイルの構成は開発用ディレクトリと一緒で OK
トップに install.rdf と chrome.manifestあとは chrome.manifest の記述次第
.zip ファイルにまとめて拡張子だけ .xpi にすればよい
逆に拡張機能のインストールは XPI を展開してextensions ディレクトリに置いているだけ
https://developer.mozilla.org/ja/XPI
パッケージの作り方
ZIP する
「正しい」パッケージchrome のファイルは jar (これも zip) にまとめておく
jar ファイル中では content, locale, skin の配下にパッケージ名のディレクトリを追加する
chrome/content/ -> content/content/packagename/
chrome 配下を zip して packagename.jar にjar は非圧縮の zip にするのが普通
chrome.manifest も jar! を使った記述に修正が必要content example chrome/example.jar!/content/example/locale example en-US chrome/example.jar!/locale/en-US/example/locale example ja chrome/example.jar!/locale/ja/example/skin example classic/1.0 chrome/skin/overlay chrome://browser/content/some.xul chrome://example/content/overlay.xulstyle chrome://browser/content/other.xul chrome://example/skin/sample.css
普通はスクリプトで処理しますが、今回は環境準備が手間なので割愛
パッケージの作り方
ZIP する
できた！ \(・・)/
AMO で公開しようexample.xpi ができたら Firefox にインストール
問題なければ addons.mozilla.org に UP する
アドオンの説明なども書いて公開しましょう
修正したら新しいバージョンとして登録
インストールしているユーザには更新が通知される評価やコメントがある程度集まったらレビュー申請
評価されていないアドオンはレビュー対象外エディタと呼ばれる人にレビューしてもらいますパスしたら「実験的アドオン」ではなくなる
https://addons.mozilla.org/ja/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/
