Thorium 网络错误页资源剖析：neterror 模板、精灵图定制与离线恐龙游戏
【免费下载链接】thoriumChromium fork named after radioactive element No. 90. Source code and Linux releases. Windows/MacOS/ARM builds served in different repos, links are towards the top of the README.md.项目地址: https://gitcode.com/GitHub_Trending/th/thorium
Thorium 的src/components/neterror目录承载了浏览器所有网络错误提示页（interstitial）的 HTML 模板与静态资源，并在此基础上定制了离线状态下可玩的“恐龙跑”游戏，包括背景音轨与街机模式扩展。本文以 README.md 为主线，结合仓库中的 neterror.html 模板与 offline.js 源码，逐层拆解错误页的资源组织方式、HiDPI 图像策略与音轨定制，帮助理解 Chromium 分支如何在不改核心代码的前提下替换错误页体验。
一、目录定位与整体结构
原始 README 说明了该目录的职责：存放“在获取根文档或 iframe 时收到网络错误”所展示的 HTML 模板与资源，错误页可在chrome://network-errors页面中通过列表链接直接预览；同一套模板被所有桌面与移动平台、主框架与 iframe 共用；目录同时包含 Thorium 恐龙游戏的脚本与图像。
从仓库实际文件布局看，resources/下的组织方式为：
neterror.html：错误页 Jinja2 模板；dino_game/offline.js：恐龙游戏主逻辑（单文件、ES Module 风格）；images/default_100_percent/offline/与images/default_200_percent/offline/：1x/2x 两套精灵图与错误页图标；sounds/：游戏音轨资源。
README 还指出模板的消费方是上游components/neterror代码（负责读取并渲染模板），以及components/security_interstitials/core/common/resources/下与安全提示页共用的 CSS/JS——这一共享关系在 neterror.html 中可以直接印证：模板通过相对路径引入了interstitial_core.css与interstitial_common.css（见模板第 10–11 行）。
二、neterror.html：跨平台错误页模板
neterror.html 全文仅 33 行，是 Thorium 错误页的单一入口模板，关键要素如下：
<html dir="$i18n{textdirection}" lang="$i18n{language}"> <head> <meta charset="utf-8"> <meta name="color-scheme" content="light dark"> <meta name="theme-color" content="#fff"> <title>$i18n{title}</title> <link rel="stylesheet" href="../../../components/security_interstitials/.../interstitial_core.css"> <link rel="stylesheet" href="../../../components/security_interstitials/.../interstitial_common.css"> <link rel="stylesheet" href="neterror.css"> </head> <body class="neterror"> <div id="content"></div> <div id="offline-resources"> <img id="offline-resources-1x" src="images/default_100_percent/offline/100-offline-sprite.png"> <img id="offline-resources-2x" src="images/default_200_percent/offline/200-offline-sprite.png"> <template id="audio-resources"> <audio id="offline-sound-press" src="sounds/button-press.mp3"></audio> <audio id="offline-sound-hit" src="sounds/hit.mp3"></audio> <audio id="offline-sound-reached" src="sounds/score-reached.mp3"></audio> <audio id="offline-sound-background" src="sounds/perpetuum_factory_2.mp3"></audio> </template> </div> </body>可以从中读出三点设计：
- i18n 占位符：
$i18n{...}由上游 neterror 代码在加载模板时替换（方向、语言、标题、字体等），因此同一模板即可覆盖所有语言与平台，这正是 README 所说“同一模板用于所有桌面/移动平台”的落地方式； - 构建条件分支：
<if expr="optimize_webui">在优化构建中加载minified/neterror.rollup.js，非优化构建加载bundled/neterror.rollup.js（模板第 13–18 行），错误页的 JS 逻辑在构建期被 rollup 打包进%ROOT_GEN_DIR%，模板本身不含内联脚本； #offline-resources隐藏资源区：恐龙游戏的精灵图与音频以隐藏<img>/<template>形式预置于错误页 DOM 中，游戏脚本按 ID（offline-resources-1x/2x、audio-resources）在运行时取出使用，无需额外网络请求即可离线运行。
三、HiDPI 图像策略与 Thorium 图标替换
images/下按 DPR（device pixel ratio）分目录存放两套同名资源，这是 Chromium 错误页的标准做法——游戏按屏幕密度选取 1x 或 2x 精灵：
| 资源 | 1x（default_100_percent） | 2x（default_200_percent） | 用途 |
|---|---|---|---|
| 错误页主图 | 100-error-offline.png | 200-error-offline.png | 断网页顶部显示的离线状态图标 |
| 恐龙精灵图 | 100-offline-sprite.png | 200-offline-sprite.png | 恐龙游戏的雪碧图（sprite sheet） |
| 禁用态图标 | 100-disabled.png | 200-disabled.png | 彩蛋被禁用时的占位图 |
| 页面 Favicon | favicon-16x16.png | favicon-32x32.png | 错误页地址栏图标 |
其中 favicon 一项体现了 Thorium 的定制痕迹：上游 Chromium 的这两个文件位于components/neterror/resources/根目录，而 Thorium 将自有版本移入了按密度划分的offline/子目录。这一点可以从旧版 Windows 构建脚本 trunk.bat 中佐证——脚本在每次 rebase 到上游前显式删除components\neterror\resources\favicon-16x16.png与favicon-32x32.png，随后执行git rebase-update重新应用 Thorium 的变更，从而保证上游对 favicon 的更新不会覆盖 Thorium 的定制版本。这是一种典型的“文件占位 + 重放变更”的分支维护技巧。
四、音轨定制：perpetuum_factory_2 背景乐
#audio-resources模板中声明了四段音频，但仓库sounds/目录下实际只存放了一个文件：perpetuum_factory_2.mp3（约 1.2 MB，即背景音轨offline-sound-background）。其余button-press、hit、score-reached三个音频并不随仓库提供——从 offline.js 对GeneratedSoundFx模块的导入可以推断，这类短促音效由 Web Audio 在运行时程序化合成，<audio>元素只作为资源占位与降级路径。
将一段完整音乐（perpetuum_factory_2）作为离线页面的背景乐，是 Thorium 对上游恐龙游戏的显著增强：上游版本只有合成音效，而 Thorium 的断网页在游玩时会伴随 BGM 播放，这也是该目录“包含 Thorium 恐龙游戏的脚本与图像”之外的第三类定制资源。
五、offline.js：游戏逻辑与街机模式
offline.js 是恐龙游戏的完整实现（约 1700+ 行），文件头版权为 “The Chromium Authors and Alex313031”，表明其在上游代码基础上的二次开发。对理解 Thorium 定制最有信息量的部分集中在文件头部：
- 单例 Runner 构造器：
Runner通过Runner.instance_保证全局唯一实例，并支持opt_config注入配置； - 双配置体系：
Runner.normalConfig（初速 6、最高速 13、加速度 0.001）与Runner.slowConfig（初速 4.2、最高速 9、加速度 0.0005）分别对应标准节奏与慢速模式； - Thorium 街机模式常量（源码第 124–126 行）：
const ARCADE_MODE_URL = 'chrome://dino/'; const ARCADE_MODE2_URL = 'Thorium Dino Game';从源码结构看，chrome://dino/是 Thorium 提供的独立恐龙游戏页面 URL，配合ARCADE_MODE_INITIAL_TOP_POSITION: 35与ARCADE_MODE_TOP_POSITION_PERCENT: 0.1等布局参数（Runner.config第 168–169 行），游戏可以从错误页彩蛋扩展为独立“街机”入口；altGameMode相关字段（altGameImageSprite、initAltGameType等）则支持加载替代精灵定义的“二周目”游戏形态。此外还有 10 秒左右触发一次的画面反色彩蛋（INVERT_FADE_DURATION: 12000）与游戏手柄支持（pollingGamepads）。
若希望关闭错误页上的恐龙彩蛋，Thorium 完整继承了上游开关：CMDLINE_FLAGS_LIST.md 中列出的--disable-dinosaur-easter-egg（“Disables the dinosaur easter egg on the offline interstitial”）。禁用后错误页会展示*-disabled.png占位图，这与第三节图像清单中的“禁用态图标”一一对应。
六、维护视角：rebase 流程中如何保护这些定制资源
Thorium 作为 Chromium fork，components/neterror下的资源每次上游同步都可能被覆盖。仓库给出的实践证据是：
- trunk.bat：在
git checkout -f origin/main之前，先rm掉 Thorium 私有命名的资源文件（neterror favicon、thorium_shell.ico、thorium_flag_entries.h等），再执行git rebase-update将 Thorium 提交重放回来，确保私有文件以 Thorium 内容为准； - THORIUM_DEV_BOOKMARKS.html 中收藏了上游
components/neterror的源码浏览入口，供开发者对照上游模板与渲染逻辑； infra/CMDLINE_FLAGS_LIST.md与 docs/CMDLINE_FLAGS_LIST.md 双份维护命令行开关清单，错误页相关开关（如恐龙彩蛋）也收录其中。
小结
src/components/neterror是 Thorium 错误页体验的全部定制入口：一个 33 行的 neterror.html 模板统一了所有平台的渲染路径，images/下 1x/2x 双密度资源实现了图标级定制，sounds/中的背景乐与 offline.js 的chrome://dino/街机模式共同构成了 Thorium 标志性的离线体验。对维护者而言，关键在于理解“上游覆盖 + rebase 重放”的文件保护机制，才能在持续 rebase 到 Chromium 主干的同时保留这些定制资源。
【免费下载链接】thoriumChromium fork named after radioactive element No. 90. Source code and Linux releases. Windows/MacOS/ARM builds served in different repos, links are towards the top of the README.md.项目地址: https://gitcode.com/GitHub_Trending/th/thorium
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
