Firefox で Chrome のように、オーディオ再生中に元アイコンが表示されるようにする

Caution

※ 以下の文章はリンクの要約
・リンク：https://chatgpt.com/share/66efc32a-3b28-8003-a57d-de70af5b9dd4
・また、Chromeと同じく、スピーカーアイコンを一番右に行かせたかったですが、上手くいきませんでした
・そのため、横に出してます
・loading時、重なって表示されてしまいます

やり方

・カスタムCSSを使う
・Firefoxでは、カスタムCSSを使ってタブやそのアイコンの見た目を変えられる

1. 以下にアクセスし、 プロファイルフォルダー を開く（about:support内でプロファイルフォルダーで検索すれば出てくる）

about:support

2. プロファイルフォルダー内に以下のフォルダー、ファイルがない場合は、新しく作る

chrome/userChrome.css

ファイルパス：
Mozilla/Firefox/Profiles/u55...default-release-.../chrome/userChrome.css のような形
3. 以下のコードを userChrome.css に書く

.tab-icon-image {
    display: block !important;   /* 元のアイコンを表示 */
    visibility: visible !important; /* 非表示にならないようにする */
    opacity: 1 !important;       /* 透明にならないようにする */
    z-index: 5 !important;       /* スピーカーアイコンより背面に配置 */
    position: relative !important; /* 相対位置に設定 */
    left: -5px !important;       /* アイコンの位置調整 */
}

/* スピーカーアイコンの調整 */
.tab-icon-overlay {
    left: 15px !important;  /* スピーカーアイコンを少し右にずらす */
    margin-right: 20px !important;
}

4. 以下にアクセス

about:config

5. 「動作保証外になります」と警告が出ますが、「注意して使用する」をクリック
6. 検索ボックスに以下を入れ、「true」になっているか確かめる

toolkit.legacyUserProfileCustomizations.stylesheets

7. false になっていたら、ダブルクリックして true に変える
8. Restart Firefox

4~7

Firefox 69以降、カスタムCSSをEnableにするために必要らしい