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

Question

是否有可能在 Firefox 中隐藏所有边框和栏，如地址栏、导航栏、窗口标题和选项卡，所以剩下的区域只是浏览器的内容区域？

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

最好的方法是通过键盘快捷键，这样我就可以再次重新启用所有东西。

Answer 1

最简单的方法是在 Firefox 中安装相关的附加组件。

对于以下任何设置，请安装相应的附加组件。Firefox 可能需要重新启动，但对于 Firefox Quantum 来说通常不需要。快捷键（如果可用）可以从“附加组件管理器”>“扩展”更改为各个附加组件。

Firefox 有一个重新设计的键盘快捷键部分，可以在一个地方管理所有快捷键，从Firefox 66 开始提供。

对于 Firefox 旧版

设置 A使用以下附加组件：

• 隐藏导航栏，最后测试为 1.41.1 签名
• 隐藏标签栏，上次测试为 2.1.0.1 签名
• HideScrollbars，上次测试为 0.2.1 签名

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

限制：分配相同的键不能很好地工作，因为中间有一些延迟。即使同时按下单独的键，结果也是相似的。无论哪种方式，其中一个栏都不会隐藏并与用户玩捉迷藏。

适用于 Firefox 56 及更早版本（已弃用），但 Firefox 附加组件不再提供。在 Linux 上使用 Firefox 41.0 完全测试。没有截图。

对于 Firefox Quantum

安装程序 B使用以下附加组件：

• tkrkt 没有工具栏的新窗口

转到 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，但不是最简单的方法，也没有键盘快捷键。

Answer 2

原生方式是在 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上的CSS 溢出来理解overflow是没有必要的。

• w3schools 上的 CSS 可见性属性，以了解visibility.

• 在 CSS 中使用“!important”有什么含义？对 Stack Overflow的了解!important是没有必要的。

• Firefox 60 破坏了隐藏滚动条 css和隐藏滚动条 Firefox 60：reddit.com上的FirefoxCSS都建议删除#content并保留，browser以便正确隐藏滚动条。

• 火狐69：userChrome.css和userContent.css默认情况下禁用对ghacks.net和PSA：火狐V69用户将不得不设置一个PREF，使userChrome.css和userContent.css上reddit.com都已经注意到了新的偏好toolkit.legacyUserProfileCustomizations.stylesheets在about:config。

回答者注：这个答案是在两年后写的，只是在我建议在第一个答案中使用附加组件之后。从那以后，又写了几个基于 userChrome.css 的答案，而不是改进这个答案。因此，这个答案现在是一个社区维基，因此任何声誉最低的人都可以改进这篇文章，以跟上 Firefox 的最新变化。

Answer 3

我知道这太晚了，但我为此制作了一个书签，它不需要附加组件，也不需要下载:)

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

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

单击此处使过程更轻松！ | JSfiddle

注意：这应该适用于所有浏览器

Answer 4

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

如果您只想隐藏 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 url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#navigator-toolbox {
    height: 0px !important;
    min-height: 0px !important;
    overflow: hidden !important;
}

#navigator-toolbox:focus,
#navigator-toolbox:focus-within,
#navigator-toolbox:active {
    height: auto !important;
}