Firefox Add-on Builder で Cookie を扱うには

見ているページの URL を WordPress.com に簡単に投稿するには、WordPress.com Extension :: Add-ons for Firefox が使えるのだけれど、もっとシンプルなものが欲しかったので、Add-on Builder を使って作ってみた (wp it :: Add-ons for Firefox)。

WordPress.com の記事投稿画面を表示するには、

http://＜ユーザー名＞.wordpress.com/wp-admin/post-new.php?post_type=post&post_title=＜記事のタイトル＞&content=＜記事の内容＞

をブラウザーで表示すればよい。
ユーザー名は http://wordpress.com から受信したクッキーから取得できる。そこで、Add-on Builder の中からクッキーを参照する方法を調べてみた。

firefox – read cookies with addon – Stack Overflow によれば、

var {Cc, Ci} = require("chrome");
var cookieSvc = Cc["@mozilla.org/cookieService;1"].getService(Ci.nsICookieService);

とすれば、cookieService を利用できるようになる。

Cookies – MDN　によれば、

var ios = Components.classes["@mozilla.org/network/io-service;1"]  
            .getService(Components.interfaces.nsIIOService);  
var uri = ios.newURI("http://www.google.com/", null, null);  
var cookieSvc = Components.classes["@mozilla.org/cookieService;1"]  
                  .getService(Components.interfaces.nsICookieService);  
var cookie = cookieSvc.getCookieString(uri, null); 

とすることで、指定したホストから受信したクッキー文字列を参照できる。

指定した url から受信した、名前が name のクッキーの値を取得する関数 getCookie は以下のようになる。Add-on Builder 上で確認するにはこちらをどうぞ。

const {Cc, Ci} = require("chrome");
const ios = Cc["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);  
const cookieSvc = Cc["@mozilla.org/cookieService;1"].getService(Ci.nsICookieService);

function getCookie(url, name) {
    var cookie_uri = ios.newURI(url, null, null);
    var cookie_string = cookieSvc.getCookieString(cookie_uri, null);
    var cookies = cookie_string.split('; ');
    var key = name + '=',
        i;
    for (i = 0; i < cookies.length; i++) {
        if (cookies[i].lastIndexOf(key, 0) == 0) {
            return cookies[i].replace(key, '');
        }
    }
    return null;
}

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