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

Caution

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

やり方

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

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

about:support

2. chrome という名前のフォルダーがない場合は、新しく作る
3. 以下のファイル名のファイルを chrome フォルダー内に作る

userChrome.css

4. 以下のコードを 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: 12px !important;  /* スピーカーアイコンを少し右にずらす */
    margin-right: 12px !important;
}

5. 以下にアクセス

about:config

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

toolkit.legacyUserProfileCustomizations.stylesheets

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

5~8

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