Addon Builder を使って Firefox アドオンを作ってみる

Mozilla が提供する Add-on Builder を使って Firefox アドオンを作ってみた。目標とするのは、タブで開いているページのタイトルとURLを手軽に Twitter へツイートできるアドオン。完成したアドオンのソースコードはBuilder上で見ることができる。作ったアドオンは simpletweet という名前をつけて公開した

Add-on Builder は Web ブラウザ単独で Firefox アドオンを作れてしまう Web アプリケーション。オンラインのテキストエディター、ファイルのバージョン管理、作成中のAdd-onの自動再読み込みといった機能を提供してくれる。利用するためには addons.mozilla.org の無料アカウントが必要。ここからアカウントが作成できる。

まずはチュートリアルでBuilderの使い方をを確認。Tutorial – Add-on Builder: にアクセスして「Create Add-on」ボタンを押し、さらに「BrowserID」ボタンを押して、addons.mozilla.org で登録したメールアドレスを使ってログインする。

すると、コメントが付加されてはいるものの、上記チュートリアルと同じコードが main.js として記述された状態となる。このコードは、ブラウザー最下部のアドオンバーに表示された Firefox のアイコンをクリックすると、http://www.mozilla.org を新しいタブで開いてくれるアドオン。目のアイコンを押すだけで、main.js に記述されたアドオンを試すことができる。(先に、開発用のアドオンがインストールされる)。

main.js

require("widget").Widget({
    id: "widgetID1",
    label: "My Mozilla Widget",
    contentURL: "http://www.mozilla.org/favicon.ico", // アイコンのURL。Firefox のアイコンになる。
    onClick: function(event) {  // クリックすると、
        require("tabs").open("http://www.mozilla.org"); // http://mozilla.org を開く。
    }
});

次に、目標とするツイート用アドオンを作成する。参考にするのは、Display a Popup – Add-on SDK Documentation。アドオンをクリックしたときにポップアップを表示して、その中にアクティブなタブのタイトルとURLを表示させる。

今度は、main.js に加えて、get-text.js と text-entry.html の二つのファイルが必要。Builder の左側メニューの Data アイコンにマウスオーバーすると現れるプラスボタンを押して、二つのファイルを作成する。

まずは「Display a Popup」のコードをコピー&ペーストして、上部のフロッピーアイコンを押して保存。すると、自動的に目のアイコンが押された状態となり、アドオンバーに置かれた Firefox アイコンをクリックするとポップアップ画面が表示されるようになる。

次は、アクティブなタブのタイトルとURLを取得して、ポップアップ画面に表示する。
APIリファレンスを眺めてみると activeTab を使えばよさそうだ。しかし、
Content Scripts と呼ばれる get-text.js からは、require(“tabs”); をしても、Tabオブジェクトが取得できない。Add-on Code と呼ばれる main.js でないと取得できないことが Two types of Scriptsに書いてある。

そこで、main.js で取得したタイトルとURLを、Communicating using “port” に書いてある方法を使って get-text.js へ渡すことにする。

main.js

text_entry.on("show", function() {
  var tabs = require("tabs");
  var title = tabs.activeTab.title;
  var url = tabs.activeTab.url;
  var tweet = title + ' ' + url;
  text_entry.port.emit("show", tweet); // ポップアップに表示するデータ tweet を渡す。
});

get-text.js では渡されたデータを、テキストエリアに設定する。

get-text.js

self.port.on("show", function onShow(data) { // データ data を受け取る
  textArea.value = data;
  textArea.focus();
});

あとは、ポップアップ画面での入力が終わったときに、get-text.js から main.js へ入力内容を渡し、main.js 側でサーバへデータを渡す。ここで注意が必要なのは、XMLHttpRequest は使えず、Request を使わなければいけない点。

最後にできあがったアドオンはBuilder上の下向き矢印アイコンを押すことでダウンロードできる。ダウンロードした .xpi ファイルを Firefox へドラッグ&ドロップしてインストールする。

また、Buidler のダッシュボードにアクセスすると、作成したアドオン一覧が表示され、AMO (Add-ons Mozilla Org https://addons.mozilla.org/ の略) への公開も可能。upload to AMO をクリック後、ダッシュボードを再読み込みする。さらに edit on AMO をクリックして、アドオンの説明、アイコンやスクリーンショット、公開する際のライセンスを入力する。

もしアイコンの表示位置を最下部のアドオンバーから変更したい場合は、オプション>ツールバーのカスタマイズ… を選択し、アイコンを表示したい位置へドラッグ&ドロップすればよい。

ちなみに、ダウンロードした .xpi ファイルは拡張子を .zip にすると解凍できる。なんと、100個近くのファイルから構成されている。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中