Firefox 3ではじめる拡張機能開発

第4回 機能を実装する(後編)

この記事を読むのに必要な時間:およそ 5.5 分

右クリックメニュー項目の表示制御

ここからは,DOMイベントリスナの仕組みによって,右クリックメニュー表示時に選択範囲の有無を調べてタグヘルパーのメニュー項目を表示/非表示する処理を追加します。⁠overlay.js」リスト5の内容を追加してください。

リスト5 ⁠overlay.js」への記述内容7(右クリックメニュー項目の表示制御処理を追加)

var TagHelper = {
  init: function() {
    var contextMenu = document.getElementById("contentAreaContextMenu");
    contextMenu.addEventListener("popupshowing", this, false);
  },
  destroy: function() {
    var contextMenu = document.getElementById("contentAreaContextMenu");
    contextMenu.removeEventListener("popupshowing", this, false);
  },
  generateTags: function() {
    var url = window.content.location.href;
    url = PlacesUtils._uri(url);
    if (!PlacesUtils.bookmarks.isBookmarked(url)) {
      alert('"' + window.content.document.title + '" is not bookmarked.');
      return;
    }
    var keywords = [];
    var sel = window.content.getSelection();
    for (var i = 0; i < sel.rangeCount; i++) {
      var keyword = sel.getRangeAt(i).toString();
      keyword = keyword.replace(/^\s+|\s+$/g, "");
      keywords.push(keyword);
    }
    Application.console.log("keywords = " + keywords);
    if (keywords.length > 0) {
      PlacesUtils.tagging.tagURI(url, keywords);
    }
    sel.removeAllRanges();
  },
  handleEvent: function(event) {
    if (event.type == "popupshowing") {
      var selected = getBrowserSelection() != "";
      document.getElementById("taghelper-menu").hidden = !selected;
    }
  }
};

window.addEventListener("load", function() { TagHelper.init(); }, false);
window.addEventListener("unload", function() { TagHelper.destroy(); }, false);

リスト5の最後の2行は,⁠overlay.js」読み込み直後に実行されます。DOM:windowに対してイベントリスナを登録し,イベント発生時に以下の2処理を実行します。

  • ブラウザウィンドウを開いた直後(⁠⁠browser.xul」ロード完了に伴う「load」イベント発生時)「TagHelper.init」を実行する。
  • ブラウザウィンドウを閉じた直後(⁠⁠browser.xul」アンロード完了に伴う「unload」イベント発生時)「TagHelper.destroy」を実行する。

「TagHelper.init」は,右クリックメニューへ自分自身(⁠⁠TagHelper」オブジェクト)をイベントリスナとして登録し,メニューを開いた直後(⁠⁠popupshowing」イベント発生時)「handleEvent」が呼び出されるようにします注4⁠。⁠TagHelper.destroy」「TagHelper.init」の逆で,登録したイベントリスナを解除します。⁠TagHelper.handleEvent」では,念のため発生したイベントが「popupshowing」であることを確認し,⁠chrome://browser/content/browser.js」で定義された関数「getBrowserSelection」を使って選択範囲の文字列を取得し,空であればメニュー項目を非表示にします。

注4)
イベントリスナ(EventListenerインタフェース)の仕組みについては,下記URLを参照してください。

動作確認

ここまでのソースコード記述が完了したら,動作確認を行います。Firefoxの新しいウィンドウを開き,以下の3点を確認してください。

  • ブックマークされていないWebページ上で範囲を選択し,右クリックから「Generate Tags from Selection」メニュー項目を選択すると,警告メッセージが表示される。
  • ブックマーク済みのWebページ上で範囲を選択し,右クリックから「Generate Tags from Selection」メニュー項目を選択すると,選択範囲の文字列からタグ付けされる。
  • 範囲を選択していない状態で右クリックすると,メニュー項目「Generate Tags from Selection」が非表示となる。

まとめと次回の予告

中編・後編とひたすらJavaScriptのコードを書いてタグヘルパーの機能を実装しました。機能のオブジェクト化,XPCOMサービス呼び出しよる高度な処理,DOMイベントリスナによるユーザの操作に応じた処理などは,拡張機能を開発する上では基本といえるでしょう。また,Firefox 3ならではのトピックとして,以下の3点についても触れました。

  • FUEL
  • Places API
  • JavaScriptコードモジュール

ブックマークや履歴に関する拡張機能を開発するのであれば,Places APIの利用は欠かせないでしょう。また,JavaScriptコードモジュールはお手軽かつ有用であり,規模の大きな拡張機能を開発するのであれば,ぜひ導入を検討してみてはいかがでしょうか。

次回はタグヘルパーへlocaleパッケージを追加して拡張機能のUIをローカライズ可能にします。

著者プロフィール

Gomita

拡張機能開発者。
現在までにScrapBook,FoxAge2ch,Tab Scope,FireGesturesの4つをリリースしている。

URLhttp://www.xuldev.org/