Firefox 拡張機能の開発の準備

最終更新日: 2008年 2月 21日
HomeBack

  1. 開発用プロファイルの作成

  2. 開発する拡張機能のディレクトリ・ファイルの作成

  3. 拡張機能ファイルの文字コード

  4. 開発用拡張機能をfirefoxに認識させる

  1. install.rdf

  2. chrome.manifest

  3. chrome/contents/overlay.xul

  4. chrome/contents/overlay.js

  5. locale/ja-JP/contents.rdf

  6. locale/ja-JP/overlay.dtd

開発用プロファイルの作成

拡張機能を開発する場合、開発に役立つfirebug, Extension Developer等の拡張機能をインストールした した方が便利ですが、通常のブラウジングで使用するときとインストールする拡張機能を 分けた方がいろいろと便利です。そのため、通常使用する"default"以外に、開発用プロファイルを 作成します。

開発する拡張機能のディレクトリ・ファイルの作成

適当な場所に拡張機能用ディレクトリを作成します。基本的なディレクトリ構成は以下のようにします。 

[拡張機能用ディレクトリ] --- install.rdf
                          |
                          |- chrome.manifest
                          |
                          -- [chrome] --- [content] --- overlay.xul
                                       |             |
                                       |             |- overlay.js
                                       |             |
                                       |             ・・・
                                       |
                                       -- [locale]  --- [ja-JP] --- contents.rdf
                                                     |           |
                                                     |           -- overlay.dtd
                                                     |
                                                     |- [en-US] ---
                                                     |
                                                     ・・・

拡張機能のファイルは、サンプルを参照して install.rdf、chrome.manifest 等のファイルを作成します。

拡張機能ファイルの文字コード

拡張機能で使用するファイルの文字コードは基本的にUTF-8にします。 ただし、Windows版でUTF-8でBOMを付けた場合、chrome.manifestでエラーが発生しますので、chrome.manifestのみBOMを付けずに保存する必要があります。 その他のファイルはBOMを付けても問題ないようです。

開発用拡張機能をfirefoxに認識させる

拡張機能で使用するファイルは基本的に文字コードをUTF-8にします。シフトJIS等にしていると日本語関係でエラーが発生します。

install.rdf

拡張機能の場合、typeが 2 targetApplicationのidが {ec8030f7-c20a-464f-9b0e-13a3a9e97384} の固定になります。

参考 

<?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>extest@aaa.net</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type>
   
    <!-- Target Application this extension can install into, 
         with minimum and maximum supported versions. --> 
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>2.0.0.0</em:minVersion>
        <em:maxVersion>2.0.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>
   
    <!-- Front End MetaData -->
    <em:name>Extension Name!</em:name>
    <em:description>Extension description</em:description>
    <em:creator>Your Name Here</em:creator>
    <em:homepageURL>http://www.foo.com/</em:homepageURL>
  </Description>      
</RDF>

chrome.manifest

content     extest    chrome/content/
overlay chrome://browser/content/browser.xul chrome://extest/content/overlay.xul
locale extest ja-JP chrome/locale/ja-JP/

注. Windowsの場合、このファイルの文字コードがBOM付きUTF-8であると拡張機能が認識されませんので、BOM無しUTF-8にします。

参考：拡張機能ファイルの文字コード

chrome/contents/overlay.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<!DOCTYPE overlay SYSTEM "chrome://extest/locale/overlay.dtd">

<overlay id="extest" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://extest/content/overlay.js" />

<menubar id="main-menubar">
  <menu id="extest-menu" label="&extest.overlay.title;">
    <menupopup id="CpDev-popup-menu">
      <menuitem id="extest_Default" label="&extest.overlay.default;"
                                                      oncommand="setCpdevDefault();" />
      <menu id="menu_DoCoMo" label="&extest.overlay.docomo;">
         <menupopup id="menu_DoCoMo">
           <menuitem id="DoCoMo_P900i" label="P900i" oncommand="dispCellphoneName('P900i');" />
           <menuitem id="DoCoMo_SH901" label="SH901" oncommand="dispCellphoneName('SH901');" />
           <menuitem id="DoCoMo_SH701" label="SH701" oncommand="dispCellphoneName('SH701');" />
         </menupopup>
      </menu>
      <menu id="menu_TEST" label="TEST">
         <menupopup id="menu_TEST">
           <menuitem id="test_1" label="extension dir path"
                                     oncommand="alert(getExtensionDir('extest@aaa.net'));"/>
         </menupopup>
      </menu>
    </menupopup>
  </menu>
</menubar>

<statusbar id="status-bar">
  <statusbarpanel id="statusbar-extest-name" label="default Firefox"/>
 </statusbar>
</overlay>

chrome/contents/overlay.js

function dispCellphoneName(cpname){
	var status = document.getElementById("statusbar-extest-name");
	status.label = "端末: " + cpname;
}

function setCpdevDefault() {
	var status = document.getElementById("statusbar-extest-name");
	status.label = "default Firefox";
}

//
// return the full path of extension directory
//
function getExtensionDir(id) {
	var ext = Components.classes["@mozilla.org/extensions/manager;1"]
                    .getService(Components.interfaces.nsIExtensionManager)
                    .getInstallLocation(id)
                    .getItemLocation(id); 
	// ext は nsIFile のインスタンス、ext.path はディレクトリ文字列を保持します
	return ext.path;
}

locale/ja-JP/contents.rdf

<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                        xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
	<RDF:Seq RDF:about="urn:mozilla:locale:root">
		<RDF:li RDF:resource="urn:mozilla:locale:ja-JP" />
	</RDF:Seq>
	<RDF:Description RDF:about="urn:mozilla:locale:ja-JP">
		<chrome:packages>
			<RDF:Seq RDF:about="urn:mozilla:locale:ja-JP:packages">
				<RDF:li RDF:resource="urn:mozilla:locale:ja-JP:extest"/>
			</RDF:Seq>
		</chrome:packages>
	</RDF:Description>
</RDF:RDF>

locale/ja-JP/overlay.dtd

<!ENTITY extest.overlay.title "Extest Title">
<!ENTITY extest.overlay.default "デフォルト">
<!ENTITY extest.overlay.docomo "DoCoMo">

HomeBack