Firefox の userChrome.css

数か月前に Windows 10 で設定した後、意図せず Mac Catalina でも設定することになったのだけど、Windowsで設定したときあまりメモしてなくて Macで設定するときあれこれ迷ってしまったのでまとめを書いておく。

userChrome.css とは

ブラウザ Firefox の見た目を調整するための CSS ファイル。

userChrome.css の設置場所を知る方法

Firefox を起動して、URL欄に about:profiles と入力すると、どのプロファイルが利用されているか表示されるので、そのディレクトリに userChrome.css ファイルを置く。

Firefox のバージョンによってちょいちょい違っていたりするので、いったん現状の最新版(Firefox 81.0.2)で動いているもの。

Windows: C:\Users\{USER}AppData\Roaming\Mozilla\Firefox\Profiles\{HOGEFUGA}.default-release\chrome\userChrome.css

Mac: /Users/{USER}/Library/Application Support/Firefox/Profiles/{HOGEFUGA}.default-release/userChrome.css

Windows の場合だと、chrome ディレクトリが存在しなかったりするかもしれないので、無ければ作る。

userChrome.css の中身

ブラウザの id/class の見方

userChrome.css を書く場合に、ブラウザの構成要素となるHTMLを覗きたい。

devtoolの設定を開いて、以下のふたつのオプションを有効にする。

• Enable browser chrome and add-on debugging toolboxes
• Enable remote debugging

今度はFirefoxブラウザのメニューから Web Developer → Browser Toolbox と選択して進むと、Incoming Connection を確認するダイアログが出てくるので「OK」を選択する。

すると、いつものdevtoolのパネルとは別のパネルに、ブラウザ自体のHTMLが展開されて表示されるので、いじりたい要素を探して、userChrome.cssに記述すればできあがり。

注意点

各プロファイルが読み込みなおされるタイミングが不明なところがあって、通常、userChrome.css の変更内容は Firefox 自体の再起動で反映されるが、どこかにキャッシュされてるのか謎だけど、PC再起動しないと反映されなかったことがあるのでなかなか反映されない時は試してみるといいかもしれない。大抵はブラウザ再起動で反映される。

Mac の場合

Mac の Firefox 113 だと、toolkit.legacyUserProfileCustomizations.stylesheets という設定が about:config にあって、これを true に設定しないと userChrome.css が有効にならない。

ユースケース

自分は Tree Style Tab という Extension を利用しているので、デフォルトの上部の横並びタブを消すのに使っている。あとはメニューバーも使わないので消してる。

Chrome ブラウザに縦タブ拡張が出て、上のタブ消せたら、こういう設定しなくてよくなるんだけどなあ。