今回は、はじめてFirefoxのアドオンを作ったので、調べたことをメモしておきます。難しいと思っていたのですが、簡単なものなら直に作れることを知りました(*´艸`)
※ 動作対象はFirefox <= 3.6 になります。
何を作るか
ブログを書く時に使うような、「開いているページのタイトルとURLを一回の操作で、マークアップ形式でクリップボードにコピーする機能」を作成します。機能を使う方法は、「Shift+u」か、「右クリックメニューから選択」の2種類とします。
作り方
作り方を以下のステップに分けて説明します。
- 「copytitleurl」フォルダ作成
- 「install.rdf」作成
- 「chrome.manifest」作成
- 「chrome」フォルダ、「content」フォルダ作成
- 「copytitleurl.js」作成
- 「copytitleurl.xul」作成
- 「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行目の
7行目から10行目はアドオンの説明です。名称、バージョン、説明、作者が記述されています。
11行目の
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); }
ロジックとしては、次のことを行なっています。
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」という関数を実行することを記述しています。
<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.rdf、chrome.manifest, chromeフォルダをまとめてzip形式で圧縮する
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」作成の圧縮手順に誤りがあったので修正しました
- id:yamaryoxxxx さん、id:ihag さんご指摘ありがとうございました!
- 文言を統一しました
追記(2010/10/24)
Firefox 3.6 でも動くよう修正しました。
- contents.rdf で定義していた内容をchrome.manifest で定義するようにしました
- id:koseki2 さんに、ブラウザのコピー機能を拡張する。 - こせきの技術日記、ブコメにてご指摘いただきました。記事内容が古くなってきたと感じつつも修正できていなかったので、具体的にどこを修正すればよいのかご指摘いただきとても助かりました。ありがとうございました!