一、适用场景h2

Linux Mint 自带的 Web App Manager 可以将网站创建成独立的桌面应用。使用 Firefox 作为后端时，每个 Web App 都会使用独立的 Firefox Profile。

这类 Web App 常见两个问题：

• 鼠标移动到窗口顶部时，Firefox 标签栏、地址栏或工具栏重新弹出。
• 深色网站启动时短暂显示白色背景，或者滚动条样式与页面主题不协调。

本文以网易云音乐 Web App 为例，整理一套通用配置：

• 使用 userChrome.css 隐藏 Firefox 顶部工具栏。
• 使用 userContent.css 将滚动条改为细滚动条。
• 为网易云音乐页面预设深色背景，消除启动白屏。
• 保留备份和恢复方法，避免修改后无法回退。

二、配置原理h2

Firefox Web App 的配置分为两个层次：

Firefox 浏览器界面
└─ userChrome.css
   └─ 标签栏、地址栏、导航工具栏等浏览器自身界面

网页内容
└─ userContent.css
   └─ 网页背景、滚动条和页面内容样式

Linux Mint Web App Manager 通常为每个 Web App 创建独立 Profile，常见目录为：

~/.local/share/ice/firefox/<web-app-profile>/

因此这些修改只作用于指定 Web App，不会影响平时使用的 Firefox 主 Profile。

三、找到 Web App Profileh2

3.1 确认 Web App 名称h3

先确认 Web App Manager 中显示的应用名称。下面以占位名称为例：

APP_NAME="My Web App"

名称必须与 Web App Manager 中显示的名称完全一致。

3.2 找到启动器h3

执行：

desktop=$(grep -l "^Name=${APP_NAME}$" ~/.local/share/applications/WebApp-*.desktop | head -n 1)

if [ -z "$desktop" ]; then
  echo "未找到 Web App：$APP_NAME"
  exit 1
fi

echo "$desktop"

正常会返回类似路径：

~/.local/share/applications/WebApp-MyWebApp1234.desktop

如果没有输出，检查以下内容：

• Web App 名称是否完全正确。
• 是否使用 Linux Mint 自带的 Web App Manager 创建。
• Web App 是否已经保存成功。

3.3 读取 Firefox Profileh3

从启动器的 Exec 行中提取 Profile：

profile=$(grep '^Exec=' "$desktop" | sed -n 's/.*--profile \([^ ]*\).*/\1/p')

if [ -z "$profile" ]; then
  echo "未找到 Firefox Profile"
  exit 1
fi

echo "$profile"

返回结果通常类似：

~/.local/share/ice/firefox/MyWebApp1234

实际命令输出可能是绝对路径，Profile 末尾的数字由 Web App Manager 自动生成，不同机器或重新创建 Web App 后可能不同。

后续命令都使用当前 shell 中的 $profile 变量，不要手动猜测 Profile 编号。

四、启用 Firefox 自定义 CSSh2

Firefox 需要允许 Profile 加载 userChrome.css 和 userContent.css。先检查配置：

如果没有启用，可以在该 Profile 的 user.js 中添加：

printf '%s\n' \
  'user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);' \
  >> "$profile/user.js"

如果 user.js 中已经有相同配置，不要重复添加。

创建 CSS 目录：

mkdir -p "$profile/chrome"

注意：修改前应完全关闭对应 Web App。Firefox 进程仍然运行时，配置文件可能被覆盖或无法立即生效。

五、隐藏顶部工具栏h2

5.1 检查当前配置h3

Web App Manager 通常会在 userChrome.css 中使用以下变量控制顶部工具栏层级：

--browser-area-z-index-toolbox: 3;

先检查：

grep -n 'browser-area-z-index-toolbox' "$profile/chrome/userChrome.css"

如果看到类似结果：

21:  --browser-area-z-index-toolbox: 3;

说明当前仍使用默认行为。

5.2 备份并修改h3

修改前备份原文件：

cp "$profile/chrome/userChrome.css" "$profile/chrome/userChrome.css.bak"

将工具栏层级从 3 改为 0：

sed -i 's/--browser-area-z-index-toolbox: 3;/--browser-area-z-index-toolbox: 0;/' \
  "$profile/chrome/userChrome.css"

验证结果：

grep -n 'browser-area-z-index-toolbox' "$profile/chrome/userChrome.css"

预期看到：

21:  --browser-area-z-index-toolbox: 0;

5.3 效果h3

修改后，鼠标移动到窗口顶部时，Firefox 的标签栏、地址栏和导航工具栏不会再自动弹出，Web App 会更接近独立桌面应用。

这里修改的是 Firefox 内部界面，不是 Cinnamon 的窗口标题栏。如果看到的是类似下面的内容：

My Web App - Mozilla Firefox

那属于桌面环境的窗口装饰，不是本文处理的 Firefox 工具栏。

六、优化网易云音乐滚动条和启动白屏h2

6.1 创建 userContent.cssh3

编辑网页内容样式文件：

nano "$profile/chrome/userContent.css"

写入以下配置：

* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent !important;
}

@-moz-document domain("music.163.com") {
  :root,
  html,
  body {
    background-color: #111116 !important;
    color-scheme: dark !important;
  }
}

保存后，完全关闭网易云音乐 Web App，再重新启动。

6.2 滚动条配置说明h3

这一部分：

* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent !important;
}

作用是：

• 将 Firefox 默认较宽的滚动条改为细滚动条。
• 使用半透明白色作为滑块颜色。
• 保持滚动条轨道透明。
• 不影响鼠标滚轮、触控板或拖动操作。

如果滑块仍然太亮，可以降低透明度：

rgba(255, 255, 255, 0.15)

6.3 启动白屏配置说明h3

这一部分只匹配网易云音乐域名：

@-moz-document domain("music.163.com") {
  :root,
  html,
  body {
    background-color: #111116 !important;
    color-scheme: dark !important;
  }
}

作用是：

• 在网易云自身页面 CSS 完全加载前，提前为页面设置深色背景。
• 避免初始化阶段先显示默认白色背景。
• 通过 color-scheme: dark 让 Firefox 优先使用暗色控件和暗色绘制方式。

这个方法只修改网页内容层，不会改变 Firefox 全局启动窗口设置。

七、为什么不修改 Firefox 全局启动背景h2

排查白屏时，可能会想到修改 Firefox 的全局设置：

browser.display.background_color
browser.display.background_color.dark
browser.startup.blankWindow

但这类设置修改的是 Firefox 窗口或全局 Profile 行为。如果白屏发生在网页 HTML/CSS 初始化阶段，修改它们通常不能解决问题。

更有效的判断方式是：

Firefox 窗口启动背景正常
→ 网页加载后短暂变白
→ 页面样式完成后恢复深色

这说明问题更可能来自网页自身的初始绘制，应使用 userContent.css 针对网页根元素设置背景。

八、一键配置版本h2

如果已经确认 Web App 名称，可以使用下面的脚本完成查找、备份和修改。只需要修改第一行：

APP_NAME="My Web App"

desktop=$(grep -l "^Name=${APP_NAME}$" ~/.local/share/applications/WebApp-*.desktop | head -n 1)

if [ -z "$desktop" ]; then
  echo "未找到 Web App：$APP_NAME"
  exit 1
fi

profile=$(grep '^Exec=' "$desktop" | sed -n 's/.*--profile \([^ ]*\).*/\1/p')

if [ -z "$profile" ]; then
  echo "未找到 Firefox Profile"
  exit 1
fi

mkdir -p "$profile/chrome"

css="$profile/chrome/userChrome.css"

if [ ! -f "$css" ]; then
  echo "未找到 userChrome.css：$css"
  exit 1
fi

cp "$css" "$css.bak"

sed -i 's/--browser-area-z-index-toolbox: 3;/--browser-area-z-index-toolbox: 0;/' "$css"

cat > "$profile/chrome/userContent.css" <<'EOF'
* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent !important;
}

@-moz-document domain("music.163.com") {
  :root,
  html,
  body {
    background-color: #111116 !important;
    color-scheme: dark !important;
  }
}
EOF

echo "Web App 启动器：$desktop"
echo "Firefox Profile：$profile"
echo "已备份：$css.bak"
echo "已更新：$css"
echo "已写入：$profile/chrome/userContent.css"
echo "请完全关闭 Web App 后重新启动。"

如果 userChrome.css 中没有 --browser-area-z-index-toolbox: 3;，不要盲目执行替换。先查看文件内容，确认 Web App Manager 使用的 Firefox 版本和配置结构。

九、恢复默认设置h2

9.1 恢复顶部工具栏h3

使用备份恢复：

cp "$profile/chrome/userChrome.css.bak" \
  "$profile/chrome/userChrome.css"

或者手动将：

--browser-area-z-index-toolbox: 0;

改回：

--browser-area-z-index-toolbox: 3;

9.2 恢复网页样式h3

删除 userContent.css 即可：

rm -f "$profile/chrome/userContent.css"

恢复后完全关闭并重新启动 Web App。

十、常见问题h2

10.1 修改没有生效h3

依次检查：

grep -n 'toolkit.legacyUserProfileCustomizations.stylesheets' "$profile/user.js"
grep -n 'browser-area-z-index-toolbox' "$profile/chrome/userChrome.css"
ls -l "$profile/chrome/userContent.css"

还要确认 Web App 已经完全退出，而不是只关闭了网页窗口。可以在系统进程中确认对应的 Firefox 进程已经结束。

10.2 删除并重新创建 Web App 后失效h3

删除并重新创建 Web App 时，Web App Manager 可能会生成新的 Profile：

旧 Profile：<web-app-profile-1>
新 Profile：<web-app-profile-2>

新的 Profile 不会自动继承旧 Profile 中的 CSS 配置。重新找到启动器和 Profile 后，再执行配置步骤即可。

10.3 是否可以使用 —kioskh3

Firefox 支持：

firefox --kiosk <URL>

但 Kiosk 模式会同时改变窗口显示方式、F11 行为、浏览器菜单和部分交互。对于普通桌面 Web App，修改专用 Profile 的 CSS 通常更合适，也更容易恢复。

10.4 如何用于其他深色网站h3

可以将 userContent.css 中的域名替换成其他网站：

@-moz-document domain("example.com") {
  :root,
  html,
  body {
    background-color: #111116 !important;
    color-scheme: dark !important;
  }
}

只需要根据目标网站的实际背景调整颜色。滚动条规则也可以保留，或根据网站需求进一步缩小作用范围。

十一、最终效果h2

完成配置并重新启动 Web App 后：

• 鼠标移动到窗口顶部时，Firefox 工具栏不再弹出。
• 网易云音乐左侧滚动条变细，轨道保持透明。
• 网易云音乐启动阶段不再出现明显白色闪屏。
• 修改只作用于对应的 Firefox Web App Profile。
• 删除并重新创建 Web App 后，只需要重新执行一次配置。

这类问题的关键是区分两个层面：userChrome.css 负责 Firefox 自身界面，userContent.css 负责网页内容。先找到正确的独立 Profile，再分别修改对应文件，通常比调整 Firefox 全局设置更可靠。