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個近くのファイルから構成されている。

simpleauth で Google App Engine を使った oauth 認証

Simple auth on App Engine without passwords で紹介されている simpleauth (Google code) (github) を使って、Twitter、Google、Facebook の oauth 認証を試してみた。simpleauth は Alex Vagin さんが作った Google App Engine / Python2.7用のoauth 認証デモ。GAE の新しい Web フレームワーク webapp2 を活かした設計になっている。

作者が公開しているデモはこちら。Google, Facebook, Yahoo! (OpenID), Twitter, LinkedIn, Windows Liveでの認証ができるようになっている。

下準備として、Twitter でアプリケーションを作成する。
https://dev.twitter.com/apps にアクセスして Create a new application する。
Callback URL に https://simplemash.appspot.com/auth/twitter/callback と入力しておく。URLの最後にスラッシュ (/) を入れないこと。Callback URL を入力しておかないと(コールバックするモードではなく)PINコードを入力するモードになってしまう。
後で使うので、Consumer Key と Consumer Secret を参照できるようにしておく。これらの値が外部に漏れると大変なので厳重に管理すること。

次に Git Bash を起動する。gae-simpleauth を clone した後、example を動かす準備をする。GAE に配備したとき simpleauth ライブラリの参照がうまくいかないので、ちょっと工夫が必要。

$git clone https://code.google.com/p/gae-simpleauth/
$cd gae-simpleauth
$rm example/lib/simpleauth
$cp -r simpleauth/ example/lib/
$cd example
$mv secrets.py.template secrets.py
$vi secrets.py
  SESSION_KEY = 'セッション用のランダムで推測できない文字列を入れる'
  TWITTER_CONSUMER_KEY = 'アプリケーションのConsumer Key'
  TWITTER_CONSUMER_SECRET = 'アプリケーションのConsumer Secret'
$vi app.yaml
  application を Google App Engine のアプリケーションIDに変更。
  version を変えた場合は、Google App Engine のダッシュボードで version を変更するのを忘れずに。

次に Google App Engine Launcher を起動。File>Add exsiting application で \gae-simpleauth\example を追加。
Twitter からのコールバックがあるため、テストサーバでは動かせず、Deployする必要がある。

https://<アプリケーションID>.appspot.com/ にアクセスして「Twitter」ボタンを押すと、Twitterで認証され、/profile ページが表示される。

ちなみに動かしたのは WIndows 7。Windows の vi はコピーが Ctrl + Insert, ペーストが Shift + Insert なことを学んだ。

同様の手順で、Google、Facebook についてもアプリケーションを作成して認証を行う。

Google でアプリケーションを作るには APIs Console にアクセスしてClient ID for web applicationsを取得する。設定でRedirect URIsを https://<アプリケーションID>.appspot.com/auth/google/callback にしておく。secrets.py の GOOGLE_APP_ID, GOOGLE_APP_SECRET に取得した値を入れる。これらの値は厳重に管理すること。

Facebook でアプリケーションを作るには https://developers.facebook.com/apps にアクセスしてFacebookアプリ「Developer」をインストール後、Create New App から作成する。作成の際、携帯電話かクレジットカードで本人認証される。Softbank の iPhone を持っていたので、@softbank.ne.jpのSMSアドレスを入力して本人認証した。secrets.py の FACEBOOK_APP_ID, FACEBOOK_APP_SECRET に取得した値を入れる。これらの値は厳重に管理すること。