简介

• 我有个不用的副屏，平时用来刷刷 instagram 或者 behance 之类的，配合自己些的自动滚屏脚本和 css，实现一个全屏的自动刷图。
• 但因为偶尔也会在这个屏上放点别的窗口，所以全屏有时候切换不方便，就希望 firefox 能自动隐藏顶部，以提供更大的展示空间。
• 现在实现的效果就是窗口顶部 15px，鼠标悬停可以恢复整个顶部工具栏的显示，移出后则自动隐藏，整个窗口都是浏览器的内容区，接近一个无边窗口。
• 压缩到 15px 高度是为了不影响原本网页上的一些顶部按钮和输入等。

方法

• Step 1:

  • 地址栏输入 about:config
  • toolkit.legacyUserProfileCustomizations.stylesheets > true

• Step 2:

  • 地址栏输入 about:support > Click on “Profile Folder” -> “Open Folder”
  • 在这个打开的目录下建文件夹 “chrome”, 然后把下面代码存为 “userChrome.css” 放在 “chrome” 内.

/* Firefox Hide Header / Navigator / Top / Tabs / Address / Toolbox  Step 1: about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true  Step 2: about:support > Click on "Profile Folder" -> "Open Folder" Create folder "chrome" here, and put this file in (as "userChrome.css").  More: Tutorial: How to create and live-debug userChrome.css : FirefoxCSS https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/ */ @-moz-document url("chrome://browser/content/browser.xul"), url("chrome://browser/content/browser.xhtml") {     /*     隐藏顶部栏     第一行 10px 是顶部触发显示的高度。     下面的 99px 是顶部栏的预估高度。受各种自定义设置的影响，请自行调整。     如果只需要隐藏地址栏，保留标签栏，用 #nav-bar，然后可能需要适度调节。     */     #navigator-toolbox {         max-height: 15px !important;         z-index: 1000 !important;         background: black !important;         opacity: 0 !important;         margin-bottom: -99px;         transition: all .2s !important;     }      #navigator-toolbox:hover {         max-height: none !important;         opacity: 1 !important;     } } 

• 一开始有参考 t/669207
• 自动滚屏的油猴脚本放 greasyfork 了，不想关联不同平台的账号，看缘分吧。
• 额外的参考 如何使用 userChrome.css 自定义 Firefox 的用户界面 | 阳光盒子
• 有兴趣深入研究的，这里有比较完整的调试方法。Tutorial: How to create and live-debug userChrome.css : FirefoxCSS