Firefox隐藏浏览器内容区域以外的所有内容

是否有可能在Firefox中隐藏所有边框和条形，例如地址栏，导航栏，窗口标题和标签，因此其余区域仅仅是浏览器的内容区域？

我想为我编写的Web应用程序制作电影，但必须以比应用程序本身更大的分辨率进行拍摄。我只是想在没有所有浏览器内容的背景下显示应用程序。

最好的方法是通过键盘快捷键，以便我可以重新启用所有功能。

最简单的方法是在Firefox中安装相关的加载项。

对于以下任何设置，请安装各自的加载项。Firefox可能需要重新启动，但对于Firefox Quantum通常不需要。快捷键（如果有）可以从相应的加载项的“加载项管理器”>“扩展”中进行更改。

Firefox的键盘快捷键部分经过重新设计，可以在一个地方管理所有快捷键，自Firefox 66以来，该功能就已可用。

对于Firefox旧版

安装程序A使用以下加载项：

• 隐藏导航栏，最新测试为1.41.1-signed
• 隐藏标签栏，最新测试为2.1.0.1-signed
• HideScrollbars，最新测试为0.2.1符号

例如，我使用了单独的键F3并F4分别切换了导航菜单和标签栏（通过“隐藏导航栏”和“隐藏标签栏”）。要隐藏条，请一一按下分配的键。这将使Firefox仅具有可见的标题栏或窗口装饰。

限制：由于两次之间的延迟，分配相同的密钥不能很好地工作。即使同时按下单独的键，结果也是相似的。无论哪种方式，这些条之一都不会与用户一起隐藏和玩捉迷藏。

可与Firefox 56及更早版本（不推荐使用）一起使用，但从Firefox附加组件中不再可用。在Linux上与Firefox 41.0一起进行了全面测试。没有截图。

对于Firefox Quantum

安装程序B使用以下加载项：

• 不带工具栏的新窗口

转到HTTP，HTTPS或localhost上的网页，然后使用键盘快捷键或单击工具栏上的相应图标或上下文菜单中的“没有工具栏的新窗口”。该网页还将在新窗口中打开，仅包含可见的标题栏和垂直滚动条。

键盘快捷键：Shift+ Alt+ N（1.3.0中的默认设置）

限制：此加载项根本不会打开本地文件系统（file：///）和内置页面（about：*）上的任何页面。

适用于Firefox 42及更高版本。在Linux上使用Firefox 69.0测试了1.3.0。

安装程序C使用以下加载项：

• 弹出窗口由Ett Chung提供

转到网页，然后单击工具栏上的相应图标，或在上下文菜单中单击“将当前选项卡移动到弹出窗口”或“弹出/合并当前页面”。网页将移动到仅带有可见标题栏和垂直滚动条的新窗口。要将新窗口还原为普通选项卡，请再次单击上下文菜单中的“弹出/合并当前页面”。

键盘快捷键：未分配（默认值为0.0.8）

限制：弹出窗口将始终位于Firefox原始窗口的顶部，无法更改。

适用于Firefox 53及更高版本。在Linux上使用Firefox 69.0测试了0.0.8。

对于不带附件的Firefox

我在下面发布了一个单独的答案（单击或向下滚动），该答案适用于任何版本的Firefox，但不是最简单的方法，也没有键盘快捷键。

本机方式是在Firefox中使用自定义样式表： userChrome.css

在Firefox 69及更高版本中，Firefox默认不会加载userChrome.css。要使自定义样式表再次生效，请about:config在Firefox中打开并将首选项设置toolkit.legacyUserProfileCustomizations.stylesheets为true

在更新此答案之前，Mike G早些时候写了一个后续答案。

怎么运行的

以下代码块的内容userChrome.css将隐藏Firefox中的标签栏，导航栏和滚动栏。确保使用有效的元素名称和ID。

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

/*
 * Hide tab bar, navigation bar and scrollbars
 * !important may be added to force override, but not necessary
 * #content is not necessary to hide scroll bars
 */
#TabsToolbar {visibility: collapse;}
#navigator-toolbox {visibility: collapse;}
browser {margin-right: -14px; margin-bottom: -14px;}

限制：没有键盘快捷键。繁琐地启用或禁用按需。

• 要恢复默认界面，请重命名userChrome.css为，userChrome.tmp然后重新启动Firefox以使其生效。

• 要与具有默认界面的另一个Firefox实例并排使用，请使用单独的配置文件。

所有配置文件都存储在配置文件文件夹中，该文件夹可从Firefox使用菜单栏或工具栏找到，然后导航至“ 帮助”>“故障排除信息”。

如何设置和使用

以下是与系统平台无关的通用步骤。

1. 运行Firefox的配置文件管理器，然后创建一个名为“ hidebars”（任何选择的名称）的新配置文件，然后关闭配置文件管理器。

2. 运行文件管理器，然后打开在步骤1中创建的配置文件文件夹。

3. 在新的配置文件文件夹下，创建新文件， chrome/userChrome.css包括父文件夹（chrome如果不存在）。

4. 复制并粘贴内容的userChrome.css在步骤3中从上方到所创建的文件。

5. 最后，保存并关闭文件。

要开始使用，请使用新的配置文件运行Firefox实例。

以下屏幕截图组合显示了Linux上的Firefox Legacy（左）和Firefox Quantum，当使用自定义样式表时，它们均以小窗口大小浏览。

适用于所有版本的Firefox，但Firefox 69及更高版本除外，现在默认情况下忽略userChrome.css。在Linux上使用Firefox 10、20、50（Firefox Legacy）和60、63、69（Firefox Quantum）进行了测试，所有这些似乎都能正常工作。

参考文献

• 在Firefox支持论坛上，user1929的这个答案提到了#TabToolbar元素名称和ID，用于修改标签栏。

• Timvde在GitHub上的此自定义文件提到了#navigator-toolbox用于修改导航栏的元素名称和ID。

• 在Firefox支持论坛上，由cor-el给出的答案提到了#content browser用于修改滚动条的元素名称和ID。

• w3schools上overflow不需要了解CSS溢出。

• w3schools上的CSS可见性属性，以了解其价值visibility。

• 在CSS中使用“！important”有什么含义？!important无需了解关于Stack Overflow的知识。

• Firefox 60破坏了hide scrollbar css和Hide Scrollbar Firefox 60：reddit.com上的FirefoxCSS都建议删除#content并离开，browser以便正确隐藏scollbar。

• Firefox 69：默认在ghacks.net和PSA上禁用userChrome.css和userContent.css ：Firefox v69用户必须设置一个首选项toolkit.legacyUserProfileCustomizations.stylesheets，以启用reddit.com上的userChrome.css和userContent.css都注意到about:config。

答题者的注释：两年后才写了这个答案，直到我建议在第一个答案中使用附加组件之后。从那时起，基于userChrome.css编写了更多答案，而不是改进此答案。因此，此答案现在是社区Wiki，以便信誉最低的任何人都可以改善此帖子，以适应Firefox中的最新更改。

我知道这太晚了，但是我为此做了一个书签，它不需要插件，也不需要下载:)

将以下JavaScript代码另存为小书签，然后在要在新的最小窗口中查看的页面上单击它：

javascript:void%20function(){window.open(window.location.href,Math.random(),%22menubar=1,resizable=0%22)}();

单击此处使过程更轻松！ | JS小提琴

注意：这在所有浏览器中都适用

我喜欢Firefox和Vivaldi。Vivaldi（我是鼠标手势的用户）的最佳功能之一是它具有如此众多的选项（侧栏，书签，地址栏，状态栏等），可以调整和移动...

一种快捷方式是“隐藏用户界面”。一切都消失了...所以当您不需要查看选项卡/工具栏等时，我只用鼠标弯曲一下，就剩下页面和窗口了。

魔法。

更好的是，窗口颜色可以从网页中获得提示，并且效果很好-融合得很好。

我知道已经晚了，但也许有人会喜欢。

如果您只想隐藏Firefox UI元素直到需要它们，那么也许我userChrome.css适合您。（在FF 70.0.1上工作）

• 如果只有一个标签，则标签栏将被隐藏
• 隐藏地址栏，直到使用Ctrl-L，F6等将其聚焦
• 右侧的滚动条已删除

要隐藏标签栏，您需要使用Firefox的浏览器customize（只需在标签栏上单击鼠标右键）以拉出newtab (+) button该标签栏，并确保您使用的是系统菜单Titlebar（以便最小，最大窗口，并且关闭按钮不在标签栏上）。否则，这些按钮将阻碍隐藏。

有关在何处放置userChrome.css文件以及如何激活文件的说明，请参见以下出色的文章：https : //superuser.com/a/1269912/1107142

我的简要总结：

• 在about:config页面上切换toolkit.legacyUserProfileCustomizations.stylesheets到true
• Profile Directory从about:support页面获取
• chrome在您的目录中创建一个名为Profile Directory
• 将userChrome.css文件放在该chrome目录中

我的userChrome.css，随意复制并粘贴：

/* namespace required, do not remove */
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* hide tabbar if only one tab */
/* note: won't hide unless newtab (+) button is removed from tabbar and */
/* the system title bars are used (use window manager to disable window */
/* titlebar decorations if desired). */
/* use 'customize' from menu and just drag the (+) button off the tabbar */
/* on the bottom options bar make sure titlebar is on */     
/* setting density to compact is also nice */
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
    min-height: 0 !important;
}
#tabbrowser-tabs tab {
    min-height: var(--tab-min-height)
}
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
    visibility: collapse;
}

/* autohide addressbar */
/* will show address bar when focused with alt-d,ctrl-l,ctrl-k, or f6 */
/* I don't like the mouse hover activation, but follow comments below */
/* if that's something you'd like. */
/* Also,can change nav-bar to navigation-toolbox to autohide all toolbars */
#nav-bar {
    height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important;
    /* for mouse hover activation would need some height */
    /* disable above height: 0px line and add: */
    /* height: 3px !important; */
}
/* for mouse hover activation need to add: */
/* #nav-bar:hover, */
#nav-bar:focus,
#nav-bar:focus-within,
#nav-bar:active {
    height: auto !important;
}

/* remove right hand scrollbar */
browser {
    margin-right: -15px;
}

我知道最好的选择是全屏模式，F11在所有现代浏览器中都可以使用全屏模式。但是，这将隐藏您的桌面背景和其他应用程序，而这可能不是您想要的。它只会用白色（或Web应用程序样式表中的背景颜色/图像）填充Web应用程序内容周围的空间。

您可以从命令行运行应用程序窗口

“ c：\ Program Files \ Mozilla Firefox” \ firefox.exe -chrome“ http://www.example.com ”

并放置在具有所选背景的扩展桌面上。

有关如何在Firefox Quantum（> = 57）中执行此操作的问题可能回答了此问题（Firefox Quantum（> = 57）如何切换所有工具栏？（使用键盘快捷键，如F11，但在窗口中，而不是全屏显示））

F11 /全屏有时是不切实际的。
如果您只想在57 之前的 Firefox版本中切换工具栏，则可以使用附件“ Dorando keyconfig”：

1.在Dorando“密钥编辑器”中指定一个脚本：

var s = document.getElementById('status-bar');
s.hidden = !s.hidden;
var b = document.getElementById('PersonalToolbar');
b.collapsed = !b.collapsed;
var nb = document.getElementById('nav-bar');
nb.collapsed =!nb.collapsed
var tb = document.getElementById('TabsToolbar');
tb.collapsed =!tb.collapsed

2.通过Dorando插件界面将其映射到键盘快捷方式

您应该尝试--kiosk使用新的Firefox v.71中的新命令参数

https://www.mozilla.org/zh-CN/firefox/71.0a1/releasenotes/

请注意，以上clearkimura的答案（建议使用样式表）在以后的Firefox版本中需要进行一些调整。完成此操作后，该解决方案便对我有效。在此网页上：

设置Firefox在启动时寻找userChrome.css（更新5/24/2019）

为了使大多数用户可以更快地启动，Firefox 69将不再自动查找该文件。您需要告诉它外观。就是这样：

1. 在新标签页中，键入或粘贴 在地址栏中 about：config，然后按Enter / Return键。单击接受风险的按​​钮。
2. 在列表上方的搜索框中，键入或粘贴userprof然后在过滤列表时暂停。如果您在列表上没有看到任何内容，请忽略其余说明。您现在可以关闭此标签。
3. 双击 toolkit.legacyUserProfileCustomizations.stylesheets首选项，将值从false切换为true。

该更改将在您下次启动时生效。