Tweet

Firefoxのアドオンを作成する基本的な流れを紹介します。

• Firefoxのバージョンは 12.0
• Mozillaの公式サイト「XUL School」を参考にしました。

XUL Schoolでダウンロードできる xulschoolhello1.xpi をベースに、「右クリックで表示されるメニューに独自の項目を追加する」というアドオンを実装してみます。xulschoolhello1.xpiを解凍すると(解凍にはunzipを使います)、ディレクトリやファイルが生成されます。以下、編集が必要なファイルについて、説明します。

install.rdf

install.rdfは、アドオンの概要を定義するファイルです。xulschoolhello1.xpiにも含まれているので、それを流用して、必要な箇所だけ変更すると楽です。

<?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>{dc5e1990-2d4c-4463-b12e-459cfa69c503}</em:id> <!-- アドオンに固有のID -->
    <em:name>Right Click Sample</em:name> <!-- アドオンの名前 -->
    <em:description>hoge</em:description>
    <em:version>0.1</em:version>
    <em:creator>sweng.tips</em:creator>
    <em:homepageURL>http://sweng.web.fc2.com/</em:homepageURL>
    <em:type>2</em:type> <!-- 2のままでよい -->

    <!-- Mozilla Firefox -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>4.0</em:minVersion>
        <em:maxVersion>10.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

7行目のem:idの{}内の文字列はuuidgenコマンドの実行結果をコピーしました(固有のIDであればなんでもよいです)。<em:targetApplication>以下は、そのままでよいです。

chrome.manifestは、アドオンを構成する各種のファイルの場所を定義します。これも xulschoolhello1.xpi に含まれているものを流用すると楽です。

content   rightclicksample                content/
skin      rightclicksample  classic/1.0   skin/
locale    rightclicksample  en-US         locale/en-US/

overlay chrome://browser/content/browser.xul  chrome://rightclicksample/content/browserOverlay.xul

• アドオンは、contentと、skinと、localeという3種類のファイルから構成されます。1行目から3行目では、それぞれのファイルの名前空間(今回の例では rightclicksample としています)と、その配置場所を定義しています。
• また、アドオンは、「ウィンドウ」か「オーバーレイ」の、どちらかに分類されます。今回実装するアドオンは、右クリックした際に表示されるメニューなので「オーバーレイ」です。なので、5行目で、「ブラウザにオーバーレイするということ」と、「どういうふうにオーバーレイするかは、chrome://rightclicksample/content/browserOverlay.xul で定義するということ」を定義しています。

content/browserOverlay.xulでは、「右クリックで表示されるメニューに独自の項目を追加する」ということを、定義します。

<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?>
<?xml-stylesheet type="text/css"
  href="chrome://xulschoolhello/skin/browserOverlay.css" ?>

<!DOCTYPE overlay SYSTEM
  "chrome://xulschoolhello/locale/browserOverlay.dtd"> <!-- ここまでは気にしなくてよい -->

<overlay id="rightclicksample-browser-overlay"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <script type="application/x-javascript"
    src="chrome://rightclicksample/content/browserOverlay.js" />

  <popup id="contentAreaContextMenu">
    <menuitem id="sample" label="right click sample"
              insertafter="context-bookmarkpage" oncommand="invokeAlert();"/>
  </popup>
</overlay>

• overlay要素のid属性の値は、てきとうです。名前空間'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'は、overlay要素の中身がXULで記述されていることを示します。
• script要素は、JavaScriptファイルを指定します。ここで指定したJavaScriptファイルに、アドオンの詳細な処理を実装します。
• popup要素のid属性で「右クリックで表示されるメニュー」を指定します。さらにmenuitem要素で詳細を定義します。
  • label属性で、メニューに追加する独自項目の名前(right click sample)を定義
  • insertafter属性で、独自項目を追加する場所を定義
  • oncommand属性で、独自項目を選択した際に実行する JavaScript の関数(invokeAlert)を定義

content/browserOverlay.js では、browserOverlay.xul で定義した invokeAlert という関数を定義します。

function invokeAlert() {
  window.alert("right click sample!");
};

ここでは、window.alertを呼び出すだけの関数としました。

編集したファイル群をパッケージングします。パッケージングにはzipを使います。.xpiという拡張子にすることで、Firefoxへのインストールが簡単になります。

$ zip -r rightclicksample.xpi chrome.manifest content install.rdf locale skin

これで作成したrighcclicksample.xpiを、Firefoxにドラッグ＆ドロップしてください。インストールを要求するダイアログが表示されるはずです。アドオンを有効にするには、Firefoxの再起動が必要です。

再起動後に、Firefox上で右クリックすると、メニューの中に'right click sample'という項目が表示されるはずです。そして、この項目を選択すると、(invokeAlert関数が実行され、)アラートのダイアログが表示されるはずです。

アドオンをアンインストールするには、Firefoxの「ツール」から「アドオン」を選択します。すると「アドオンマネージャ」が開かれるはずです。左側にある「拡張機能」を選択すれば、インストールしているアドオンを一覧表示できます。不要なアドオンを選択して、削除してください。アンインストールを有効にするには再起動が必要です。

お問い合わせは sweng.tips@gmail.com まで。