2012年04月09日

Firefoxアドオンを作る。その2

前回はFirefox拡張機能アドオンの作り方を紹介した。

今回は理解をもう少しだけ深めるために、別のアドオンを作ってみよう。

今回作るのは、「入力文字列内にURLがあれば、それに自動的にリンク(aタグ)を貼った文字列を出力するアドオン」である。

このアドオンは、オートリンク機能を搭載していないブログシステムを使っている人には少しだけ役に立つかも知れない。

アドオンIDは適当に autolink@yourdomain.com とした。

今回開発に使った環境は、 Firefox 11.0 と Windows7 である。

というわけで、まずはファイル構成から。

autolink@yourdomain.com/
  index.rdf
  chrome.manifest
  chrome/
    content/
      autolink.xul
      firefoxOverlay.xul
    locale/
      en-US/
        autolink.dtd
      ja-JP/
        autolink.dtd
    skin/


各ファイルの中身は以下の通りだ。

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">
<em:id>autolink@yourdomain.com</em:id>
<em:name>autolink Extension</em:name>
<em:version>1.0</em:version>
<em:creator>Your Name</em:creator>
<em:description>Autolink Extension Add-on.</em:description>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>3.0</em:minVersion>
<em:maxVersion>11.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>



chrome.manifest
content autolink chrome/content/
locale autolink en-US chrome/locale/en-US/
locale autolink ja-JP chrome/locale/ja-JP/
skin autolink classic/1.0 chrome/skin/
overlay chrome://browser/content/browser.xul chrome://autolink/content/firefoxOverlay.xul



chrome/content/firefoxOverlay.xul
<?xml version="1.0"?>

<!DOCTYPE overlay SYSTEM "chrome://autolink/locale/autolink.dtd">
<overlay id="autolinkOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<menupopup id="viewSidebarMenu">
<menuitem key="key_openAutolink" observes="viewAutolink" />
</menupopup>

<keyset id="mainKeyset">
<key id="key_openAutolink" command="viewAutolink"
key="&openAutolink.commandkey;"
modifiers="&openAutolink.modifierskey;" />
</keyset>

<broadcasterset id="mainBroadcasterSet">
<broadcaster id="viewAutolink"
label="&autolink.title;"
autoCheck="false"
type="checkbox"
group="sidebar"
sidebarurl="chrome://autolink/content/autolink.xul"
sidebartitle="&autolink.title;"
oncommand="toggleSidebar('viewAutolink');" />
</broadcasterset>
</overlay>



chrome/content/autolink.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" ?>
<!-- ローカリゼーション -->
<!DOCTYPE page SYSTEM "chrome://autolink/locale/autolink.dtd">

<page id="sbSidebarExample"
title="&autolink.title;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox flex="1">
<!-- 入力用テキストボックス -->
<textbox id="t1" multiline="true" rows="20"/>
<!-- 出力用テキストボックス(Read Only) -->
<textbox id="t2" multiline="true" readonly="true" flex="1"/>
<script type="application/x-javascript"><![CDATA[
/*
入力用テキストボックスからカーソルが外れた時(onblur)にオートリンクを貼った文字列を表示するイベント処理を追加
*/
var t1 = document.getElementById("t1");
t1.addEventListener(
"blur",
function(){
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
t2.value = t1.value.replace(
/(http:\/\/[\x21-\x7e]+)/gi,
"<a href=\"$1\" target=\"_blank\">$1</a>"
);
}
);

/*
出力用テキストボックスにフォーカスがセットされた時(onfocus)に文字列が全選択されるイベント処理を追加
*/
var t2 = document.getElementById("t2");
t2.addEventListener(
"focus",
function(){
this.select();
}
);
]]></script>

</vbox>
</page>


入力用テキストエリアに textarea ではなく、textbox を使っているところがポイントだ。XULでは両方とも textbox で表現できるのである。詳しくはこちらを参照のこと。


chrome/locale/en-US/autolink.dtd
<!ENTITY autolink.title "Autolinker">
<!ENTITY openAutolink.commandkey "E">
<!ENTITY openAutolink.modifierskey "shift accel">


chrome/locale/ja-JP/autolink.dtd
<!ENTITY autolink.title "オートリンカー">
<!ENTITY openAutolink.commandkey "E">
<!ENTITY openAutolink.modifierskey "shift accel">



以上である。

今回はスタイルシート(skin/)は省略した。

動作テストや配布パッケージの作り方についても、前回のエントリを見ていただけると分かると思うので今回は省略する。


参考になるサイト


XUL - MDN
こちらはXULで使えるコントロールの一覧などの情報である。今回使ったtextboxなどの他にも多くの便利なコントロールがあるのでこちらを見て勉強すると良いだろう。



Firefox 3 Hacks ―Mozillaテクノロジ徹底活用テクニック
江村 秀之 池田 譲治 下田 洋志 松澤 太郎 dynamis
オライリージャパン
売り上げランキング: 395037


PR:お買い物はAmazonで
posted by 寄り道退屈男 at 08:42 | Comment(0) | TrackBack(0) | Firefox

2012年04月07日

Firefoxアドオンを作る

アドオンには以下の3つの種類がある。

 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テクノロジ徹底活用テクニック
江村 秀之 池田 譲治 下田 洋志 松澤 太郎 dynamis
オライリージャパン
売り上げランキング: 395037


PR:お買い物はAmazonで
posted by 寄り道退屈男 at 19:29 | Comment(1) | TrackBack(0) | Firefox

2011年11月29日

Firefoxを別セッションで複数起動する方法。

開発者なら手放せないインターネットブラウザのひとつとなっているFirefox

仕事場ではひとつのFirefoxを複数起動して、一つは仕事用、一つはプライベート用などと、ブラウザのクッキー・セッション管理を別々にしたいこともあるだろう。

だが、バージョンの違うFirefoxを複数インストールするのもスマートではない。IEやChromeなどの別ブラウザを使いわけるという手もあるが、それでもブラウザの種類にも限りがある。

そういう時には、Firefoxのユーザプロファイルを切り分けて、複数起動させるという手が最もスマートだ。プロファイルを切り分けることで、一つのバージョンのFirefoxを別々のアプリのように使い分けることができるのである。

手順は以下の通りだ。

1. 現在起動しているFirefoxを全て終了させる

2. プロファイルマネージャを起動
コマンドプロンプトで以下のコマンドを入力し、プロファイルマネージャを起動
"C:\Program Files\Mozilla Firefox\firefox.exe" --profilemanager


3. 新しいプロファイルを作成
「ユーザプロファイルの選択」という小窓が開くので、「新しいプロファイルを作成」というボタンを押し、プロファイル作成ウィザードで適当なプロファイル名を指定してプロファイルを作成する。
今回は仮に hoge としてみる。

4. プロファイルを指定してFirefox起動
先ほどのプロファイルマネージャ小窓で適当なユーザプロファイル(今回は hoge)を指定し、「Firefoxを起動」ボタンを押してFirefoxを起動する。

これで 2. のコマンドを打てば、毎回プロファイル選択画面が表れ、複数起動が可能となる。

5. ショートカットから起動
プロファイルマネージャからの起動がめんどくさい場合は、firefox.exeのショートカットを作り、そのショートカットのプロパティ画面で、「ショートカット」タブの「リンク先」というテキストボックスに、

"C:\Program Files\Mozilla Firefox\firefox.exe" -P hoge -no-remote


と入力しておけば、次回からそのショートカットからFirefoxを起動することで、hogeなユーザプロファイルでFirefoxを起動出来る。

このように、1.から5.の手順で複数のプロファイルを作成することで、ひとつバージョンのFirefoxを複数起動することができるようになる。


■参考にさせていただいたページ
別々にカスタマイズされたFirefoxを同時起動させる方法 - 気ままな宇宙人


posted by 寄り道退屈男 at 16:15 | Comment(2) | TrackBack(0) | Firefox