Clever Geek Handbook

FireFox Starter Extensionの作成

この記事では、FireFoxの最も簡単な拡張機能を開発するための段階的な手順を説明します。

これは、元の記事の部分的な翻訳です。



これは私の記事ではなく、私の友人です（彼の小さな男：templar8@gmail.com）。 彼は本当にHabrに乗りたいと思っています。 私自身、招待状に十分なカルマがありません。



エントリー



このチュートリアルは、簡単な拡張機能を作成する方法を順を追って説明しています。 ステータスバーに「Hello、World！」というフレーズを含む別の小さなパネルを追加しようとします。



環境の準備



拡張機能は、zipファイルまたはXPI拡張機能付きパッケージとしてパッケージ化および配布されます。



一般的なXPIファイルの内部構造の例を次に示します。



exampleExt.xpi:

/install.rdf

/components/*

/components/cmdline.js

/defaults/

/defaults/preferences/*.js

/plugins/*

/chrome.manifest

/chrome/icons/default/*

/chrome/

/chrome/content/







このようなディレクトリ構造を作成する必要があります。 最初に、拡張機能のルートディレクトリを作成します（たとえば、 C:\extensions\my_extension\



または~/extensions/my_extension/



）。 このディレクトリ内に、 content



ディレクトリを作成するchrome



ディレクトリを作成しcontent



。



拡張機能のルートディレクトリで、名前がchrome.manifest



およびinstall.rdf



2つの空のテキストファイルを作成します。 結果は、次の形式のディレクトリ構造になります。



<ext path>\

install.rdf

chrome.manifest

chrome\

content\







環境の設定に関する追加情報は、このリンクで見つけることができます。



インストールスクリプト



install.rdfファイルを開き、次のテキストを追加します。







  1. <？ xml バージョン = "1.0" ？ >
  3. < RDF xmlns = "http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  4. xmlns：em = "http://www.mozilla.org/2004/em-rdf#" >
  6. < 説明 = "urn：mozilla：install-manifest" >
  7. < em：id > sample@example.net </ em：id >
  8. < em：バージョン > 1.0 </ em：バージョン >
  9. < em：タイプ > 2 </ em：タイプ >
  11. <！-この拡張機能をインストールできるターゲットアプリケーション、
  12. サポートされている最小バージョンと最大バージョン。 ->
  13. < em：targetApplication >
  14. < 説明 >
  15. < em：id > {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </ em：id >
  16. < em：minVersion > 1.5 </ em：minVersion >
  17. < em：maxVersion > 3.0。* </ em：maxVersion >
  18. </ 説明 >
  19. </ em：targetApplication >
  21. <！-フロントエンドメタデータ->
  22. < em：name >サンプル</ em：name >
  23. < em：説明 >テスト拡張機能</ em：説明 >
  24. < em：creator >ここにあなたの名前</ em：creator >
  25. < em：homepageURL > www.example.com </ em：homepageURL >
  26. </ 説明 >
  27. </ RDF >
*このソースコードは、 ソースコードハイライターで強調表示されました。




（install.rdfが間違っているというメッセージが表示された場合、このファイルをFirefoxにアップロードすると便利です（ファイル->ファイルを開く...）。その後、ブラウザにxmlエラーが表示されます。私の場合、「<？Xml」の前にスペースがありました）



Firefox 2.0.0.xで動作するように作成された拡張機能は、「2.0.0。*」の最大バージョンとして指定する必要があります。 Firefox 1.5.0.x-"1.5.0。*"で動作するように作成された拡張機能用。



必須およびオプションのインストールスクリプトパラメータのリストは、 ここにあります 。



ファイルを保存します。



XULを使用したブラウザ拡張



Firefoxユーザーインターフェイスは、XULとJavaScriptを使用して記述されています。 XULは、ボタン、メニュー、コントロールパネル、ツリーなどのユーザーインターフェイス要素を作成できるXMLの亜種です。 すべてのユーザーアクションはJavaScriptを使用して処理されます。



ブラウザを「拡張」するために、ウィジェット（コントロール）を追加または変更して、Firefoxユーザーインターフェイスの個々の部分を変更します。 ブラウザーウィンドウに新しいXUL DOM要素を追加してウィジェットを追加し、スクリプトとイベント処理を使用してウィジェットの動作を制御します。



ブラウザーインターフェースはbrowser.xul



ファイルで定義されています（ $FIREFOX_INSTALL_DIR/chrome/browser.jar



はcontent/browser/browser.xul



が含まれていcontent/browser/browser.xul



） browser.xul



には、次のようなステータスバーの説明があります。







  1. < statusbar id = "status-bar" >
  2. ... < statusbarpanel > ...
  3. </ ステータスバー >
*このソースコードは、 ソースコードハイライターで強調表示されました。


<statusbar id="status-bar">



は、XULレイヤーの「タイポイント」です。



XULレイヤー



XULレイヤーは、ウィジェットをXULドキュメントに追加する方法です。 XULレイヤーは、「メイン」ドキュメント内のタイポイントを記述するXULフラグメントを定義する.xulファイルです。 これらのフラグメントは、追加、削除、または変更されるウィジェットを示すことができます。



XULレイヤードキュメントの例







  1. <？ xml バージョン = "1.0" ？ >
  2. < オーバーレイ ID =「サンプル」
  3. xmlns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
  4. < statusbar id = "status-bar" >
  5. < statusbarpanel id = "my-panel" label = "Hello、World" />
  6. </ ステータスバー >
  7. </ オーバーレイ >
*このソースコードは、 ソースコードハイライターで強調表示されました。


idが「 status-bar



」に等しい<statusbar>



は、要素を追加するブラウザーウィジェットを指します。



<statusbarpanel>



は、追加する新しいウィジェットです。



このコードをchrome/content



ディレクトリのsample.xul



ファイルsample.xul



保存します。



Chrome URI



XULファイルは、いわゆる 「 Chromeパッケージ 」 chrome://



形式のURIを介してロードされたユーザーインターフェイス要素のパッケージ。 フォームfile://



URIを使用してインターフェイスを読み込む代わりにfile://



（さらに、Firefoxの場所はプラットフォームとシステムによって異なる場合があります）、Mozilla開発者はインストールされたすべてのアプリケーションがアクセスできる新しい種類のURIを作成することにしましたXULコンテンツ。



ブラウザウィンドウのURIはchrome://browser/content/browser.xul



です。 FirefoxのアドレスバーにこのURLを入力してください。



Chrome URIはいくつかの部分で構成されています：





たとえば、 chrome://foo/skin/bar.png



は、 foo



テーマのスキンセクションからchrome://foo/skin/bar.png



ファイルをロードします。



Chrome URIを使用して何かをダウンロードすると、FirefoxはChromeレジストリ（Chromeレジストリ）を使用して、このURIをディスク上の（またはJARアーカイブ内の）ファイルへの実際のパスに変換します。



Chromeマニフェストの作成



Chromeマニフェストとそのすべての機能の詳細については、 リファレンスガイドをご覧ください。



拡張機能のルートディレクトリに作成されたchrome.manifestファイルを開きます。 次のコードを追加します。



content sample chrome/content/







（ 最後のスラッシュ「/」を忘れないでください！これがないと、パッケージは登録されません。）



各要素を分析しましょう：

  1. パッケージタイプクローム
  2. パッケージ名chrome（バージョン2以前のFirefox / Thunderbirdは大文字と小文字が混在する名前をサポートしていないため、小文字にする必要があります- バグ132183 ）

  3. クロムパッケージファイルのホスト


これは、 サンプルパッケージファイルがchrome.manifest



ファイルの場所に対してchrome/content



ディレクトリにあることをchrome.manifest



ます。



コンテンツ、ローカライズ、およびスキンファイルは、それぞれchromeサブディレクトリのコンテンツ、ロケール、およびスキンディレクトリ内になければならないことに注意してください。



ファイルを保存します。 これで、拡張機能を使用してFirefoxを起動すると（これを行う方法については以下で説明します）、chromeパッケージが登録されます。



レイヤー登録



次に、レイヤーをブラウザーウィンドウにリンクする必要があります。 これを行うには、 chrome.manifest



ファイルに次の行を追加します。



overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul







これらの2行は、 browser.xul



ロード中にsample.xul



とbrowser.xul



をリンクするようFirefoxに指示します。



テスト中



まず、Firefoxに拡張機能を伝える必要があります。 Firefoxバージョン2以降の開発段階では、新しい拡張機能の取得元を指定でき、ブラウザは再起動するたびにダウンロードします。



  1. ホームディレクトリに移動してから、作業するFirefoxプロファイルを含むディレクトリに移動します（例： Firefox/Profiles/<profile_id>.default/



    ）。

  2. extensions/



    ディレクトリに移動し、存在しない場合は作成します。

  3. テキストファイルを作成し、拡張子（たとえば、 C:\extensions\my_extension\



    または~/extensions/my_extension/



    ）を~/extensions/my_extension/



    ディレクトリへのフルパスを入力します。 Windowsユーザーはスラッシュの方向に注意する必要があります;末尾のスラッシュを追加し、末尾のスペースをすべて削除してください。

  4. 拡張子idを名前としてファイルを保存します（たとえば、sample @ example.net）。 ファイル拡張子はありません。



これで、すべてのテストの準備が整いました。



Firefoxを起動します。 テキストリンクによるFirefoxは、拡張機能を含むディレクトリを見つけてインストールします。 ブラウザを起動すると、ステータスバーの右側に「Hello、World！」というメッセージが表示されます。



.xulファイルにいくつかの変更を加え、Firefoxを再起動すると、すぐに結果を確認できます。



パッケージ作成



拡張機能が機能するようになったので、後で配布およびインストールするためのパッケージを作成できます。



zipアーカイバを使用して、ディレクトリの内容を拡張子（拡張子ディレクトリではなく）で圧縮し、アーカイブ拡張子を.zipから.xpiに変更します。



あなたが 'Extension Builderの誇りに思う所有者なら、彼はあなたのためにすべての汚い仕事をすることができます（ツール-> Extension Developer-> Extension Builder）。 拡張機能があるディレクトリに移動し、[拡張機能を構築]ボタンをクリックします。 この拡張機能には、開発を容易にする多くのツールがあります。



次に、結果の.xpiファイルをサーバーにアップロードし、そのタイプがapplication/x-xpinstall



設定されていることを確認しapplication/x-xpinstall



。 その後、拡張機能をダウンロードしてインストールできます。



More articles:


All Articles