Firefoxのアドオン独自ページのCSSを変更

昨日の夜の予報では、朝には雨が止むようだったけれど、寝ている間に変わったらしく、また、熱帯低気圧に変わった台風1号の影響もあってか、お昼過ぎまで雨が降ったり止んだり。

午後過ぎに雨は止んだ。

Firefoxのとあるアドオンは、Webページではなく、独自ページを表示して、情報を見せてくれる。

ページの行数が多くなると、スクロールバーの位置で、今どの辺か確認するのだけれど、スクロールバーの色が薄く、すこぶる見にくい！

また、Windows 11のお節介機能、スクロールバーの自動開閉(?)や、色が薄めになっていたりするから、余計に見づらくなっている。

例えば、これ。

右側にスクロールバーがあるんだけれど、見にくくない？

これも。

背景色にかなり近い色になっているから、判別しにくい。

作者は、スクロールバーを目立たないように、ということで、色を薄くしているんだろうけれど、ご本人は問題ないのか？と思ってしまう。

なんとかして、このスクロールバーを見やすくしたいと思って、Firefox本体の設定でなんとかならんかと四苦八苦。

「about:config」に、スクロールバーの形やダーク・モードのオン・オフはあるんだけれど、色そのものの変更は出来ないようだ。

とりあえず、「about:config」で変更してみた結果、こうなった。変更方法は後述。

これだけでも、随分とマシになった。

スクロールバー自体の色変更が出来ればいいけれど、出来そうにない。

なんとかならんかなぁ、と思案していると、確か、アドオン自体のCSSの変更方法があるんじゃなかったっけ？と思って探してみると、あった！

先ほど変更したものを元に戻して、アドオン自体のCSSを変更した結果、

おお、めっちゃ見やすくなった！

と思うのだけれど、1番最初のものと比較してどうでしょう？

見やすくなったよね？ね？？ね？？？(笑)

そして、Firefox本体のスクロールバーを変更した組み合わせでは、

更に見やすくなった。

これで、そのアドオンのページの行数が増えても、今どこにいるかわかりやすくなったのである。

では、変更方法。

まずは、Firefox本体のスクロールバーの変更について。

「about:config」を開き、

「widget.non-native-theme.scrollbar.size.override」を「好きな幅の数値」

「widget.non-native-theme.scrollbar.style」を、以下の「1～5」のどれかにする

0 – Default OS
1 – MacOS style
2 – GTK style
3 – Google Android style
4 – Windows 10 style
5 – Windows 11 style

「widget.non-native-theme.win.scrollbar.use-system-size」を「false」

上記の設定値は、こういう感じ。

次に、Firefoxのアドオン独自ページのCSSを変更する方法。

「プロファイルのフォルダ\chrome\userContent.css」がなければ、作成し、以下を必要に応じて変更して追記。

@-moz-document url(moz-extension://アドオンのURL/そのページ.html){
要素名 {
scrollbar-color: #777 #f2f2f2 !important;
}
}

「アドオンのURL」は、ロケーションバーに出ているものを記述。

「要素名」は、「scrollbar-color」が指定されている要素名を記述。
わからなければ、「*」にすれば、そのページの全てのスクロールバーの色が変更される。

こういうことも出来るようだ。

もし、全てのアドオンのページに対して反映させたかったら、正規表現を使って、こういう指定が出来るようだ。

@-moz-document regexp("moz-extension://.*"){
* {
scrollbar-color: #777 #f2f2f2 !important;
}
}

こうすれば、アドオンの全てのページのスクロールバーの色を変更出来る。

Firefoxの「about:config」では、スクロールバーの色の変更は出来なかったけれど、もし、アドオンとかそんなこと関係なしに、普通のWebページも含め、全てのスクロールバーの色を変更したい場合は、これでいいと思う。

* {
scrollbar-color: yellow red !important;
}

認識しやすくするために、黄色(バー本体の色)と赤色(バーの背景の色)にしているので、必要に応じて変更。

よくやりがちだけれど、「!important」を忘れないように。

これで、Firefoxのスクロールバーの色変更も出来るようになる。