FirefoxをChrome風にするMaterialFox UPDATED

MaterialFox UPDATEDは、ChromeなどのGoogle製品で採用されているMaterial Designからインスピレーションを得た、Firefox用のユーザーCSSです。

すでに更新が止まっているMaterialFoxをフォークしたもので、頻繁に更新されています。また、MaterialFox UPDATEDは「Chrome Refresh 2023」と呼ばれる最近のChromeのデザイン変更にも対応しています。

インストール方法

MaterialFox UPDATEDを使えるようにするには、Firefox側でいくつかの設定が必要です。

まずは、Firefoxのアドレスバーにabout:configと入力して開きます。警告が表示されるので、内容を読んで理解したら［危険性を承知の上で使用する］を押して次に進みます。

ページ内の検索ボックスに次のそれぞれの項目を入力し、それらをtrueに設定します。

• toolkit.legacyUserProfileCustomizations.stylesheets
• svg.context-properties.content.enabled
• layout.css.color-mix.enabled

次に、MaterialFox UPDATEDの配布ページを開き、［Assets］のchrome.zipをダウンロードします。

Firefoxに戻り、about:supportを開きます。［プロファイルフォルダー］の［フォルダーを開く］ボタンをクリックするとフォルダーが開くので、そのフォルダーにchromeフォルダーを作成します。

chrome.zipを解凍し、その中のファイルやフォルダーをchromeフォルダーにコピーします。

バージョンによって変わる可能性がありますが、コピー後は概ね次のような構造になっているはずです。

📁[ユーザープロファイルフォルダー]
└── 📁chrome
     ├── 📁fonts
     │    └── [フォントファイルたち]
     ├── 📁icons
     │    └── [アイコンファイルたち]
     └── custom_example.css
     └── userChrome.css
     └── user-chrome.css
     └── userContent.css
     └── user-content.css

最後に、Firefoxを再起動します。これでMaterialFox UPDATEDが適用されます。

その他の設定

MaterialFox UPDATEDには、いくつかの設定が用意されています。これらは、about:configで該当する項目をtrueまたはfalseにすることで設定できます。

ここでは一部の設定のみ紹介しますが、すべての設定は公式リポジトリーで確認できます。

Chrome Refresh 2023の有効化

Google Chromeは2023年にデザインを大幅に変更しました。このデザイン変更は「Chrome Refresh 2023」と呼ばれています。MaterialFox UPDATEDは、デフォルトでは変更前のデザインを採用しています。好みに応じて、Chrome Refresh 2023のデザインに変更できます。

次の画像はそれぞれ、Chrome Refresh 2023の適用前と適用後のMaterialFox UPDATEDのデザインです。

Chrome Refresh 2023を有効化するには、about:configの検索ボックスにuserChrome.ui-chrome-refreshと入力します。［真偽値］が選択されていることを確認したらプラスボタンをクリックします。（画像は古いバージョンのためuserChrome.chrome-refresh-2023となっています）

userChrome.ui-chrome-refreshがtrueに設定されていることを確認してください。Firefoxを再起動しなくても、すぐにChrome Refresh 2023のデザインに変更されます。

まとめ

MaterialFox UPDATEDは、ChromeなどのGoogle製品で採用されているMaterial Designからインスピレーションを得た、Firefox用のユーザーCSSです。

頻繁に更新されているので、ぜひ使ってみてください。