如何修改chrome://页面的HTML代码并使更改持久生效

Chrome的chrome://系列页面属于浏览器内置核心资源，直接修改其原始封装文件不可行——这些文件受浏览器校验保护，重启后会自动恢复。要实现进入页面时修改自动生效且持久保留，只能通过动态注入逻辑的方式，以下是针对无网络状态下的断网页面（如chrome://network-error/-106）的具体方案：

方法1：使用Tampermonkey用户脚本（简单快捷） #

这是无需开发的轻量化方案：

• 安装Tampermonkey扩展（Chrome应用商店可获取）
• 新建用户脚本，填入以下代码：

// ==UserScript==
// @name         自定义Chrome断网页面
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  持久化修改Chrome无网络状态页面
// @match        chrome://network-error/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 示例：修改页面标题
    document.title = "网络断开提示";

    // 示例：替换核心提示文本
    const errorText = document.querySelector('.error-code + p');
    if (errorText) {
        errorText.textContent = "哎呀，网络连接失败了！试试检查路由器或切换网络~";
    }

    // 示例：修改页面背景样式
    document.body.style.backgroundColor = "#f5f5f5";

    // 可根据需求添加更多DOM修改逻辑
})();

• 保存脚本后，每次打开断网页面，脚本会自动执行修改，刷新或重启浏览器后依然有效。

方法2：开发Chrome扩展（灵活可控） #

如果需要复杂交互或自定义功能，可开发轻量扩展：

1. 创建文件夹custom-chrome-error-page，在其中新建manifest.json：

{
    "manifest_version": 3,
    "name": "自定义断网页面",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": ["chrome://network-error/*"],
            "js": ["content.js"],
            "run_at": "document_end"
        }
    ]
}

2. 新建content.js写入修改逻辑：

// 修改页面标题
document.title = "网络连接异常";

// 替换提示内容
const errorMsg = document.querySelector('.error-message');
if (errorMsg) {
    errorMsg.innerHTML = "<p>网络跑丢了😢</p><p>请检查网络设置后重试</p>";
}

// 添加自定义操作按钮
const settingBtn = document.createElement('button');
settingBtn.textContent = "打开网络设置";
settingBtn.style.padding = "8px 16px";
settingBtn.style.marginTop = "20px";
settingBtn.addEventListener('click', () => {
    chrome.runtime.openOptionsPage();
});
document.querySelector('.error-container').appendChild(settingBtn);

3. 在Chrome中打开chrome://extensions/，开启「开发者模式」，点击「加载已解压的扩展程序」选择上述文件夹，扩展会自动在断网页面注入修改逻辑。

关键注意事项 #

• 禁止直接修改Chrome安装目录下的内置页面文件：这些文件受浏览器校验机制保护，修改后会被强制恢复，甚至导致浏览器崩溃。
• 上述方案均为动态DOM注入修改，并非修改原始核心代码，但能实现「进入页面时修改生效且持久保留」的需求。
• 部分高权限chrome://页面（如chrome://settings/）需要扩展申请额外权限才能修改，具体可参考Chrome扩展官方文档。

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