気を散らすノート

色々と散った気をまとめておくところ.論文読んだり自分で遊んだりする.たぶん.

userChrome.css と userContent.css

自分 advent calendar 2019 の 4日目の記事です(3日坊主とはならなかった,いぇい!)

Firefox には userChrome.css と userContent.css という仕組みがあって,それぞれブラウザUI と表示するサイトに自分で書いた css を適用できます.stylish とかほど大仰でなく,導入しやすい上に痒いところに手が届くので便利なわりに,案外言及が少ない気もするので紹介します.

(最近デフォルトでは読まなくなったらしい? →PSA: Firefox v69 users will have to set a pref to enable userChrome.css and userContent.css : FirefoxCSS 僕いつ設定したっけな…)

設定の仕方

~/.mozilla/firefox の下に,各 profile を収めたディレクトリがあります(profile って何?という場合は,多分 [適当な文字列].default というディレクトリ).この下には addons.json, storage/, などなど色んなファイルが格納されていますが.ここに chrome/ というディレクトリを作ります (~/.mozilla/firefox/profile_name.default/chrome/).ここの直下に userChrome.css, userContent.css というファイルを作ればよい.

あとはデフォルトでは読み込まないようになったみたいなので,上記 reddit を参考に設定を変更します.

設定例

いくつか自分が使っている設定を紹介します.

たとえば,private browsing をよく使うのですが,「今開いてるこのウィンドウがどっちなのか」が案外わかりづらい.

f:id:lesguillemets:20191204111309p:plain
デフォルトでは元の theme がそのまま見える.ちなみにずっと愛用してるHexagon City

これを,private なときは上部の色を変えて分かりやすいようにしてみたいとします.

Redditこの投稿を参考に userChrome.css を編集

#main-window[privatebrowsingmode="temporary"] #navigator-toolbox {
   background-color: #CE85FF !important;
}
#main-window[privatebrowsingmode="temporary"] #nav-bar {
    background-color: #CE85FF !important;
}

edit 13 Jan 2020: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); を含めていましたが,そもそも不要であった説があるほか,FF72.0 以降(多分)この行があると正しく機能しなくなっています.

こんな感じになります.

f:id:lesguillemets:20191204111312p:plain
それっぽい色が常に見えるように


あるいは,Tree Style Tab を使っていて,タブを表示しているサイドバーの幅をもっと小さくしたいとき,wiki に記載あるとおり

#sidebar {
    min-width: 0px !important;
}

f:id:lesguillemets:20191204113423p:plain
サイドバーをぐっと縮められる


さらに,たとえば twitter がアイコンの角を丸めるのが許せないとき.今度は userContent.css

/* 最近 twitter は class 名とかが入り組んでてピンポイントで狙いづらい */
@-moz-document domain(twitter.com) {
    .r-sdzlij { /* avator icon and others*/
        border-radius: 0px !important;
    }
}

f:id:lesguillemets:20191204113626p:plain
no more border-radius


ログインしてないときに(するつもりはない) medium が出してくるヘッダフッタが邪魔すぎるとき

@-moz-document domain(medium.com) {
    div.metabar { visibility: collapse; }
    div.js-stickyFooter { visibility: collapse; }
}

などなど,ちょっと調べると色んな不満を直せるのでとてもよいのです.詳細は省きますが,ブラウザUIにもインスペクタが及ぶように設定することができ,どの要素に当てればよいかは(ググってわからなければ)それで検討できます.

資料