Geckium 是如何在 Firefox 上复刻老 Chrome 的？CSS+JS 换肤核心实现原理详解

Geckium 是一款专为 Firefox 115+ 打造的换肤改造方案，它通过 CSS 样式注入与 JS 动态修改 DOM 的组合方式，在 Firefox 中完整复刻了 Chrome 1 到 58 共 12 个历史时代的外观，甚至把 2008 年的 Chrome 1 界面都还原了出来。本文带你拆解它的核心实现原理：样式如何注入、"时代"如何切换、页面如何被替换。


一、它是什么：一封写给 Chromium 历史的情书

Geckium 支持 Chrome 1（2008）、3、4、5、6、11、17、21、25、37、47、58 共 12 个"时代"，覆盖 Windows、macOS、Linux 三大平台。它本质上是一组放进 Firefox 用户配置目录的CSS + JS 文件，不改动 Firefox 一行源码，却能彻底改变浏览器外观。

它的版本信息记录在 version.json 中，当前为 0.20.13.1。

二、启动链：四个文件如何让改造"自动生效"

Geckium 能随 Firefox 自动启动，靠的是一条精心设计的自举链：

1. defaults/pref/config-prefs.js（放入 Firefox 安装目录）——通过 3 行 pref 配置告诉 Firefox"启动时去执行 config.js"：
   • config-prefs.js 设置general.config.filename指向config.js，并关闭沙箱限制
2. config.js（放入 Firefox 安装目录）——启动时读取用户目录中的chrome.manifest并注册，然后导入引导模块：
   • config.js
3. chrome.manifest——声明资源路径映射，是 Firefox 的"目录登记表"：
   • chrome.manifest 把chrome://userscripts映射到JS/目录、chrome://pages映射到pages/目录等
4. boot.sys.mjs——真正的引导器（基于 userChromeJS 机制）：
   • boot.sys.mjs 扫描JS/目录下所有*.uc.js与*.sys.mjs脚本，解析每个文件头的@include、@loadOrder等元信息，决定哪些脚本注入哪个窗口、以什么顺序执行

💡 关键点：*.sys.mjs后缀的脚本以后台模块方式运行（全局生效一次），*.uc.js则按@include注入到指定文档中。这套机制就是 Firefox 用户脚本生态的标准做法。

三、CSS 侧：把样式表"塞进"浏览器外壳

CSS 要生效，得先被浏览器加载。Geckium 用了两种层级：

① Agent Sheet（代理样式表）——最高优先级，全局生效

userChrome_ag_css.sys.mjs 调用 Firefox 的样式表服务，把主样式表注册为 Agent Sheet，可覆盖几乎所有 UI 元素。

② Author Sheet（作者样式表）——预加载 + 按需注入

userChrome_au_css.uc.js 先preloadSheet预加载样式，再用windowUtils.addSheet注入当前窗口，并通过UC_API.Windows.onCreated钩子确保每个新建窗口都能拿到样式。

主样式表 geckiumChrome.scss 只有一行，指向分时代组织的样式目录：

@import "styles/partials/chrome/eras";

而 _eras.scss 就是"时代切换"的 CSS 核心——它用属性选择器给每个时代圈定样式作用域：

/* Chrome 3 */ :root[geckium-three] { @import "chrome-3/final"; } /* Chrome 7 -> 11 */ :root[geckium-eleven] { @import "chrome-11/final"; }

每个时代是一个独立子目录，如 chrome-1/ 下按 UI 部件拆分为_tabs.scss、_titlebar.scss、_urlbar-searchbar.scss等 20 余个 partial，维护起来非常清晰。

四、JS 侧：一个属性如何切换整个时代 🔁

这就是 Geckium 最优雅的设计：JS 不改 CSS，CSS 也不改 JS，两者通过 HTML 属性"握手"。

Geckium_styles.uc.js 中定义了完整的时代表eras，每个时代记录了基础版本、年份、英文编号（one、twentyone…）以及各平台标题栏规范。

切换逻辑在 applyEra() 中：

1. 从about:config偏好Geckium.appearance.choice读取用户选择的时代
2. 给<html>根元素逐个增删geckium-one、geckium-three… 属性
3. CSS 里的:root[geckium-eleven]选择器随之命中，整套 Chrome 11 样式瞬间生效

更妙的是，脚本还注册了Services.prefs观察者（L341-L351）——你在 Geckium Settings 里点击切换时代，偏好值一变，监听器立即触发applyEra()，无需重启，所见即所得。

五、JS 侧：动态改 DOM 与替换内置页面 🛠️

光有 CSS 只是"涂妆"，真正的复刻还需要 JS 动手改结构：

① 替换内置页面——Geckium_aboutPageRegisterer.uc.js 通过nsIAboutModule机制，把about:newtab、about:home、about:flags甚至about:dino（恐龙页面）统统指向 Geckium 自己的页面。于是 pages/newTabHome/ 里按时代存放的 12 套新标签页（含 eras.scss 的样式切换）就接管了浏览器。


② 给标签页"加料"——Geckium_tabs.uc.js 用document.createElement动态创建静音按钮、分享图标等老 Chrome 独有的标签控件，再插回 DOM。

③ 系统主题联动——Geckium_themes.uc.js 根据当前时代和平台，为根元素打上gksystheme属性（如 win7/win8/macos），让标题栏随时代一起"穿越"。


六、Geckium Zoo：所有时代一次看全 🖼️

想同时对比 12 个时代？Geckium 内置了一个about:gmzoo展示页，框架代码位于 frameworks/GeckiumMaterial/zoo/index.xhtml，由 chrome.manifest 中chrome://gm的映射支撑。它的横幅图就来自仓库资源：


七、总结：三层架构，零侵入换肤

Geckium 的核心思想一句话概括：CSS 负责"画"，JS 负责"选"，属性选择器负责"接线"。这套 CSS+JS 换肤方案对 Firefox 零侵入、可卸载、可实时切换，堪称 Firefox 用户脚本生态中"以最小代码量实现最大视觉改动"的典范。

⚠️ 提醒：JS 改造拥有对浏览器的完全控制权，请只从可信来源获取此类修改。