本文档详细介绍了 Chrome 主题扩展项目，这是 App Ideas Collection 中的二级（中级）应用。该项目涉及为 Google Chrome 创建一个定制的浏览器主题扩展，并可选配蓝光滤镜功能，以减少夜间使用时的眼部疲劳。本文档涵盖了技术架构、实现考虑、用户需求和扩展部署过程。
有关其他浏览器扩展项目的更多信息，请参阅 二级：中级项目。
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md1-5
Chrome 主题扩展是一种特殊的 Chrome 扩展程序，用于修改浏览器的视觉外观。与添加功能的实用扩展程序不同，主题扩展程序主要改变浏览器界面的颜色、图像和视觉元素。
Chrome 扩展结构图
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md7-8
主题扩展与标准 Chrome 扩展程序的区别在于，它们主要关注视觉定制，而不是添加功能。
扩展类型比较图
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md5-8
要创建 Chrome 主题扩展，您需要建立一个具有以下关键组件的基本项目结构：
项目结构图
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md7-8 Projects/2-Intermediate/Chrome-Theme-Extension.md24
manifest.json 文件是任何 Chrome 扩展程序的基石，它定义了扩展程序的功能和权限。
{
"name": "Custom Theme Name",
"version": "1.0",
"description": "A customized Chrome theme with optional blue light filter",
"manifest_version": 3,
"theme": {
"images": {
"theme_frame": "images/theme_frame.png",
"theme_toolbar": "images/theme_toolbar.png"
},
"colors": {
"frame": [33, 33, 33],
"toolbar": [207, 221, 192],
"tab_text": [0, 0, 0],
"tab_background_text": [255, 255, 255]
},
"tints": {
"buttons": [0.9, 0.9, 0.9]
}
},
"permissions": ["storage"],
"background": {
"service_worker": "js/bluelight_filter.js"
},
"action": {
"default_icon": "images/icon.png",
"default_title": "Toggle Blue Light Filter"
}
}
请注意，蓝光滤镜功能需要 JavaScript 和额外的权限，这使其不仅仅是一个简单的扩展程序。
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md7-8 Projects/2-Intermediate/Chrome-Theme-Extension.md24
manifest 的 colors 部分定义了浏览器元素的视觉外观。
| 浏览器元素 | 描述 | RGB 值示例 |
|---|---|---|
| frame | 主浏览器框架颜色 | [33, 33, 33] |
| toolbar | 工具栏背景色 | [207, 221, 192] |
| tab_text | 活动标签页文本颜色 | [0, 0, 0] |
| ntp_background | 新标签页背景 | [255, 255, 255] |
| bookmark_text | 书签文本颜色 | [0, 0, 0] |
使用 RGB 数组指定颜色可以精确控制主题的外观。
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md12
蓝光滤镜功能需要 JavaScript 来修改页面内容，方法是注入 CSS 或应用滤镜叠加。此实现超越了基础主题设置。
蓝光滤镜工作流程图
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md5 Projects/2-Intermediate/Chrome-Theme-Extension.md19
Chrome 主题扩展满足了几个关键的用户需求：
对于色盲用户，可以实现特定的颜色组合来提高可读性和区分 UI 元素。
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md10-14
在为色盲用户设计主题时，应考虑以下策略：
| 色盲类型 | 设计考量 | 推荐的配色方案 |
|---|---|---|
| 全色盲（红绿色盲） | 避免红/绿对比 | 高对比度的蓝/黄色 |
| 二色盲（绿盲） | 使用亮度差异 | 蓝/橙色对比 |
| 三色盲（蓝盲） | 避免蓝/黄色对比 | 红/绿色对比 |
这些考虑因素可以显著改善色觉缺陷用户的使用体验。
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md13
为该扩展程序添加手动控制蓝光滤镜的功能是一项关键的增强。
夜间模式状态转换图
切换功能实现通常包括：
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md19
将项目扩展到多个浏览器工作需要解决不同的扩展 API 和 manifest 要求。
| 浏览器 | Manifest 版本 | 主要区别 | 额外考量 |
|---|---|---|---|
| Chrome | Manifest V3 | 使用 Service Workers | Chrome Web Store 要求 |
| Firefox | Manifest V2 | 使用后台页面 | Add-on 审查流程 |
| Edge | Manifest V3 | 类似于 Chrome | Microsoft Store 要求 |
| Opera | Manifest V2/V3 | 类似于 Chrome | Opera Add-ons 商店 |
每个浏览器都有自己的扩展商店，具有不同的提交和批准流程。
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md20
将扩展程序部署到 Chrome Web Store 的过程包括几个步骤：
Chrome Web Store 部署流程图
商店列表应包括：
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md18
Chrome 扩展开发的主要来源是官方的 Chrome 开发者文档。
几个现有的项目可以作为实现的参考。
这些示例展示了主题方面和蓝光滤镜的实现。
来源： Projects/2-Intermediate/Chrome-Theme-Extension.md22-29
此 Chrome 主题扩展项目是 App Ideas Collection 中的二级（中级）项目，需要：