とにかく”次へ”を大きくする：3bainext

Firefox の戻るボタンはその使用頻度が多いからこそ大きくデザインされている。同様の考えをコンテンツに持ち込めば、たとえば検索時においておよそ多く押すボタンは”次へ”であろう。だから大きくする。それだけである。

実装の目次

ドキュメント読み込み完了のイベントを取る。
a 要素を列挙する。
その中に “次へ” があるか検査する。
大きくする。
試してみる。
リリースの準備をする。

ドキュメント読み込み完了のイベントを取る。

Jetpack API ですでに関数が用意されているのでとても簡単です。具体的には jetpack.tabs.onReady に callback 関数をわたすと、ドキュメント読み込み完了のたびに callback 関数が呼ばれます。ここで渡される引数 (例では targetDocument ) は読み込まれたドキュメントオブジェクトです。なお、このオブジェクトは通常のウェブページ上における window.document と同じオブジェクトを指します。
文中の if (targetDocument.defaultView.frameElement) でおこなっている検査は、読み込まれたドキュメントがルートドキュメントであるか否かを検査しています。 targetDocument.defaultView.frameElement が真の場合、ドキュメント内に存在する frame / iframe の読み込み完了を示すので、今回はこれを無視し return しています。

jetpack.tabs.onReady(function(targetDocument) {
  if (targetDocument.defaultView.frameElement) {
    return;
  }
});

a 要素を列挙する。

Jetpack で直接定義していなくても DOM などの API が使えます。以下では、読み込んだドキュメント内から getElementsByTagName を使って、a 要素群を取得し、順に取り出しています。

jetpack.tabs.onReady(function(targetDocument) {
  if (targetDocument.defaultView.frameElement) {
    return;
  }
  var as = targetDocument.getElementsByTagName("a");
  for (var i = 0; i < as.length; i++) {
    var a = as;
  }
});

その中に “次へ” があるか検査する。

もちろん正規表現も使えます。以下の例では、取り出した a 要素で囲まれているテキストが “次へ” あるいは “next” を含むか否か検査をしています。

jetpack.tabs.onReady(function(targetDocument) {
  if (targetDocument.defaultView.frameElement) {
    return;
  }
  var as = targetDocument.getElementsByTagName("a");
  for (var i = 0; i < as.length; i++) {
    var a = as;
    if (a.textContent.match(/次へ|next/, "i")) {
      // do something
    }
  }
});

大きくする。

Jetpack では =http://jquery.comjQuery[/url] が標準で搭載されており、今回はそれを利用して a 要素の css に変更を加えます。以下の例では a 要素のフォントサイズを10倍にしています。（この Feature 名は”次へ”を3倍にする >3倍ネクスト > 3bainext なのですが、実際には10倍ぐらいが気持ちよかったのです。）

jetpack.tabs.onReady(function(targetDocument) {
  if (targetDocument.defaultView.frameElement) {
    return;
  }
  var as = targetDocument.getElementsByTagName("a");
  for (var i = 0; i < as.length; i++) {
    var a = as;
    if (a.textContent.match(/次へ|next/, "i")) {
      $(a).css({"font-size":"1000%"});
    }
  }
});

試してみる。

これでソースコードは完成です。実際に試します。
about:jetpack
を開き、Develop ページを開きます。その中央にあるテキストエリアにソースコードをコピペし、”try out this code” を押します。これでこの Feature の準備は整ったはずです。
http://www.google.co.jp/search?q=jetpack
を訪れてみてください。”次へ”がとっても押しやすくなっているはずです。大きさが足りなければ、お好きなだけ大きくしてみてください。

リリースの準備をする。

先ほどのソースコードをファイルとして書き出します。今回は 3bainext.js という名前のファイルを新規作成しソースコードをコピペ、保存します。次にそれを Jetpack Feature としてブラウザが認識できるようにします。Feature までのパスを指す link 要素を新たに以下のように設け、お好きなウェブページの head 要素に追加すれば、そのページがインストール用ページとなります。

<head>
<link rel="jetpack" href="3bainext.js" name="3bainext" />
</head>

ここに、3bainext.js およびそのインストール用ページとして index.html を固めて置いておきます。ダウンロードしたあと、index.html をドラッグ&ドロップすれば、Feature のインストール画面が表示されます。インストールが済みましたら、
about:jetpack
を開き Installed Features ページで 3bainext が導入されていることを確認ください。アンインストールも同画面にてすることができます。

終わりに。

このように、比較的簡単なソースコードで既存のページを自由に変更することができます。また、ページのみならず statusbar や tab 、slidebar など、ブラウザ部品も同様に扱うことができそうです。以上 3分以上かかってしまったかもしれませんが、ごめんなさい。