[Firefox Quantum] タブのマウスオーバー時にクローズボタンを表示する方法

概要

これまで Tab Mix Plus を利用してクローズボタンを表示させていたのだが、最新のFirefoxではサポートされなくなった為、ある一定のタブを開くとクローズボタンが見えなくなってしまった。

設定

userChrome.cssにスタイルを定義するだけで表示可能になる。

userChrome.cssを作成する

プロファイルフォルダ内にuserChrome.cssがなければ作成する必要がある。
(以下はmacOSでのファイルパス)

/Users/hiro/Library/Application Support/Firefox/Profiles/xxxx.default/chrome/userChrome.css

プロファイルフォルダは、トラブルシューティング情報の「プロファイルフォルダー」から開くことができる。

  1. Firefoxのヘルプメニュー
  2. トラブルシューティング情報
  3. プロファイルフォルダー

プロファイルフォルダーの直下にchromeフォルダがなければ作成し、さらにuserChrome.cssを作成する。
Windows/macOS ともに同じ方法で良い。

追加するスタイル

下記のスタイルをuserChrome.cssへ追加する。

.tabbrowser-tab:not([pinned]):hover .tab-close-button {
  display: block !important;
}

これを追加することで「タブをマウスオーバー時にクローズボタンを表示」する事ができる。
Firefoxを再起動して反映する。