■ファイアーフォックス(Firefox)でユーザースクリプトを使ってみよう

このページの更新は終了しました。わたし自身が、ファイアーフォックスからシーモンキーにのりかえたからです。そんなわけで、「■ブラウザー・メールソフトのりかえ案内――シーモンキー(SeaMonkey)」「■シーモンキー(SeaMonkey)をカスタマイズ」をどうぞ。

「■ファイアーフォックス(Firefox)でユーザースタイルシートを使ってみよう」で紹介したように、ユーザースタイルシートを使えば、ファイアーフォックス自体の「みため」と、ファイアーフォックスで表示しているウェブページの「みため」――を変えることができます。

でも、ユーザースタイルシートが得意なのは、「みため」という“静的な”部分の変更。ファイアーフォックス自体の「動作」や、ファイアーフォックスで表示しているウェブページの「動作」といった“動的な”部分を変更したいときには、ちょっと不向きなんですね。

そんなときに試してみたいのが、

この組み合わせで、上記の「動作」をかなりの程度まで変えることができます。まさに「ミニアドオン」といっていいでしょう。ちなみに「スクリプト」とは、一連の処理手順を記述した簡易プログラムのこと。userChromeJS用のスクリプトは、ジャバスクリプト(JavaScript)というスクリプト言語を使って書かれます。「ユーザースクリプト」は、ブラウザーの利用者側が独自に作ったスクリプト――を意味しています。

では、ユーザースクリプトでどんなことができるのか。わたしが使っているスクリプトをいくつかあげておきましょう。

いろいろと便利なことができると思いませんか? そんなわけでこのページでは、 を紹介します。手順はいくらかめんどうなんですが、できるだけざっくりと説明していきましょう。

1. ユーザースクリプトを使えるようにする

まずは、環境をととのえましょう。具体的には、アドオンのインストールや、必要なファイルのコピーなどをしていきます。

◆「ユーザークロームJS」(userChromeJS)をインストール

「ユーザークロームJS」(userChromeJS)は、ユーザースクリプトを使うためのアドオンです。「mozdev.org - userchromejs」からインストールしてください。公式のアドオンサイト「Add-ons for Firefox」には登録されていない、ちょっとマイナーなアドオンです。

userChromeJSをインストールすると、プロファイルフォルダーのなかに「chrome」フォルダーが作られます。そしてchromeフォルダーのなかに、「userChrome.js」というファイルが作られます。

このuserChrome.jsにいろいろなスクリプトを書き込んでいって、ファイアーフォックス自体の動作を変更する……というのが本来の使い方。でもここでは、本来の使い方はしません。スクリプトが管理しづらくなるからです。したがってuserChrome.jsをべつの名前、たとえば「userChrome-example.js」などに変えておいてください。

なお、プロファイルフォルダーを開くには、メニューの[ヘルプ]→[トラブルシューティング情報]を選び、「フォルダを開く」ボタンを押すといいでしょう。

◆「userChrome.js」「000-windowhook.uc.js」「rebuild_userChrome.uc.xul」をchromeフォルダーにコピー

以下の3つのファイルを使うと、1スクリプト=1ファイルというかたちでスクリプトを管理できるようになります。

これらはいずれも、「Alice0775」さんが作ったuserChromeJS用のスクリプト。「alice0775/userChrome.js」へいって、「ZIP」ボタンを押しましょう。Alice0775さんのスクリプトが一括でダウンロードできます。

ダウンロードしたzipファイルは、「Alice0775.zip」などとリネームしてください。てきとうなフォルダーに解凍して、上記の3つのファイルをchromeフォルダーにコピーします。

以後、userChromeJS用のスクリプトはchromeフォルダーに置いて使うことになります。おぼえておいてくださいね。

◆「UserScriptLoader.uc.js」をコピー

以下のファイルを使うと、ファイアーフォックスで表示しているウェブページのみためや動作を変更するスクリプトを読み込めるようになります。要するに、ウェブページのみためや動作を変更するには、以下のファイルが必要、ということですね。

これは「Griever」さんが作ったuserChromeJS用のスクリプト。「Griever/userChromeJS」へいって、「ZIP」ボタンを押しましょう。Grieverさんのスクリプトが一括でダウンロードできます。

ダウンロードしたzipファイルは、「Griever.zip」などとリネームしてください。てきとうなフォルダーに解凍して、上記のファイルをchromeフォルダーにコピーします。

コピーしたら、chromeフォルダーに「UserScriptLoader」フォルダーを作ってください。UserScriptLoader.uc.js用のスクリプトは、UserScriptLoaderフォルダーに置いて使います。これもおぼえておいてくださいね。

    *
ここまでの作業が終わったら、chromeフォルダーを開いてみましょう。必要なファイルとフォルダーがそろっていれば、OKです。

つづいて、ファイアーフォックスを終了して立ち上げなおしましょう。

userChromeJSと、Alice0775さんのuserChrome.jsなどが導入されていれば、[ツール]メニューはこんなふうになります。また、GrieverさんのUserScriptLoader.uc.jsが導入されていれば、ロケーションバーの右端にかみなりマークが表示されます。

2. userChromeJS用スクリプトを使ってみる

◆userChromeJS用スクリプトを探す

userChromeJS用スクリプトを探すなら、まとめサイト「userChrome.js用スクリプト - wiki@nothing」が便利でしょう。さまざまなスクリプトが配布サイト別にまとめられています。かんたんな説明もついているので、わかりやすいですね。

◆userChromeJS用スクリプトをインストール・アンインストールする

使ってみたいスクリプトがあったら、スクリプトのファイルをダウンロードして、chromeフォルダーに移動してください。ファイアーフォックスを立ち上げなおすと、そのスクリプトが使えるようになります。インストールにかかる手間はこれだけです。

インストールしたスクリプトは、後述のテキストエディターなどで、かならずなかみをみておきましょう。先頭部分に、そのスクリプトについての説明が書いてあったりしますから。また、設定を自分で書き込まなくてはならないスクリプトもあります。

使わなくなったスクリプトは、ファイアーフォックスを終了してから、削除してください。これでアンインストールしたことになります。

◆userChromeJS用スクリプトを自分で保存するとき

スクリプトのファイルをダウンロードするのではなく、たとえば、クリップボードにコピーしてなにかのソフトにはりつけてから保存する――という場合もあるでしょう。そんなときは、保存する文字コードに注意してください。

スクリプトファイルの文字コードは、「BOMなしUTF-8」でなければなりません。ところが、ウィンドウズに付属するメモ帳で、文字コードを「UTF-8」にして保存すると、「BOMつきUTF-8」で保存されてしまいます(BOMはバイト・オーダー・マーク〔Byte Order Mark〕の略で、データの並び順を示すバイナリー値です。メモ帳でUTF-8保存すると、ファイルの先頭3バイトに「EFBBBF」というBOMが付加されます)。「BOMつきUTF-8」のファイルをchromeフォルダーにコピーしても、スクリプトとして動作しません。

したがって、クリップボードにコピーしたスクリプトは、「BOMなしUTF-8」で保存できるテキストエディターにはりつけてください。

テキストエディターについては、オンラインソフトのダウンロードサイト「ベクター」のテキストエディタのジャンル(ウィンドウズ用)をどうぞ。たいていのテキストエディターは、「BOMなしUTF-8」で保存できます。

……といっても、わかりづらいかもしれませんね。実際にやってみましょう。スクリプトとテキストエディターは、以下のものを使用します。

wheelscroll-to-change-search-engine.uc.jsをマウスで選択反転して、クリップボードへコピー。MKEditorにはりつけます。そして、MKEditorで[ファイル]→[名前を付けて保存]を選ぶと、この画面になります。

ここでは、ファイルの種類を「全てのファイル (*.*)」、文字コードを「UTF-8N (BOMなし)」にしています。こんなふうに保存すればいいわけです。

保存したスクリプトのファイルは、chromeフォルダーに移動することをお忘れなく。ファイアーフォックスを立ち上げなおすと、検索バー上のマウスホイールで検索エンジンをきりかえられるようになります。

◆userChromeJS用スクリプトを自作するには?

userChromeJS用スクリプトを自作するには、JavaScriptの知識だけでなく、ファイアーフォックスやサンダーバードをかたちづくっているユーザインターフェース記述言語「XUL」(ズール)――の知識が必要です。JavaScriptについては、いまさらいうまでもなく、たくさんの参考書や参考サイトがあります。XULについては、モジラ・デベロッパー・ネットワークの「XUL」が参考になるでしょう。

いずれにせよ、すでにあるスクリプトをみながら、あれこれ試行錯誤していくのがてっとりばやいんじゃないでしょうか。わたし自身はといえば、みようみまねのごく初歩的なスクリプトしか書けません……(^^;;;。

参考までに、ファイアーフォックスを再起動するスクリプトをあげておきましょう。このスクリプトは、「ScrapBook」などのアドオンを開発している「Gomita」さんがまとめた「userChrome.js 〜拡張機能の解体再構築〜」に掲載されていたものを、わたしがすこしだけ改変したもの。「RestartBrowser.uc.js」などというなまえで保存してください。もちろん、文字コードは「BOMなしUTF-8」で。

// ==UserScript==
// @name           RestartBrowser.uc.js
// @version        1.0.0.0
// @description    [ファイル] メニューに [再起動] を追加する
// @author         あなたのなまえ
// @namespace      
// @include        chrome://browser/content/browser.xul
// @compatibility  Firefox 20.0+
// @note           
// ==/UserScript==

(function() {

  // メニュー項目の文字  再起動
    // UTF-8 -> UTF-16へ変換する
  var unicodeConverter = Components.classes['@mozilla.org/intl/scriptableunicodeconverter'].
    createInstance(Components.interfaces.nsIScriptableUnicodeConverter);
      // このスクリプトの文字コード
  unicodeConverter.charset = 'UTF-8';
  var labelText = unicodeConverter.ConvertToUnicode('再起動');

  // メニューをつくる
  var restartMenu = document.createElement('menuitem');
  restartMenu.setAttribute('label', labelText);
  restartMenu.setAttribute('accesskey', 'R');

  // 再起動を実行する関数 restartFunc
  function restartFunc() {
    var startup = Components.classes['@mozilla.org/toolkit/app-startup;1'].
      getService(Components.interfaces.nsIAppStartup);
    startup.quit(startup.eRestart | startup.eAttemptQuit);
  };
  // メニューにイベントを追加
  restartMenu.addEventListener('command', restartFunc, false);

  // [終了] のうえに [再起動] を追加
  var quitMenu = document.getElementById('menu_FileQuitItem');
  quitMenu.parentNode.insertBefore(restartMenu, quitMenu);
  // [再起動] のうえにセパレーターを追加
  var separator = document.createElement('menuseparator');
  restartMenu.parentNode.insertBefore(separator, restartMenu);

})();

3. UserScriptLoader.uc.js用スクリプトを使ってみる

◆UserScriptLoader.uc.js用スクリプトを探す

UserScriptLoader.uc.jsは、スクリプトを読み込むスクリプト。さまざまなスクリプトを読み込んで、ウェブページのみためや動作を変更してくれます。ファイアーフォックスのアドオン「グリースモンキー」(Greasemonkey)のuserChromeJS版、といえますね。実際、Greasemonkey用スクリプトの多くがそのまま使えるように作られています。

Greasemonkey用スクリプトを探すなら、「userscripts.org」(ユーザースクリプト・オルグ)が便利。たとえば「Google Tracking」というキーワードでuserscripts.orgを検索してみると、たくさんのスクリプトがヒットします。冒頭であげた「GoogleTrackingBeGoneFixed.user.js」も、ここに登録されていることがわかるでしょう。

userscripts.orgの管理がゆきとどかない状況になったため、あたらしいサイト「Greasy Fork」がつくられました。そんなわけで、userscripts.orgのスクリプトを利用する場合は、安全であるかどうか、よくたしかめることをおすすめしておきます。

◆UserScriptLoader.uc.js用スクリプトをインストール・アンインストールする

使いたいスクリプトがあったら、スクリプトのファイルをダウンロード……できればいいんですが、userscripts.orgにダウンロードのリンクはありません。そのかわり、各スクリプトの「About」ページには「Install」ボタンがあります。Greasemonkeyをインストールしていない状態でこのボタンを押すと、スクリプトそのものが表示されます。メニューの[ファイル]→[名前を付けてページを保存]を選ぶと、文字コード「BOMなしUTF-8」で保存されます。

ただし、ファイル名が「スクリプトの番号.user.js」となってしまいます。スクリプトのなかみがわかりやすいように、リネームしておくといいでしょう。

保存したスクリプトのファイルは、UserScriptLoaderフォルダーに移動してください。移動したら、ロケーションバーのかみなりマークをホイールクリックするか、かみなりマークの右クリックメニューから[Menu]→[Rebuild]を選びます。UserScriptLoader.uc.js用スクリプトがすべて再読み込みされて、移動したスクリプトが使えるようになります。ファイアーフォックスを立ち上げなおす必要はありません。ちなみに、現在読み込まれているスクリプトは、右クリックメニューの上部に表示されています。

使わなくなったスクリプトは、削除してください。削除したら、[Rebuild]をお忘れなく。これでアンインストールしたことになります。

◆UserScriptLoader.uc.js用スクリプトを自作する

UserScriptLoader.uc.js用のスクリプトを自作するには、JavaScriptだけでなく、Greasemonkey用スクリプトの知識が必要です。Greasemonkey用スクリプトについては、「Dive into Greasemonkey」の日本語訳が参考になるでしょう。

userChromeJS用スクリプトとおなじく、すでにあるスクリプトをみながら、あれこれ試行錯誤してみてください。

参考までに、ヤフーの検索結果画面でクリックトラッキングを無効にするスクリプトをあげておきましょう。リンクのマウスダウンイベントを無効にして、クリックトラッキング用のURLをかきかえているだけ、というなんともお手軽なスクリプトです(最初に公開したものよりは、いくらかマシにしつつあります(^^;。だいじょうぶだとは思いますが)。「DisableYahooClickTracking.user.js」などといったなまえで保存してください。もちろん、文字コードは「BOMなしUTF-8」で。

// ==UserScript==
// @name           DisableYahooClickTracking.user.js
// @version        1.1.0.0
// @description    ヤフーの検索結果画面でクリックトラッキングを無効にする
// @author         あなたのなまえ
// @namespace      
// @include        http://search.yahoo.*
// @compatibility  Firefox 20.0+
// @note           
// ==/UserScript==

(function () {

  var trackingStr = 'http://wrs.search.yahoo';
  var searchStr = '**http';

  // リンク情報を全部取得
  var linkArray = document.getElementsByTagName('a');

  for (var i = 0; i < linkArray.length; i++) {
    // onmousedown を無効にする
    linkArray[i].onmousedown = doNothing();
    // href をかきかえる
    var decodedStr = decodeURIComponent(decodeURIComponent(linkArray[i].href));
    // 'http://wrs.search.yahoo' をさがす
    if (decodedStr.indexOf(trackingStr) == 0) {
      // '**http' をさがす
      var strPos = decodedStr.indexOf(searchStr);
      if (strPos > -1) {
        // 必要なリンクをきりだして、href をかきかえる
        var tempStr = decodedStr.slice(strPos + 2);
        linkArray[i].href = encodeURI(tempStr);
      }
    }
  }

  function doNothing() {
    return false;
  }

})();

4. ユーザースクリプトを使うときの注意

userChromeJS用スクリプトも、UserScriptLoader.uc.js用スクリプトも、どちらも便利なユーザースクリプトです。でも、「動作」を変更するということは、悪意のある変更も可能になるということ。つまり、悪意のあるスクリプトがページの閲覧履歴をはじめとした個人情報をどこかに送信する、ということもありえない話ではないんですね。

悪意のあるスクリプトを避けるひとつの方法は、他人が作ったスクリプトを使わないことでしょう。そういう選択も「あり」です。ただ、必要なスクリプトを全部自作できる人はかぎられますし、問題のないスクリプトも実際にたくさんあります。

そんなわけで、

を使うようにすれば、危険はある程度まで避けられるんじゃないかと考えています。もちろん、いちばんいいのは、スクリプトのなかみを読んで、自分で判断することですが。

それから、ファイアーフォックスの仕様変更などによって、使っているスクリプトが動かなくなることもあります。そんなときは、自分でなんとかするしかありません。アドオンのように自動更新してくれる、というものじゃないんですね。

もっとも、更新されなくなるアドオンもありますから、このあたりは、にたりよったり。ちなみにわたしがuserChromeJS用スクリプトを使いはじめたのは、更新されなくなったアドオンの機能をなんとか実現したい、と考えたからでした。

悪意のあるスクリプトに注意しつつ、また、動かなくなったら自分でなんとかしつつ、ユーザースクリプトをいろいろと試してみてください。