Firefox 57 中使用 userChrome.css 改變介面外觀

Firefox 57 改變了 extension 中關於修改 UI 的權限,原先使用的 Roomy Bookmarks Toolbar 不會動了。在討論區中找到了 crdf 回覆的做法,加上一些我需要的修改後,整理如下面內容:

  1. 到 Porfile 資料夾中
    • 找不到的話可以瀏覽網址 about:support,然後在 “Profile Folder” 項目右邊的按鈕中開啟
  2. 找 “chrome” 資料夾,如果不存在的話,自己建立。
  3. 修改或新增純文字檔案 userChrome.css
  4. 重新開啟 Firefox

userChrome.css

.bookmark-item > .toolbarbutton-text {
margin-top: -1px !important;
}
#personal-bookmarks .bookmark-item:not([type="menu"]):not(:hover):not([open="true"]) > .toolbarbutton-text {
display: none !important;
}

#PlacesToolbarItems > .bookmark-item:not([type="menu"]):not(:hover):not([open="true"]) > .toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}

我習慣保留書籤資料夾的文字,所以裡面有 :not([type="menu"]) 的設定,如果都要隱藏,移除掉就好了

其他可參考的內容:

原始 crdf 回覆的內容:

Following these steps you will achieve the same result without the need for an add-on:

1. Open Firefox. Type about:support.
2. Find where is says "Profile Folder " and click "Open Folder".
3. If it does not exist create a folder called Chrome.
4. In it create a text file called userChrome.css
5. Copy all of this into it:

.bookmark-item > .toolbarbutton-text {
margin-top: -1px !important;
}
#personal-bookmarks .bookmark-item:not(:hover):not([open="true"]) >

.toolbarbutton-text {
display: none !important;
}

#PlacesToolbarItems > .bookmark-item:not(:hover):not([open="true"]) >

.toolbarbutton-icon[label]:not([label=""]) {
margin-inline-end: 0px !important;
}


6. Save the file.
7. Restart Firefox.

That worked for me