如何让Chrome浏览器的查看源代码页面自动切换为深色模式？

问题情况 #

在Chrome中通过view-source:前缀查看HTML源代码时，页面默认白底小字，手动制作的书签工具可以正常切换深色模式并放大字体，但自行开发的Chrome扩展仅对CSS/JS源代码页面生效，对view-source:开头的HTML页面完全无效。

问题根源 #

1. 原扩展用背景脚本执行DOM操作——背景脚本运行在扩展的独立背景页中，根本无法访问目标页面（包括view-source:页面）的DOM结构，这是核心错误。
2. view-source:属于Chrome内部特殊页面，需要额外权限才能让扩展脚本注入进去。
3. 原代码存在语法小错误：书签工具里的name="color scheme"应为name="color-scheme"（与页面实际标签一致），且条件判断语句缺少闭合括号。

修复步骤 #

1. 调整Manifest配置（改用内容脚本+添加必要权限） #

将原来的背景脚本配置替换为内容脚本，同时添加viewSource权限，确保能匹配view-source:页面和普通源码页面。

修改后的manifest.json：

{
    "short_name": "Dark",
    "name": "Medium Dark Mode",
    "icons": {
        "48": "icon.png"  
    },
    "permissions": [
        "activeTab",
        "tabs",
        "viewSource"
    ],
    "content_scripts": [
        {
            "matches": [
                "view-source:*",
                "*://*.html",
                "*://*.css",
                "*://*.js"
            ],
            "js": ["darkmode.js"],
            "run_at": "document_end"
        }
    ],
    "manifest_version": 2,
    "browser_action": {
        "default_title": "Dark Mode"
    },
    "version": "1.0"
}

2. 修正内容脚本代码（修复语法+匹配正确标签） #

调整darkmode.js，修复语法错误，同时兼容页面的color-scheme标签：

// 切换深色模式
const colorSchemeMeta = document.querySelector('meta[name="color-scheme"]');
if (colorSchemeMeta) {
    colorSchemeMeta.setAttribute("content", "dark");
}

// 放大pre标签字体
const preElement = document.querySelector('pre');
if (preElement) {
    preElement.style.fontSize = "18px";
}

// 放大table标签字体
const tableElement = document.querySelector('table');
if (tableElement) {
    tableElement.style.fontSize = "18px";
}

3. 扩展逻辑说明 #

• content_scripts配置会自动把脚本注入到匹配的页面中，直接操作页面DOM，这是处理页面样式/结构的正确方式。
• run_at: "document_end"确保页面DOM加载完成后再执行脚本，避免出现找不到元素的问题。
• viewSource权限是访问view-source:页面的必要条件，无此权限扩展无法向这类页面注入脚本。

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