1. 拡張機能
2. プラグイン
3. テーマ
今回はアドオンとして最も利用頻度が高い 1. の「拡張機能」を作ってみる。
実際に作ってみる
プログラミングは「習うより慣れよ」である。
というわけで、「サイドバー簡易ブラウザ」アドオンなんてのをサンプルとして作ってみたいと思う。このアドオンは、読んで字の如く、サイドバーに簡易ブラウザを表示する拡張機能アドオンである。
アドオン名は、 sidebarexample ということで話を進める。
まずはざっとフォルダ構成から見て欲しい。説明は後ほど。
index.rdf
chrome.manifest
chrome/
content/
firefoxOverlay.xul
sidebarexample.xul
locale/
en-US/
sidebarexample.dtd
ja-JP/
sidebarexample.dtd
skin/
sidebarexample.css
これと同じフォルダ構成を構築する。各ファイルの中身はとりあえず今は空のままで良い。
上のフォルダ・ファイル構成ができたら、今度はファイルの中身を記述していく。
index.rdf
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- 適当なアドオンID(メアドじゃないよ！) -->
<em:id>sidebarexample@yourdomain.com</em:id>
<!-- アドオン名 -->
<em:name>sidebarexample Extension</em:name>
<!-- バージョン -->
<em:version>1.0</em:version>
<!-- 作者 -->
<em:creator>Your Name</em:creator>
<!-- アドオンの説明 -->
<em:description>Example extension for creation and registration of a sidebar.</em:description>
<!-- このアドオンが対象とするアプリ -->
<em:targetApplication>
<Description>
<!-- firefoxのアプリID -->
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<!-- firefoxの対応バージョン -->
<em:minVersion>3.0</em:minVersion>
<em:maxVersion>11.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
index.rdfはアドオンの基本情報である。
firefox用アドオンを作る場合は、上のように {ec8030f7-c20a-464f-9b0e-13a3a9e97384} 固定でOK。
ただしfirefoxの対応バージョンの設定には気をつけるべし。ユーザが利用するFirefoxバージョンが minVersion と maxVersion の間になければ、作ったアドオンが有効にならないからである。
chrome.manifest
content sidebarexample chrome/content/
locale sidebarexample en-US chrome/locale/en-US/
locale sidebarexample ja-JP chrome/locale/ja-JP/
skin sidebarexample classic/1.0 chrome/skin/
overlay chrome://browser/content/browser.xul chrome://sidebarexample/content/firefoxOverlay.xul
chrome.manifestはリソースの構成である。
contentやlocale、skin、overlayの在り処が記述されている。
contentはxul(デザイン)ファイルなどの格納場所、localeはロケール別のメッセージリソースdtdの格納場所、skinはスタイルシートcssの格納場所である。overlay(オーバーレイ)はこの後説明する。
chrome/content/firefoxOverlay.xul
<?xml version="1.0"?>
<!DOCTYPE overlay SYSTEM "chrome://sidebarexample/locale/sidebarexample.dtd">
<overlay id="sidebarExampleOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menupopup id="viewSidebarMenu">
<menuitem key="key_openSidebarExample" observes="viewSidebarExample" />
</menupopup>
<keyset id="mainKeyset">
<key id="key_openSidebarExample"
command="viewSidebarExample"
key="&openSidebarExample.commandkey;"
modifiers="&openSidebarExample.modifierskey;" />
</keyset>
<broadcasterset id="mainBroadcasterSet">
<broadcaster id="viewSidebarExample"
label="&sidebarexample.title;"
autoCheck="false"
type="checkbox"
group="sidebar"
sidebarurl="chrome://sidebarexample/content/sidebarexample.xul"
sidebartitle="&sidebarexample.title;"
oncommand="toggleSidebar('viewSidebarExample');" />
</broadcasterset>
</overlay>
firefoxOverlay.xulは、Firefoxの表示メニューのサイドバーの中に今回作るアドオンを表示させるためのデザイン定義である。このように元アプリ(Firefox)の拡張ポイントに機能を拡張することを overlay(オーバーレイ)という。
chrome/content/sidebarexample.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css" ?>
<?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?>
<!-- アドオン独自css -->
<?xml-stylesheet href="chrome://sidebarexample/skin/sidebarexample.css" type="text/css" ?>
<!-- ローカリゼーション -->
<!DOCTYPE page SYSTEM "chrome://sidebarexample/locale/sidebarexample.dtd">
<page id="sbSidebarExample"
title="&sidebarexample.title;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<vbox flex="1">
<!-- "URLを入力"ラベル -->
<label id="label1" value="&sidebarexample.inputurl;" />
<!-- "URLを入力"テキストボックス -->
<textbox id="textbox1" value="&sidebarexample.defaulturl;" />
<!-- ロードボタン -->
<button label="&sidebarexample.load;"
oncommand="loadURL();"
context="button-context"/>
<!-- ブラウザコンポーネント -->
<browser id="browser1"
src="&sidebarexample.defaulturl;"
flex="1"
type="content-primary" />
<script type="application/x-javascript"><![CDATA[
function loadURL() {
var b1 = document.getElementById("browser1");
var url = document.getElementById("textbox1").value;
b1.loadURI(url)
}
]]></script>
</vbox>
</page>
こちらのxulはアドオン自身のデザイン定義である。HTMLやJavascriptで表現している。
chrome/locale/en-US/sidebarexample.dtd
<!ENTITY sidebarexample.title "Sidebar Example">
<!ENTITY sidebarexample.load "Load">
<!ENTITY sidebarexample.defaulturl "http://sunabako.sblo.jp/">
<!ENTITY sidebarexample.inputurl "Input URL">
<!ENTITY openSidebarExample.commandkey "E">
<!ENTITY openSidebarExample.modifierskey "shift accel">
chrome/locale/ja-JP/sidebarexample.dtd
<!ENTITY sidebarexample.title "サイドバー簡易ブラウザ">
<!ENTITY sidebarexample.load "ロード">
<!ENTITY sidebarexample.defaulturl "http://sunabako.sblo.jp/">
<!ENTITY sidebarexample.inputurl "URLを入力">
<!ENTITY openSidebarExample.commandkey "E">
<!ENTITY openSidebarExample.modifierskey "shift accel">
これらのdtdファイルは、ローカリゼーション(多言語対応)のためのメッセージリソースである。
例えば、sidebarexample.xulの中の &sidebarexample.inputurl; のような記述は、このdtdファイル内の sidebarexample.inputurl と紐付けされて文言が表示される。言うまでもないが、Firefoxユーザのロケール別に表示文言が変わる。日本語環境なら ja-JP/sidebarexample.dtd が、英語環境なら en-US/sidebarexample.dtd の文言が参照されるのだ。
chrome/skin/sidebarexample.css
#label1 {
color:blue;
}こちらは見たまんまスタイルシート。sidebarexample.xulのHTMLに適用されている。
テスト
万が一設定を壊してしまっても他のプロファイルに影響を及ぼさないためにも念のためfirefoxの開発用プロファイル(例えば dev という名前で)を作っておこう。
では先ほど作ったアドオンをテストしてみよう。今作った開発用プロファイル(dev)のプロファイルフォルダ(Win7の場合の例：C:/Users/hogeUser/AppData/Roaming/Mozilla/Firefox/Profiles/*******.dev/)の直下に extensions フォルダを新規作成し、そこにindex.rdfで設定したID(この場合、sidebarexample@yourdomain.com)と同じ名前のフォルダを作成し、このフォルダの中に index.rdf, chrome.manifest, chrome などをざっくりコピーする。
この状態でfirefoxを再起動すれば、このアドオンをインストールするかどうかの確認画面が出るはずだ。ここでインストールを了承し、もう一度再起動すればアドオンがインストールされているはずだ。
メニューバーの「表示」→「サイドバー」の中に、「サイドバー簡易ブラウザ」(ロケールが英語の場合は「Sidebar Example」)というのが表示されていれば成功である。
配布パッケージxpiを作る
作ったアドオンを配布する際は、xpiファイルというパッケージに固めて配布する。xpiといってもただのzip圧縮されたファイル群だ。
index.rdf, chrome.manifest, chrome/ をガツッと一まとめにzip圧縮し、拡張子を .xpi にすればOKである。
できたxpiファイルをfirefoxにドラッグ・アンド・ドロップすれば、インストールが始まるはずだ。もしもxpiが正しく作られていなければ、この時点で「壊れています」のメッセージが表示される。
以上がfirefoxアドオン開発の基本である。
次回はさらに理解を深めるため、もうひとつ別のアドオンを作ってみようと思う。
参考にさせていただいたサイト
Firefox 11 for developers - MDN
アドオンを開発する - MDN
Firefox 3 Hacks ―Mozillaテクノロジ徹底活用テクニック
posted with amazlet at 12.04.07
江村 秀之 池田 譲治 下田 洋志 松澤 太郎 dynamis
オライリージャパン
売り上げランキング: 395037
オライリージャパン
売り上げランキング: 395037
PR:お買い物はAmazonで
タグ：firefoxアドオン
【Firefoxの最新記事】
