10分で作るFirefoxアドオン

今回は、はじめてFirefoxのアドオンを作ったので、調べたことをメモしておきます。難しいと思っていたのですが、簡単なものなら直に作れることを知りました(*´艸`)

※ 動作対象はFirefox <= 3.6 になります。

何を作るか

ブログを書く時に使うような、「開いているページのタイトルとURLを一回の操作で、マークアップ形式でクリップボードにコピーする機能」を作成します。機能を使う方法は、「Shift+u」か、「右クリックメニューから選択」の2種類とします。

作り方

作り方を以下のステップに分けて説明します。

  1. 「copytitleurl」フォルダ作成
  2. 「install.rdf」作成
  3. chrome.manifest」作成
  4. chrome」フォルダ、「content」フォルダ作成
  5. 「copytitleurl.js」作成
  6. 「copytitleurl.xul」作成
  7. 「copytitleurl.xpi」作成

面倒そうに感じますが、10分ほどでできます。

1.copytitleurl」フォルダ作成

まずは、今回作成するアドオンに関係するファイルを格納するフォルダを作ります。名前は、「copytitleurl」とします。

2.「install.rdf」作成

次に、1で作成したフォルダの中に「install.rdf」というファイルを作ります。中身は次の様になります。

<?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>{04d2bb32-d7c0-4ee8-a5b9-f70798dda4f0}</em:id>
    <em:name>Copy Title URL</em:name>
    <em:version>1.0</em:version>
    <em:description>copy title and url in one key</em:description>
    <em:creator>LukeSilvia</em:creator>
    <em:type>2</em:type>
    <em:file>
      <Description about="urn:mozilla:extension:file:copytitleurl.jar">
        <em:package>content/</em:package>
      </Description>
    </em:file>
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.0</em:minVersion>
        <em:maxVersion>3.6.*</em:maxVersion>
      </Description>
    </em:targetApplication>
   </Description>
  </RDF>


このファイルについて説明します。このファイルには、機能の概要や、対応するFirefoxのバージョンなどの基本データがXML形式で記述してあります。
最初の5行はこのファイルを書くときの決まり文句です。
6行目のタグは他のアドオンと区別するためのIDを付けています。GUID(Global Unique Identity:同じ値が2つ無いユニークな値)に従ったランダムな数を付けて下さい。
7行目から10行目はアドオンの説明です。名称、バージョン、説明、作者が記述されています。
11行目のタグの値の2はこれがアドオンであることを示します。アドオンを作成する際には、ここの値は2となるということです。
13行目、14行目にはアドオンの核となるファイルの名前を指定します。後ほどこのファイルを作成します。
18行目、19行目も決まり文句のようなものです。
20行目、21行目には対応するFirefoxのバージョンを指定します。もし、4.0に対応させるには、maxversionを「3.6.*」から「4.0.*」にします。maxversionの値が、使っているFirefox のバージョンより低い場合は、たとえ機能的には問題なく動作するとしてもインストールすることができません。
なお、今回は使っていませんが、などのタグもあり、アドオンのアイコンを含めたりもできます。

3.「chrome.manifest」作成

次に、1で作成したフォルダの中に「chrome.manifest」というファイルを作ります。中身は次の様になります。

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

これは、Chromeマニュフェストと呼ばれるファイルで、Firefox拡張機能のパッケージを登録するために必要になります。


4.「chrome」フォルダ、「content」フォルダ作成

次に、「copytitleurl」フォルダ内に「chrome」フォルダを作成し、その中に、「content」フォルダを作成します。現時点でのファイル構成は以下のようになります。

copytitleurl/

5.「copytitleurl.js」作成

次に、4で作った「content」フォルダの中に「copytitleurl.js」というファイルを作成します。アドオンは、簡単に言えば、XML(厳密にはXULファイル)でユーザインタフェースを作り、Javascriptでロジックを書きます。そのロジックの部分を担当するのががこのファイルです。
中身は以下のようになります。

function copytitleurl(){
    var w = window._content;
    var d = w.document;
    var txt = '<a href="' + d.location.href + '">' + d.title + '</a>';
    const CLIPBOARD = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
    CLIPBOARD.copyString(txt);
}

ロジックとしては、次のことを行なっています。

  1. 現在のページのwindowオブジェクトをとってきて、そこからdocumentオブジェクトを抽出
  2. documentオブジェクトから現在のページのタイトル、URLを引き、コピーしたいマークアップの形式に整形
  3. 整形したものをクリップボードに格納する
6.「copytitleurl.xul」作成

「content」フォルダの中に「copytitleurl.xul」というファイルを作成します。5では、アドオンのロジック部分を作成しましたが、ここでは「XUL(ズール)」ファイルを用いてFirefoxインターフェイスを定義します。
中身は以下のようになります。

<?xml version="1.0"?>

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

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

<keyset id="mainKeyset">
  <key id="copytitleurl" modifiers="shift" key="U" oncommand="copytitleurl();"/>
</keyset>

<popup id="contentAreaContextMenu">
  <menuitem id="copytitleurl" label="タイトルとURLをコピー" accesskey="U"
  insertafter="context-bookmarkpage" oncommand="copytitleurl();"/>
</popup>

</overlay>


6行目ではロジックとして使うJavascriptファイルとを宣言します。8から10行目ではショートカットキーを、12から14行目ではメニューを定義しています。
ショートカットキーの定義部分では[shift]キーと[u]キーを押すことで「copytitleurl」という関数を実行することを、メニューの部分では、右クリックメニューに「タイトルとURLをコピー」というメニュー項目を追加し、それが選択されたらやはり「copytitleurl」という関数を実行することを記述しています。
タグ中のinsertafter="context-bookmarkpage"は、右クリックメニューの「このページをブックマーク」ラベルのすぐ下にオプションを置く事を表しています。
尚、「このページをブックマーク」のメニューは、「C:\Program Files\Mozilla Firefox\chrome」フォルダ内の「browser.jar」を展開したフォルダの中の「browser.xul」ファイルでとして定義されています。そのidは"context-bookmarkpage"として登録されています。このファイルを見るとインターフェースの定義の仕方の参考になります。例えば、の部分の代わりに以下のように記述すると、右クリックメニューでなく、ツール(T)メニューに機能をつけることができます。

<menupopup id="menu_ToolsPopup">
  <menuitem id="copytitleurl" label="タイトルとURLをコピー" key="copytitleurl" oncommand="copytitleurl();"/>
</menupopup>


これで元になるファイルは完成。構成は以下のようになっているはずです。

copytitleurl/

7.「copytitleurl.xpi」作成

最後に今まで作成したファイルをパッケージとしてまとめます。

  • 1. contentフォルダをzip形式で圧縮する。圧縮後、元のcontentフォルダを削除する
  • 2. できたcontent.zipをcopytitleurl.jarに変更する
  • 3. install.rdfchrome.manifest, chromeフォルダをまとめてzip形式で圧縮する
    • Windows の場合は、install.rdfchrome.manifest, chromeフォルダの3つを選択して右クリックをし、「送る」→「圧縮(zip形式)フォルダ」を選びます
    • *nix 環境なら以下のようにします
cd /path/to/copytitleurl/ 
zip -r copytitleurl.xpi chrome install.rdf chrome.manifest
  • 4. できたファイルをcopytitleurl.xpiに変更する

完成。後は、できたファイルをFirefoxにドラッグ&ドロップしてあげればインストールができます。ちなみに、この操作で分かるように、xpiファイルは、実質zipファイルなので、zipとして展開してやれば、元になっているファイルを見ることができ、ソースを読んだりすることができます。

追記(2009/7/4)

記事の一部を修正しました。

  • 7.「copytitleurl.xpi」作成の圧縮手順に誤りがあったので修正しました
  • 文言を統一しました
追記(2010/10/24)

Firefox 3.6 でも動くよう修正しました。