Suzuk 技術紹介のキワミ 第 1 回 How to develop Firefox Extentions suzuk.

Presentation on theme: "Suzuk 技術紹介のキワミ 第 1 回 How to develop Firefox Extentions suzuk."— Presentation transcript:

1 suzuk 技術紹介のキワミ 第 1 回 How to develop Firefox Extentions suzuk

2 Ｗｈａｔ ‘ ｓ Firefox Extention Ｆｉｒｅｆｏｘに後付で機能を追加で きる仕組み – 本体は基本的な機能に抑え，それ以上の機 能は容易に拡張可能 Ｆｉｒｅｆｏｘアドオンマネージャ

3 拡張機能でできること 単機能タイプ –URL をクリックするとリンク動作させる 機能補助タイプ –Tab Mix Plus （タブの拡張） ウェブアプリ連携タイプ –GMailManager （ Gmail 関係のステータスを表示） 新機能追加タイプ – ウェブページ広告をブロック アプリケーションタイプ – 高機能ＲＳＳリーダ 一発ギャグタイプ – 中止ボタンをしいたけに変更 開発能力を要する

4 拡張機能開発で使う技術と知 識 必要な技術 – ＸＵＬ： 構造・枠組み – ＣＳＳ 概観を定義 – ＪａｖａＳｃｒｉｐｔ 全体を動かす・ 制御する – ＸＰＣＯＭ ＪａｖａＳｃｒｉｐｔ以上 の高度機能 必要な知識 – ＸＭＬ，ＣＳＳ，ＪａｖａＳｃｒｉｐｔ， オブジェクト指向プログラミング

5 開発の下準備 ＤＯＭインスペクタのインストール 開発用のプロファイル作成 超重要！ – テスト用に新しくプロファイル作成したほうが賢 明（突然起動しなくなっても安心） ウィンドウ履歴全部消えたｗｗｗｗｗｗ –firefox -no-remote -P “ profile name ” で起動 about:config を開いて、以下の 4 つの値を true –javascript.options.showInConsole –javascript.options.strict

6 クロム クロムについて – ＸＵＬアプリのＧＵＩ構成部分全体を表す –content package: XUL, JavaScript を格納 –locale package: 言語データセット –skin package: Stylesheet や画像などＧＵＩ装 飾ファイルを格納 クロムマニュフェスト – クロムパッケージをＦｉｒｅｆｏｘに登録 する – クロスパッケージオーバーレイの実行

7 さぁ！開発してみよう Hello World Extention の作成 Firefox のツールメニューへ HelloWorld 機能を登録する 1. インストールマニュフェストの作成 2. クロムマニュフェスト作成 3.XUL のクロスパッケージオーバレイ オーバーレイのマージポイントを探索 –DOM インスペクタで確認できる ブラウザウィンドウへのオーバレイ 4. テストインストール

8 インストールマニュフェスト <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> helloworld@suzuk.ht.sfc.keio.ac.jp 2 Hellow World! 0.1 extention test. suzuk http://www.ht.sfc.keio.ac.jp/~suzuk/ {ec8030f7-c20a-464f-9b0e-13a3a9e97384} 2.0 2.0.0.*

9 クロムマニュフェスト contenthelloworldcontent/ overlaychrome://browser/content/browser.xulchrome://helloworld/content/overlay.xul

10 実行画面