Hello World

せりか式 - FireFox拡張機能 - 拡張機能の例 - Hello World

定番のHello Worldです． 右クリックメニューにHello Worldを追加して，選択するとダイアログボックスを表示します．

ファイルの構成

helloworld.xpiを一度ダウンロードしてからアドオンのリストにドロップしてください．

helloworld
[helloworld.xpi]
 + install.rdf
 + chrome.manifest
 + [chrome]
    + [content]
    |  - helloworld.xul
    |  - helloworld.js
    |  - about.xul
    + [locale]
       + [en-US]
       |  - helloworld.dtd
       + [ja-JP]
          - helloworld.dtd

基本情報

install.rdf

インストールのためのファイルです．

各タグの詳細はinstall.rdfの詳細を参考にしてください．

install.rdf
<?xml version="1.0"?>
<RDF:RDF xmlns:em="http://www.mozilla.org/2004/em-rdf#"
         xmlns:NC="http://home.netscape.com/NC-rdf#"
         xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<RDF:Description RDF:about="urn:mozilla:install-manifest">
	<em:id>helloworld@serikashiki.kis-lab.com</em:id>
	<em:type>2</em:type>
	<em:name>helloworld</em:name>
	<em:version>0.1.0.0</em:version>
	<em:targetApplication>
		<RDF:Description
			em:id="{ec8030f7-c20a-464f-9b0e-13a3a9e97384}"
			em:minVersion="2.0.0.0"
			em:maxVersion="2.*" />
	</em:targetApplication>

	<em:description>Show HelloWorld Dialog</em:description>
	<em:creator>Serika</em:creator>
	<em:homepageURL>http://www.kis-lab.com/serikashiki/</em:homepageURL>
</RDF:Description>
</RDF:RDF>
chrome.manifest

chromeの登録ファイルです．

各タグのエントリはchrome.manifestの詳細を参考にしてください．

chrome.manifest
content	helloworld	chrome/content/
locale	helloworld	en-US	chrome/locale/en-US/
locale	helloworld	ja-JP	chrome/locale/ja-JP/

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

内容

helloworld.xul

ここでは，右クリックメニューにダイアログを表示するためのメニューを追加します．

helloworld.xul
01: <?xml version="1.0"?>
02: <!DOCTYPE overlay SYSTEM "chrome://helloworld/locale/helloworld.dtd">
03: <overlay id="helloworld"
04:      xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
05:      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
06: 
07: 	<script type="application/x-javascript" src="helloworld.js"></script>
08: 
09: 	<popup id="contentAreaContextMenu">
10: 		<menuseparator id="helloworld-sep" hidden="true" />
11: 		<menuitem id="helloworld-about"
12: 				label="&helloworldMenu.label;"
13: 				oncommand="openHelloworldDialog()" />
14: 		<menuseparator id="helloworld-sep-end" hidden="true" />
15: 	</popup>
16: 
17: </overlay>

簡単な説明はこちら

02: ローカライズされたdtdファイルを読み込み
03: idをhelloworldとしたオーバーレイを定義
07: メニューを選択したときに実行するためのJavaScriptのロード
    ここでは，ファイルを指定して読み込ませていますが，この中に埋め込んでしまっても問題はありません．
09: idがcontentAreaContextMenuというポップアップを指定
10: idがhelloworld-sepというセパレータを追加．ただし，表示はしない（hidden="true"）．
11: idがhelloworld-aboutというメニュー項目を追加．
12: ラベルはDTDで定義されているhelloworldMenu.labelという項目
13: 選択されたとき，openHelloworldDialog()を呼び出す
14: idがhelloworld-sep-endというセパレータを追加．ただし，表示はしない（hidden="true"）．
helloworld.js

メニューが選択されたときの関数を定義しています．
ここでは単純に指定されたURLを開くようにしています．

helloworld.js
function openHelloworldDialog() {
	window.open("chrome://helloworld/content/about.xul", "About", "chrome,dialog,centerscreen");
}
about.xul

ここでは，helloworldダイアログを定義しています．

もともとaboutダイアログを作るつもりだったので，aboutって名前がちらほらと残っています(汗)

about.xul
01: <?xml version="1.0" encoding="UTF-8"?>
02: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
03: <dialog id="genericAbout"
04: 	title="Hello world"
05: 	chromehidden="menubar toolbar location directories status extrachrome"
06: 	buttons="accept"
07: 	xmlns:em="http://www.mozilla.org/2004/em-rdf#"
08: 	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
09: <vbox id="clientBox">
10: 	<description id="Description">Hello World!</description>
11: 	<separator class="thin"/>
12: 	<hbox>
13: 		<label id="Creater">serika</label>
14: 		<spacer flex="1"/>
15: 		<label id="Homepage">http://www.kis-lab.com/serikashiki/</label>
16: 	</hbox>
17: </vbox>
18: </dialog>

簡単な説明はこちら

04: 作成するダイアログのタイトルを指定
05: 表示しない項目を指定
06: 表示するボタンを指定
09: idがclientBoxという縦方向の箱を用意．
    タグが閉じられるまでの内容が縦方向に詰めて入れられます．
10: descriptionタグ（勝手に命名）を定義し，Hello World!という文字を表示
11: 細い線（thin）のセパレータを表示
12: 横方向の箱を用意．
    タグが閉じられるまでの内容が横方向に詰めて入れられます．
13: idがCreaterのラベルを作成．
14: 空白を定義．
    flex=1にしておくと，空白の大きさがフレキシブルに決められます．
    すべての要素が均等になるように詰め込まれます．
15: idがHomepageのラベルを作成

スタイルファイルを作っていないのでセパレータなどは実際には表示されません(汗)

ロケール

en-US/helloworld.dtd

言語設定がen-USの場合のラベルなどを定義します

helloworld.dtd
<!ENTITY helloworld "helloworld">
<!ENTITY helloworld.version "1.0">

<!ENTITY helloworldMenu.label "about helloworld">
ja-JP/helloworld.dtd

言語設定がja-JPの場合のラベルなどを定義します

helloworld.dtd
<!ENTITY helloworld "helloworld">
<!ENTITY helloworld.version "1.0">

<!ENTITY helloworldMenu.label "はろーわーるど">
トップへ