わたしの userChrome.css

いろいろあって、ChromeからFirefoxに移行した。概ね問題ないがいくつかChromeっぽくしたいところがあったのでuserChrome.cssをいじったら大体満足できた。ついでにその他の部分もいじった。

Chromeを完全再現したいなら MaterialFox かその後継を使うのがいいと思うが、私には合わなかったので詳しく調べてはいない。

環境

• Windows 11
• Firefox 122.0.1

userChrome.css のいじり方

userChrome.cssの有効化、カスタマイズのためのインスペクターの出し方については以下を参照

https://www.reddit.com/r/FirefoxCSS/comments/73dvty

mac

https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html

• DevToolsの設定からリモートデバッグを許可
  
  

非アクティブ時の背景色をChromeっぽくする

beforeとafterの合成 下はChrome

:root {
    --toolbox-non-lwt-bgcolor: rgb(221, 227, 233) !important;
}

非アクティブ時に薄くなるのが見づらかったのでChromeっぽい色にした

ブックマークツールバーの余白を大きくする

beforeとafter

:root {
    #personal-bookmarks {
        margin-bottom: 2px;
    }
    #PlacesToolbarItems {
        gap: 2px;
    }
    toolbarbutton.bookmark-item:not(.subviewbutton) {
        padding: 6px !important;
    }
}

アクティブタブのシャドウを若干マイルドにする

beforeとafter

:root {
    #tabbrowser-tabs:not([noshadowfortests])
        .tab-background:is([selected], [multiselected]) {
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.25) !important;
    }
}

デフォルトはrgba(0, 0, 0, 0.4)

コンテキストメニューの項目非表示

デフォルト

テキスト選択時

画像選択時

ここもいじれるようなので使わないやつを消した。Chromeだと選択した文字列をググろうとして印刷しまくってたので消せて嬉しい

:root {
    /* 画像の URL をメールで送信... */
    /* 動画の URL をメールで送信... */
    /* 音声の URL をメールで送信... */
    #context-sendimage,
    #context-sendvideo,
    #context-sendaudio,
    /* 選択した部分を印刷... */
    #context-print-selection,
    /* ページのソースを表示 */
    #context-viewsource,
    /* 選択した部分のソースを表示 */
    #context-viewpartialsource-selection,
    /* 選択範囲を 英語 に翻訳 */
    #context-translate-selection,
    /* スクリーンショットを撮影 */
    #context-sep-screenshots,
    #context-take-screenshot,
    /* 画像をデスクトップの背景に設定... */
    #context-sep-setbackground,
    #context-setDesktopBackground,
    /* 画像の情報を表示 */
    #context-viewimageinfo {
        display: none;
    }
}