suzuk 技術紹介のキワミ
第1回
How to develop Firefox Extentions
suzuk
Ｗｈａｔ‘ｓ Firefox Extention
• Ｆｉｒｅｆｏｘに後付で機能を追加できる仕組み
– 本体は基本的な機能に抑え，それ以上の機
能は容易に拡張可能
Ｆｉｒｅｆｏｘアドオンマネージャ
拡張機能でできること
• 単機能タイプ
– URLをクリックするとリンク動作させる
• 機能補助タイプ
– Tab Mix Plus（タブの拡張）
• ウェブアプリ連携タイプ
– GMailManager（Gmail関係のステータスを表示）
• 新機能追加タイプ
– ウェブページ広告をブロック
• アプリケーションタイプ
– 高機能ＲＳＳリーダ
• 一発ギャグタイプ
– 中止ボタンをしいたけに変更
開発能力を要する
拡張機能開発で使う技術と知識
• 必要な技術
–
–
–
–
ＸＵＬ： 構造・枠組み
ＣＳＳ 概観を定義
ＪａｖａＳｃｒｉｐｔ 全体を動かす・制御する
ＸＰＣＯＭ ＪａｖａＳｃｒｉｐｔ以上の高度機能
• 必要な知識
– ＸＭＬ，ＣＳＳ，ＪａｖａＳｃｒｉｐｔ，オブジェクト指向
プログラミング
開発の下準備
• ＤＯＭインスペクタのインストール
• 開発用のプロファイル作成 超重要！
– テスト用に新しくプロファイル作成したほうが賢明（突
然起動しなくなっても安心）
• ウィンドウ履歴全部消えたｗｗｗｗｗｗ
– firefox -no-remote -P “profile name”で起動
• about:configを開いて、以下の4つの値をtrue
– javascript.options.showInConsole
– javascript.options.strict
クロム
• クロムについて
–
–
–
–
ＸＵＬアプリのＧＵＩ構成部分全体を表す
content package: XUL, JavaScriptを格納
locale package: 言語データセット
skin package: Stylesheetや画像などＧＵＩ装飾
ファイルを格納
• クロムマニュフェスト
– クロムパッケージをＦｉｒｅｆｏｘに登録する
– クロスパッケージオーバーレイの実行
さぁ！開発してみよう
Hello World Extentionの作成
•
FirefoxのツールメニューへHelloWorld機
能を登録する
1. インストールマニュフェストの作成
2. クロムマニュフェスト作成
3. XULのクロスパッケージオーバレイ
•
オーバーレイのマージポイントを探索
– DOMインスペクタで確認できる
•
ブラウザウィンドウへのオーバレイ
4. テストインストール
インストールマニュフェスト
<?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:type>2</em:type>
<em:name>Hellow World!</em:name>
<em:version>0.1</em:version>
<em:description>extention test.</em:description>
<em:creator>suzuk</em:creator>
<em:homepageURL>http://www.ht.sfc.keio.ac.jp/~suzuk/</em:homepageURL>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>2.0</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
クロムマニュフェスト
content
overlay
helloworld content/
chrome://browser/content/browser.xul
chrome://helloworld/content/overlay.xul
実行画面