多段タブ化の導入方法については多くの方が詳しく解説してくれていますが、そのほとんどがWindows！
Macでも大方の流れは一緒なのですが、やっぱりちょっとやり方が違ってスムーズに行かない…。

ということで今回は、Mac派の方でもスムーズにFirefoxを多段タブ化できるよう、解説記事を作ってみました。

userChrome.js、config.js、config-prefs.jsをダウンロード

alice0775さんのGitHubページへアクセスし、現在のFirefoxのバージョンと一致するフォルダを開きます。
この記事の投稿時点ではFirefox 92.0なので「92」のフォルダです。

このフォルダの中には、

• userChrome.js
• config.js
• config-prefs.js

の3つのファイルが格納されているので、それぞれダウンロードします。

それぞれ、

• 92→userChrome.js
• 92→install_folder→config.js
• 92→install_folder→defaults/pref→config-prefs.js

の順に辿っていくとダウンロードできます。

以下は例として「userChrome.js」のダウンロードの方法です。

「userChrome.js」をクリック→右上の「Raw」を右クリック。

「別名でリンク先を保存」を押して、任意の場所に保存します。

同じ手順で「config.js」、「config-prefs.js」もダウンロードします。

多段タブ.zipをダウンロード

firefox用スクリプトアップローダーから、一番上にある「多段タブ.zip」をダウンロードします。

少し待つと↓の画面が出てくるので、「ファイルを保存する」にチェックを入れ「OK」を押します。
※デフォルトでは「アプリケーションで開く」にチェックが入っているので注意。

ダウンロードが終わったら、アドレスバーの右にあるダウンロードボタンを押し、「多段タブ.zip」を開きます。

MultiRowTabLiteforFx.uc.js

「多段タブ」ファイルが開くので、その中にある+マークが付いた方の多段タブフォルダを開きます。
今回は「多段タブ Firefox 89+」です。

ここで2つのことを決めなければなりません。

一つは、用意された6種類のスクリプトの中からどれを選ぶか。
「01～06 それぞれの組み合わせ.txt」を読んで好きなものを選びましょう。

とはいえ、「読んでもよく分からん！」という人はシンプルに、

• 段数を無制限にしたいなら「01」
• 段数を制限したいなら「02」（デフォルトでは5段）

を選ぶと良いと思います。
私は段数制限したいので「02」を選びました。

もう一つは、Proton UIにするかどうか。

何やらFirefox 89から導入されたデザインらしいのですが、ユーザーからは「タブの境界が不明瞭になって見にくい」「メニューやブックマークの行間が広くなって使いにくい」等、とにかく評価は散々なもの…。

試しに「…Proton falseにする」「…Proton UIにする」を両方表示してみましたが、確かに「…Proton UIにする」の方はタブの余白が広かったり、表示が見切れていたり等デザインが崩れていたので、無難に「…Proton falseにする」を選んだ方が良いと思います。

お好みの「Proton」フォルダ→先ほど選んだ番号のフォルダを開きます。

中に「MultiRowTabLiteforFx.uc.js」というファイルがあります。
このファイルはあとで使いますので、この場所にあることを覚えておいてください。

userChrome.css

「多段タブ」フォルダに戻り、「userChrome.js用スクリプトを利用する方法」フォルダの中に「userChrome.css」があることを確認します。

このファイルもこのあと使うので、フォルダを開いたままにしておきます。

「chrome」フォルダに格納

Firefox右上のハンバーガーメニュー（漢数字の三みたいなアイコン）をクリックし、「ヘルプ」→「他のトラブルシューティング情報」を開きます。

「アプリケーション基本情報」の真ん中ら辺にある「プロファイルフォルダー」欄の「Finderに表示」をクリックします。

開いたフォルダの中に「chrome」という名前のフォルダを新しく作ります。
もし既に「chrome」フォルダがあれば、それを使います。

先ほどダウンロードした、

• userChrome.css
• userChrome.js
• MultiRowTabLiteforFx.uc.js

の3つのファイルを「chrome」フォルダに入れます。

「Resources」フォルダに格納

ここがWindowsと違って分かりにくく、一番躓くところかもしれません。

「Dock」→「アプリケーション」→一番下の「Finderで開く」をクリック。

「Firefox.app」を右クリック→「パッケージの内容を表示」をクリック。

「Contents」→「Resources」フォルダ内に「config.js」を入れます。

同じ「Resources」フォルダ内の「defaults」→「pref」フォルダに「config-prefs.js」を入れます。

Firefoxを再起動

ここまで終わったら、一旦Firefoxを終了して再び開きます。

無事、多段になっていたら成功です。お疲れさまでした。

応用編

ここからは応用編です。

多段タブの段数を変更

「MultiRowTabLiteforFx.uc.js」をテキストエディットで開き、
/* 段数(デフォルト5段) */
と書かれた行の数字を好きな数値に書き換えます。

例えば、3行にしたかったら「3」と書き換えます。

タブの横幅を固定

「多段タブ」→「多段タブ Firefox 89+」→「タブの横幅固定.txt」に2通りの方法が記載されていますが、後者の「userChrome.css」に追記するやり方の方が簡単です。

「userChrome.css」をテキストエディットで開き、以下のコードを追記します。

.tabbrowser-tab[fadein]:not([pinned]) {
        min-width: 100px !important; /* 最小値 デフォルト  76px */
        max-width: 100px !important; /* 最大値 デフォルト 225px */
}

pxの数値はお好みで調整してください。
最小値・最大値をともに同じ数値にすると、横幅が固定されます。

バージョンアップで不具合が発生したら

Firefoxをバージョンアップした際、不具合が発生するときがあります（例えばタブの移動が出来なくなる等）。

そのときは、「多段タブ.zip」をダウンロードし直し、「chrome」フォルダ内の「MultiRowTabLiteforFx.uc.js」を新しいのに置き換えましょう。

手順は、『2.多段タブ.zipをダウンロード〜3.「chrome」フォルダに格納』と同じです。

今回参考にさせてもらった記事

Firefox92で多段タブ表示～新規用～

この記事はFirefox92から初めて多段タブにしたい人用です。以前のバージョンで既に多段タブにしている方はこちらの記事をご覧ください。各ファイルを上げてくださっている方々に感謝感謝です。 zipフォルダをダウンロード こちらにアクセスして...

kamehiyo.com

【Firefox150まで】userchrome.cssでカスタマイズして未読タブ、選択タブの文字色を変える方法

この記事ではFirefox150～72でuserChrome.css、userChrome.js、xx.uc.jsを使用したカスタマイズする方法について紹介します。userChromeなら標準機能や拡張機能で変更できない未読タブなどのフォン...

dev.macha795.com