ろぼいんブログ
更新：

FirefoxをChrome風にするMaterialFox UPDATED

サムネイル

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

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

MaterialFox UPDATEDのChrome Refresh 2023のスクリーンショット
MaterialFox UPDATEDを適用したFirefoxのスクリーンショット

インストール方法

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

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

Firefoxのabout:configのスクリーンショット。画面中央に警告が表示されている

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

  • toolkit.legacyUserProfileCustomizations.stylesheets
  • svg.context-properties.content.enabled
  • layout.css.color-mix.enabled
Firefoxのabout:configの検索ボックスに「toolkit.legacyUserProfileCustomizations.stylesheets」と入力してtrueに設定しているようす

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

MaterialFox UPDATEDの配布ページのスクリーンショット

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

Firefoxのabout:supportページのスクリーンショット

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

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

try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}
ユーザープロファイルフォルダー
📁[ユーザープロファイルフォルダー]
└── 📁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のデザインです。

MaterialFox UPDATEDを適用したFirefoxのスクリーンショット
MaterialFox UPDATEDのデフォルトのデザイン
MaterialFox UPDATEDのChrome Refresh 2023のスクリーンショット
Chrome Refresh 2023を適用したMaterialFox UPDATEDのデザイン

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

about:configでuserChrome.ui-chrome-refreshを真偽値として作成しているようすのスクリーンショット

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

Chrome Refresh 2023が適用されたFirefoxのスクリーンショット

まとめ

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

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

#Firefox#Chrome

おすすめアイテム

※このリンクを経由して商品を購入すると、当サイトの運営者が報酬を得ることがあります。詳細はこちら。

このサイトを支援する

Buy Me a CoffeeまたはGitHub Sponsorsで支援していただけると、サイトの運営やコンテンツ制作の励みになります。定期的な支援と一度限りの支援がありますので、お間違いのないようにお願いします。

Buy me a coffee

著者のアイコン画像
ろぼいん
XMisskeyGitHubQiita

生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。

Webフロントエンドプログラマーで、テクノロジーに関する話題を追いかけています。動画編集やプログラミングが趣味で、たまにデザインなどもやっています。主にTypeScriptを使用したWebフロントエンド開発を専門とし、便利で実用的なブラウザー拡張機能を作成しています。また、個人ブログを通じて、IT関連のニュースやハウツー、技術的なプログラミング情報を発信しています。

関連記事

注目記事

最新記事