Gecko Chrome中如何通过@supports处理字符串与数字类型偏好设置

Gecko原生的-moz-bool-pref仅支持检测布尔型about:config偏好，对于字符串、数字类型的偏好，必须通过JavaScript读取偏好值并注入CSS变量的方式实现分情况样式控制——核心是用JS作为桥接，把偏好值传递给CSS，再通过CSS选择器或变量完成样式分支处理。

字符串类型偏好的处理步骤 #

假设你有一个名为extensions.popupBorderMode的字符串偏好，有效值为auto、then、none，具体实现如下：

1. 用JavaScript读取偏好并注入CSS变量 #

在Chrome环境的脚本（如userChrome.js或扩展内容脚本）中添加以下代码：

// 读取字符串偏好，第二个参数为默认值
const borderMode = Services.prefs.getStringPref("extensions.popupBorderMode", "auto");
// 将偏好值注入根元素的CSS变量（用引号包裹避免CSS解析异常）
document.documentElement.style.setProperty("--popup-border-mode", `"${borderMode}"`);

2. 在CSS中根据变量值编写分支样式 #

利用属性选择器匹配根元素上的CSS变量值，实现不同偏好对应的样式：

/* 偏好为none时，移除弹窗边框 */
:root:where([style*="--popup-border-mode: \"none\""]) .popup-panel {
  border: none !important;
}

/* 偏好为auto时，使用默认主题边框 */
:root:where([style*="--popup-border-mode: \"auto\""]) .popup-panel {
  border: 1px solid var(--panel-border-color) !important;
}

/* 偏好为then时，使用自定义虚线边框 */
:root:where([style*="--popup-border-mode: \"then\""]) .popup-panel {
  border: 2px dashed var(--accent-color) !important;
}

数字类型偏好的处理步骤 #

以名为extensions.popupBorderWidth的数字偏好为例，实现逻辑类似：

1. JavaScript读取并注入变量 #

// 读取数字偏好，第二个参数为默认值
const borderWidth = Services.prefs.getIntPref("extensions.popupBorderWidth", 1);
// 将数字转为CSS长度单位后注入变量
document.documentElement.style.setProperty("--popup-border-width", `${borderWidth}px`);

2. CSS中直接使用变量 #

.popup-panel {
  border-width: var(--popup-border-width) !important;
  border-style: solid !important;
  border-color: var(--panel-border-color) !important;
}

注意事项 #

• 脚本运行时机：需在DOM初始化完成后执行，避免无法获取document.documentElement；
• 权限配置：扩展中使用Services.prefs需声明对应权限（如browserSettings），userChrome.js需开启Firefox的toolkit.legacyUserProfileCustomizations.stylesheets等相关配置；
• 字符串转义：注入字符串类型偏好值时必须用引号包裹，防止CSS解析错误。

内容的提问来源于stack exchange，提问作者Fire Gamer