【小技】Firefox Quantumで「Tab Mix Plus」の機能を再現する

* 2018/6/30 ver.60 / 61での変更点を記事に反映。

Firefox Quantum(Firefox 57)へのアップグレードにより、新仕様「WebExtensions」に未対応のアドオン(拡張機能)が動作しなくなったのも記憶に新しいところですね。
「レガシーアドオン」とも呼ばれるこれらの旧式アドオンの中には、強い人気を誇ったものもありますが、その1つに「Tab Mix Plus」があります。

Tab Mix Plusは、タブ周辺の動作や見た目を総合的にカスタマイズできるアドオンです。
タブを多段表示にする、閉じたタブを復元する、ポップアップをタブに開くなど、非常に多機能なアドオンですが、WebExtensionsの制約により、開発は難航しているよう。
結果として、Tab Mix Plusで実現していた効果を、どうにか再現できる方法はないものかと、多くの利用者が代替案を探し求めることになりました。

Tab Mix Plusの機能をそっくりそのまま再現する方法というのは、ありません。
そっくりそのまま全部とまではいかないまでもその大部分、せめて半分くらいを再現する方法さえも、現状では多分ないでしょう。
でも、部分的に代替できるアドオンはたくさんありますし、「userChrome.css」や「about:config」で解決する部分もあります。

この記事では、Tab Mix Plusが備えていた機能を再現するべく、情報を集め回った成果をご紹介したいと思います。
なお、上記の通り、非常に多機能なアドオンであること、また、私自身が普段は使用していない機能にも言及しているため、解説が不十分な部分もありますが、ご了承下さい。

FirefoxQuantum

[PR]
当ブログからご登録いただけると、入会特典として通常の2倍の2,000ポイント獲得、さらに、登録の翌々月末までにポイント交換を完了すると、1,000ポイントが付与されます
暮らしをおトクにかえていく|ポイントインカム
ポイントインカム
[PR]

まず、userChrome.cssとabout:configについて、簡単に説明しておきましょう。

userChrome.cssとは、平たく言えば、一種の設定ファイルです。
ブログを運営されている方やウェブ知識をある程度お持ちの方ならば、CSSについてはご存じのことと思いますが、ウェブサイトにおいて、文字の大きさや罫線の太さ、背景色、画像の表示位置など、デザインのあらゆる部分に関わる設定ファイルになります。
Firefox本体に適用されるcssファイルを作成し、そこに直に書き込むことで、デザインをカスタマイズできるようにする、というわけですね。

userChrome.cssを適用する手順は以下の通りになります。
1. CSSの記述ルールに則って、メモ帳などのテキストエディタでファイルを作成、「userChrome.css」という名前で保存する(txtではなくcssで保存する点に注意)。
2. Firefoxのプロファイルフォルダ内に「chrome」という名前のフォルダを作成し、userChrome.cssを移動させる。
3. Firefoxを再起動して完了です。

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profilesにある「○○○.default-×××」という名前のフォルダが、プロファイルフォルダです。
プロファイルフォルダの探し方については、公式サイトにとてもわかりやすいヘルプページがありますので、そちらを参照して下さい。

主に、見た目に関する部分を設定できるuserChrome.cssに対して、動作に関する部分を設定できるのがabout:configです。
オプションでは変更できない高度な設定を、直に書き換えることができます。

about:configで設定を変更する手順は以下の通りとなります。
1. ロケーションバー(アドレスバー)に「about:config」と入力してエンターキーを押す。
2. 「危険性を承知の上で使用する」をクリックします(以降の操作は間違いのないよう十分にご注意下さい)。
3. 検索欄に変更したい設定項目(の一部)を入力すると、自動的に一覧から絞り込まれます。
4. 項目名をダブルクリック、もしくは、右クリックして「値を変更」を選ぶと、各項目の設定値を変更できます。
5. タブを閉じて完了です。

詳細は公式サイトのヘルプページを参照して下さい。



■ポップアップを新しいウィンドウではなく新しいタブに開く *1

about:configで「browser.link.open_newwindow」を「3」に、「browser.link.open_newwindow.restriction」を「0」に設定する。



■リンクを新しいタブに開く

アドオン「新しいタブでリンクを開く Open Link with New Tab」で可能になります。
WebExtensions未対応の「リンクを新しいタブで開く (Open Link in New Tab)」に着想を得たアドオンで、基本的な機能は継承していますが、JavaScriptによるポップアップをタブに開くようにしたり、GoogleやYahooの検索結果からは新しいタブではなく現在のタブに開くようにするといった例外設定をすることはできません。
JavaScriptによるポップアップについては、上記の「ポップアップを新しいウィンドウではなく新しいタブに開く」にて対応可能です。



■新しいタブを開くボタンで開くページを指定する

アドオン「New Tab Homepage」をインストールすると、Firefoxのオプションでホームページに設定しているページを開くようになります。
設定項目はなし、シンプルなアドオンです。

ホームページとは別なページを開くようにしたい場合は、アドオン「New Tab Override」で設定可能です。



■新しくタブを開く位置を指定する

初期設定では、新しいタブは末尾に開かれますが、アドオン「Always Right」や「Open Tabs Next to Current」をインストールすれば、現在のタブの右隣に開くようになります。

右隣の他に、先頭や左隣といった柔軟な設定がしたい方には、「Tab Open/Close Control」というアドオンもありますが、設定した項目がうまく反映されないことがあるなど、動作が不安定なので、あまりオススメはしません。



■ブックマークを現在のタブではなく新しいタブに開く

about:configで「browser.tabs.loadBookmarksInTabs」を「true」に設定します。
ブックマークを新しいタブに開く際、バックグラウンドで開く(自動的に新しいタブに移動しない)ようにしたい場合は、同じく「browser.tabs.loadBookmarksInBackground」を「true」に設定すればOKです。



■ロケーションバー(アドレスバー)から現在のタブではなく新しいタブに開く

アドオン「ロケーションバーから新しいタブを開く」で対応可能です。

ver.60以降では、about:configで「browser.urlbar.openintab」を「true」に設定することでも同じ結果を得ることができます。



■検索バーから現在のタブではなく新しいタブに開く

about:configで「browser.search.openintab」を「true」に設定します。



■リンクをバックグラウンドで開く(自動的に新しいタブに移動しないようにする) *1

about:configで「browser.tabs.loadDivertedInBackground」を「true」に設定します。



■複数のタブを閉じる際に確認メッセージを表示させない *2

about:configで「browser.tabs.warnOnCloseOtherTabs」を「false」に設定します。



■最後のタブを閉じてもウィンドウを閉じない *1

about:configで「browser.tabs.closeWindowWithLastTab」を「false」に設定します。



■現在のタブを閉じた後に移動するタブを指定する

初期設定では、現在のタブを閉じた後は右隣のタブへ移動しますが、アドオン「Focus On Left Tab After Closing」をイントールすれば、左隣へ移動するようになります。

左隣の他に、先頭や末尾といった柔軟な設定がしたい方には「Tab Open/Close Control」というアドオンもありますが、設定した項目がうまく反映されないことがあるなど、動作が不安定なので、あまりオススメはしません。



■指定したタブを一定間隔で自動的に再読み込みする

アドオン「Tab Reloader (page auto refresh)」や「Tab Auto Refresh」で対応可能です。



■タブを多段表示にする *3 *4

Tab Mix Plusとは動作が異なりますが、タブの多段表示自体は、userChrome.cssを使用すれば可能です。
相違点としては、タブの数が増えるとまずはタブの横幅を縮小、さらに増えると多段表示するTab Mix Plusに対して、タブの横幅が固定されていることが挙げられます。
また、タブを水平・垂直に自由にドラッグできたTab Mix Plusとは異なり、垂直方向のドラッグに支障があります(水平方向は支障なし)。

#titlebar-buttonbox {
display: block !important;
vertical-align: top !important;
}
.tabbrowser-arrowscrollbox scrollbox {
overflow: visible !important;
}
.tabbrowser-arrowscrollbox scrollbox > box {
display: block !important;
}
.tabbrowser-tab:not([pinned]) {
min-height: 30px !important;
max-height: 30px !important;
}
.tabbrowser-tabs .tabbrowser-tab {
vertical-align: top !important;
-moz-box-sizing: border-box !important;
min-height: 30px !important;
max-height: 30px !important;
}
.tabs-newtab-button {
vertical-align: bottom !important;
height: 30px !important;
}
#tabbrowser-tabs tab {
min-width: ●●●px !important;
}

最後のmin-widthの項目は、タブの横幅の設定になります。
●●●の部分を環境に合わせて適切な数字に置き換えて下さい。
ちなみに、初期設定では、最大幅210px、最小幅100pxとなっています。

Tab Mix Plusのようにタブの横幅を可変にすることもできるようですが、私のスキルでは手に負えませんでしたので、参考URLの紹介にとどめておきます。
ただし、垂直方向に加えて水平方向のドラッグにも支障があるようです。
Reddit(リンク先は海外サイトです)



■未読タブの文字色を指定する *5

userChrome.cssに下記のように記述します。
.tabbrowser-tab[unread="true"] .tab-text {color: red !important;}

上記の例では、文字色を赤に指定しています。
お好みに応じて、色名やRGBで指定して下さい。

ver.61以降、unreadプロパティが廃止されたため、未読タブのスタイルを指定することはできなくなりました。



■タブを閉じるボタンを表示する条件を指定する *6

初期設定では、現在のタブのみに閉じるボタンが表示されますが、userChrome.cssを使用すれば、細かく指定できます。
お好みに応じてお選び下さい。
なお、2.と3.は組み合わせ可能です。

1. 現在のタブ以外にも常に表示する
.tabbrowser-tab:not([pinned]) .tab-close-button {display: block !important;}

2. 現在のタブ以外でマウスオーバー(マウスポインタが載っている)時のみ表示する
.tabbrowser-tab:not([pinned]):hover .tab-close-button {display: block !important;}

3. 現在のタブでマウスオーバー時のみ表示する
.tabbrowser-tab:not(:hover) .tab-close-button {display: none !important;}



■セッションを復元する

Firefoxが強制終了してしまった場合などに備えて、開いているタブと、それぞれのタブで開いたURLの履歴を保存、復元する機能です。
アドオン「Tab Session Manager」で代替することができます。



■閉じたタブを復元する

アドオン「Undo Close Tab」で代替することができます。
同種の機能を持つWebExtensions対応のアドオンは他にもありますが、アイコンを左クリックすると直前に閉じたタブを開く、右クリックすると最近閉じたタブの履歴から開きたいタブを選べる、という使用感のよさがポイントです。



■タブ / タブバーをクリックした時に指定したコマンドを実行する機能の代替

大きく分けて、2種類の代替案があります。

1つ目は、「Foxy Gestures」「Gesturefy」「smartUp Gestures」といったマウスジェスチャアドオンを使用する方法。
この中では、Gesturefyが日本語に対応しています。

2つ目は、右側のタブを全て閉じる、他のタブを全て閉じるといった機能を持つボタンを、設置できるアドオンを使用する方法。
Button Guy」「asukaze」という作者が、この手のアドオンを多く開発しています。

なお、ver.61以降では、about:configで「browser.tabs.closeTabByDblclic」を「true」に設定すると、ダブルクリックでタブを閉じることができます。



■不要なメニュー項目を非表示にする

userChrome.cssを使用すれば可能です。
詳細については、【小技】Firefox Quantumで不要な右クリックメニューを非表示にするにて解説していますので、ご参照下さい。



■ショートカットキーの割り当てを変更する

キーボードカスタマイズソフト「Keyboard Butler ~鍵盤の執事くん~」で対応可能です。
詳細については、【便利ツール】ショートカットを1つのキーで使えるようにする「Keyboard Butler ~鍵盤の執事くん~」にて解説していますので、ご参照下さい。



以上がTab Mix Plusの代替案のご紹介となります。

なお、この記事を作成するに当たって、下記のページを参考にさせていただきました。
*1 (ブラウザ) Firefox57、webextension対応オススメアドオン (2017) - NAVER まとめ
*2 Firefoxで「他のタブをすべて閉じる」時に出てくるダイアログを消す - あまたの何かしら。
*3 Firefox57で多段タブを使う方法 - 日々のつぶやき
*4 Firefox Quantum(ver57)でタブを多段(2段,3段…)にする方法! - Life+
*5 Firefox Quantum移行についての個人的備忘録と希望的観測 - アクエリアスよりポカリスエット
*6 Firefox57 Quantumの設定変更いろいろ - カメとヒヨコの海外ロングステイ
■雑記の最新記事

関連キーワード


[PR]
【期間限定】特典として今なら大増量600マイル獲得、さらに、登録の翌々月末までの獲得額に応じて最大2,400マイルを付与、仮想通貨ビットマイル1,000XBMもらえます

すぐたま
[PR]
毎日発表される抽選結果を確認するだけで、会員なら誰でも最高10万円のチャンス!コチラからご登録の上、登録した月の末日までに1ポイント以上獲得すると500ポイントGET
サイフもココロもハッピーに!ちょびリッチ
ちょびリッチ

コメント

  1. ありがとうございます。
    browser.tabs.loadDivertedInBackground が私が求めていたものでした。
    勝手にアクティブになるの邪魔過ぎる……

    2018/01/10 17:35

    匿名

  2. 匿名さん

    お役に立てたようで何よりです。
    コメントありがとうございました。

    2018/01/10 18:42

    ハタラキバチ

  3. 不便だなあと思いながら使っていましたが、ようやく解消されました。
    はやく拝見していればよかった。ありがとうございました。

    2018/03/30 16:58

    しろくま

  4. しろくまさん

    コメントありがとうございます。
    Firefox Quantumに対応したTab Mix Plusもリリースされましたが、機能はまだまだ限定的で、仕様による制約がある以上、今後も旧TMPと同等の機能を期待するのは難しいと思います。
    TMPに限らず、以前と同等の使い勝手を実現するには、アドオンだけでは不十分なので、情報収集が大切になりますね。

    2018/03/30 19:15

    ハタラキバチ

  5. TabMixPlusが使えないから未だにFireFox56を使い続ける日々(時折勝手に更新されるのでその都度ダウングレードしています)
    多段表示は何とかできるのですね。タブ全体を画面下部に移動することはやはりできないのでしょうか?
    それができるまでは移行する訳にはいかない…

    2018/05/01 21:54

    MMB

  6. MMBさん

    コメントありがとうございます。

    タブバーの最下部への移動については、私自身は必要としていないので調べてみたこともなく、可否はわかりませんが、タブバーをメニューバーの下へ移動させるスタイルシートは見かけたことがあるので、最下部への移動も可能なのかもしれませんね。

    現状として機能は限定的ながら、ver.57以降の仕様に対応したTab Mix WebExtensionもリリースされていますが、仕様上、旧Tab Mix Plusの機能を全て再現するのは困難だろうと、個人的には捉えています。
    https://addons.mozilla.org/ja/firefox/addon/tab-mix-plus-webextension/

    旧Tab Mix Plusにこだわるのであれば、派生ブラウザのWaterfoxをお試しになることをオススメします。
    https://www.waterfoxproject.org/en-US/

    2018/05/01 22:30

    ハタラキバチ

  7. 多段表示にすることは出来ましたが、表示する行数を設定出来ませんか?
    開いているタブ数かなり多いので

    2018/05/11 18:55

    うみにん

  8. うみにんさん

    コメントありがとうございます。
    タブの段数を設定することは可能なようですが、この記事に掲載しているコードより格段に複雑になりそうなので、現時点では当ブログで取り上げる予定はありません。
    「firefox quantum タブ 段数」などで検索すれば、コードを掲載しているサイトが見つかりますので、申し訳ありませんが、そちらを参考にして下さい。

    2018/05/11 22:12

    ハタラキバチ

  9. わかりました
    検索してみます
    ご返信ありがとうございました

    2018/05/11 22:40

    うみにん

  10. マウスオーバーでタブを選択

    どなたかご存知なら教えてください。
    旧Tab Mix Plusに「マウスオーバーでタブを選択」という機能があり、マウスでタブ上にカーソルをもっていくと、当該タブが選択され、ページがみれるものです。
    この機能の実現のための方策はないでしょうか。
    よろしくお願い致します。

    2018/06/13 09:52

    きくぞう

  11. きくぞうさん

    コメントありがとうございます。

    私自身がそのような機能を求めていないという事情もありますが、そのようなWebExtensions対応アドオンは、私は聞いたことがありません。
    私は専門的な知識を持っているわけではないので断言まではできませんが、WebExtensionsの制約下では、そのようなアドオンは難しいのではないかという気もします。

    アドオンではなくユーザースクリプトであれば、もしかしたら、きくぞうさんの求めることを実現できるものがあるかもしれませんが、その方面にはあまり詳しくないため、これといってアドバイスできることがありません。
    申し訳ありませんが、これより先はご自身でお調べになって下さい。

    2018/06/13 11:43

    ハタラキバチ

  12. 早速御返事いただき、有難うございました。

    2018/06/13 14:15

    きくぞう

  13. フォルダ名は
    大文字のChrome
    じゃなくて
    小文字のchrome
    でしょ。

    2018/07/27 22:44

    fg

  14. fgさん

    おっしゃる通り、本来は小文字で作成すべきなのでしょうね。
    大文字でも問題なくuserChrome.cssは適用されるので、今まで気付きませんでした。
    ご指摘ありがとうございました。

    2018/07/27 23:55

    ハタラキバチ

  15. ブックマークを新しいタブで開くときにアクティブになってしまう挙動が不便で困っていましたがこの記事に救われました!
    ありがとうございました。

    2018/09/20 22:28

    匿名

  16. 匿名さん

    お役に立てたようで何よりです。
    WebExtensions版もリリースされてから半年が経過しましたが、依然として機能は限定的で、開発は難航しているようですね。
    何とか頑張ってもらいたいところですが、過大な期待は禁物といったところでしょうね、残念ながら。

    2018/09/21 00:31

    ハタラキバチ

  17. こちらの記事のおかげで希望の動作はほぼuserChrome.cssとabout:configで実現できたのですが
    「ブックマークを現在のタブの右隣に新規タブで開く」という動作だけアドオンを使わないと出来ません。
    スペックが低いので使用するアドオンは可能な限り減らしたいのですが、
    この動作はcssかabout:configでは不可能でしょうか?

    2018/10/15 11:13

    匿名

  18. 匿名さん

    新しいタブを現在のタブの右隣に開くだけであれば、「新しくタブを開く位置を指定する」の項目で紹介しているアドオンをインストールしなくても、about:configで「browser.tabs.insertAfterCurrent」をtrueにすればOKです。
    なおかつ、「ブックマークを現在のタブではなく新しいタブに開く」の項目で紹介している通り、「browser.tabs.loadBookmarksInTabs」をtrueにすれば、ブックマークを現在のタブの右隣に開くことができるかと思います。

    2018/10/15 12:44

    ハタラキバチ

  19. 説明が足りず申し訳ありません。その両方を設定しているのですが、ブックマークだけは
    右隣でなく右端に開かれてしまうんです。
    設定通り新規タブは右隣に開きますし、ブックマーク自体も新規タブでは開かれるんですが、右端にいってしまうんです。

    2018/10/16 01:12

    匿名

  20. 匿名さん

    私の環境では、先のコメント通りに設定すると、ブックマークが現在のタブの右隣に開くことを確認しました。
    リリース版、Beta、Developer Edition、Nightlyのいずれも右隣に開きます(browser.tabs.insertAfterCurrentが実装されたのがver.61なので、ESRは検証対象外)。
    右隣ではなく右端に開くようにさせている何かがあるのだと思いますが、それがアドオンなのか、何かしらの設定なのか、それは私にはわかりません。

    2018/10/16 01:42

    ハタラキバチ

  21. アドオンは広告ブロックだけ、リフレッシュしてもprefs.jsを削除してみても変わらず、なのでこれはおかしいと思い、
    一度アンインストールすべくプログラムの削除を開いたところ、まさにその…ESRの文字がありました…。
    自分は普通のバージョンを入れて使っているとずっと思っていたので驚いています…。
    大変申し訳ありませんでした。
    あっさりとブックマークが右隣に開いてくれました。
    お手数をお掛けしました。ありがとうございました。

    2018/10/16 10:57

    匿名

コメントを書く

*「コメント」以外は空欄のままでもご投稿いただけます
管理者にだけ表示を許可する
[PR]
[PR]
[PR]