Web-Dev-For-Beginners 浏览器扩展造型实战：用 CSS 重新设计碳排放追踪扩展的界面
本篇指南围绕 Web-Dev-For-Beginners 仓库第 5 课「浏览器扩展」的第一份作业「重新造型你的套件（Restyle Your Extension）」展开：在碳排放追踪扩展（Carbon Trigger Extension）已完成 HTML 结构的前提下，分析其默认样式、设计配色与排版方案、改写 CSS 实现专属视觉风格，并完成构建测试与验收。读完后，你将掌握一套可复用的扩展界面重塑流程：从审计现有 CSS 自定义属性，到落地配色、字体、间距方案，再到 npm run build 后在浏览器开发者模式下验证各视觉状态。
作业背景：自带基础造型的扩展项目
本课程的扩展已经包含了造型设定，但你不需要非得使用它们——作业的出发点就是改寫它的 CSS 檔來重新構築擴展的造型。
具体来说，这个扩展项目是一个 Manifest V3 的 Chrome/Edge 扩展：
- 扩展的 popup 入口由 manifest.json 定义，
action.default_popup指向index.html，即点击扩展图标后弹出的页面； - 弹窗页面结构位于 index.html，
<body>上带有container类名，页面顶部有一幅植物与人物插画、一个欢迎标题，以及预留的表单区（<!--form area-->）与结果区（<!--result area-->），最后通过<script src="main.js">加载构建产物； - 默认样式位于 styles.css。
作业的完整目标（对应英文原版作业文档 assignment.md）是：扩展虽然带有基础 CSS 样式，但这份作业要求你创造一个独特的视觉身份，既体现个人风格，又保持良好的可用性。
第一步：分析当前设计（Analyze）
动手改样式之前，作业要求你先审視现有的 CSS 结构：
- 定位扩展项目中的 CSS 文件；
- 审查当前的样式方案与配色；
- 识别布局、排版与视觉层级上的改进空间；
- 思考设计如何支持用户目标（轻松完成表单、清晰展示数据）。
结合仓库源码，可以精确回答「当前样式是什么」这个问题。默认 styles.css 实际上是一套精简版 Basic.css（文件内注释注明 courtesy of vladocar/Basic.css），核心机制有四个：
1. CSS 自定义属性定义设计令牌（styles.css）：
:root {
--sans: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
--mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 'Courier New', monospace;
--c1: #0074d9; /* 主色：链接、按钮背景 */
--c2: #eee; /* 输入框背景 */
--c3: #fff; /* 页面背景 */
--c4: #000; /* 文字颜色 */
--c5: #fff; /* 按钮文字 */
--m1: 8px; /* 间距 */
--rc: 8px; /* 圆角 */
}
2. 跟随系统深色模式（styles.css）：
@media (prefers-color-scheme: dark) {
:root {
--c2: #333;
--c3: #1e1f20;
--c4: #fff;
}
}
这意味着只要覆盖 --c2/--c3/--c4，就能自动适配深色浏览器主题——这是「跨浏览器主题考虑」在源码中的直接体现。
3. 统一的圆角与按钮外观：input、button、img 共享 border-radius: var(--rc)；按钮通过 -webkit-appearance: none 移除原生外观，统一使用 --c1 作背景。
4. 基于透明度的悬停反馈：button:hover、button:focus 等仅将 opacity 降到 0.8（styles.css）。
对应的 HTML 侧，作业后续步骤中你会在 index.html 的基础上添加两个区块：配置表单 .form-data（含 #region、#api 两个必填输入框与 .search-btn 提交按钮）和结果区 .result（含 .loading、.errors、.data、.result-container 与 .clear-btn）。这些类名就是你在改造样式时的全部选择器锚点。
第二步：设计你的定制样式（Design）
作业要求你设计一套连贯的视觉方案，覆盖三个维度：
配色（Color Scheme）
- 选择一套反映环境主题的主色板（与「碳排放追踪」的产品语义呼应，例如绿色系或大地色系）；
- 确保足够的对比度以满足无障碍要求（可用对比度检查工具验证前景/背景色）；
- 考虑配色在不同浏览器主题下的表现——对照源码可知，你的方案必须同时通过
:root的亮色值和prefers-color-scheme: dark的暗色值两套令牌。
字体（Typography）
- 选择在小尺寸扩展弹窗中依然易读的字体（默认方案使用了
system-ui字体栈 +1em/1.6的行高，这是很稳妥的起点）； - 用字号与字重建立清晰的层级（默认
h1: 1.5em、h2: 1.4em）； - 保证文字在浅色与深色浏览器主题下都可读。
布局与间距（Layout and Spacing）
- 改进表单元素与数据展示的视觉组织；
- 添加合适的 padding 与 margin 提升可读性（默认
.container的margin为1.5em，.result的margin-top为1em，这些就是你要审视的基线值）； - 考虑不同屏幕尺寸下的响应式原则。
第三步：实现你的设计（Implement）
修改 CSS 文件来落地设计。作业给出的起手示例如下：
/* Example starting points for customization */
.form-data {
/* Style the configuration form */
background: /* your choice */;
padding: /* your spacing */;
border-radius: /* your preference */;
}
.result-container {
/* Style the data display area */
background: /* complementary color */;
border: /* your border style */;
margin: /* your spacing */;
}
/* Add your custom styles here */
需要重点着色的区域：
- 表单元素：输入框、标签、提交按钮（
.form-data内的input、label、.search-btn）； - 结果展示：数据容器（
.result-container）、文字样式、加载状态（.loading）； - 交互元素：悬停效果、按钮状态、过渡动画；
- 整体布局：容器间距（
.container）、背景色、视觉层级。
从源码结构看，最高杠杆的改法不是逐个选择器覆盖，而是直接改 :root 中的设计令牌（--c1 到 --c5、--rc、--m1）并扩展深色模式分支——因为整份 Basic.css 都通过这些变量取色，一处修改即可全局生效，且天然保持亮/暗两套主题的一致性。
第四步：测试与打磨（Test and Refine）
实现后要按作业规定的流程验证：
- 构建：在你的扩展项目目录运行
npm run build。对应 package.json 中的"build": "webpack"脚本，Webpack 会把src/index.js打包进dist/；engines字段要求 Node >= 18、npm >= 9； - 加载：在浏览器扩展管理页重新加载更新后的扩展（首次安装则选择「加载已解压的扩展程序」并指向
dist/文件夹，参考 solution/README.md 的安装说明）； - 测试：覆盖所有视觉状态——表单录入、加载中、结果展示、错误提示；
- 验证：用浏览器开发者工具验证无障碍表现（焦点可见性、对比度）；
- 打磨：根据实际使用反馈迭代样式。
一个有趣的源码细节：官方完整答案 solution/dist/styles.css 与起点模板 start/dist/styles.css 的内容完全一致——也就是说参考实现没有动造型层，视觉身份正是留给你发挥的部分，「新造型能正常地套用在程式中」就是验收底线。
创意挑战（Creative Challenges）
作业按三个层级提供了进阶方向：
基础级
- 更新配色与字体，形成连贯的主题；
- 改进界面整体的间距与对齐；
- 为交互元素添加微妙的悬停效果。
进阶级
- 为扩展设计自定义图标或图形；
- 实现不同状态之间的平滑过渡；
- 为 API 调用创建独特的加载动画。
高阶级
- 设计多套主题选项（浅色/深色/高对比度）；
- 针对不同浏览器窗口尺寸实现响应式设计；
- 添加提升用户体验的微交互。
提交要求与学习评量
提交内容应包含：
- 带有你自定义样式的修改后 CSS 文件；
- 展示扩展在不同状态下（表单、加载中、结果）的截图；
- 简短说明（2～3 句），解释你的设计选择及其如何改善用户体验。
学习评量（继承自 assignment.zh-tw.md 的评分表）：
| 作业内容 | 优良 | 普通 | 待改进 |
|---|---|---|---|
| 新造型能正常地套用在程式中 | 造型规划不完整 | 套件出现问题 |
英文原版作业则给出了更细的四维评分细则（4 分制），可作为自我检查清单：
| 维度 | 4 分（优秀）标准摘要 | 1 分（起步）表现 |
|---|---|---|
| 视觉设计 | 有创意、连贯，增强可用性并体现扎实的设计原则 | 样式改动极少或设计不连贯 |
| 功能性 | 所有样式在不同状态与浏览器环境下完美工作 | 存在影响可用性的显著样式问题 |
| 代码质量 | 整洁、组织良好，类名有意义、选择器高效 | 结构差或样式过度复杂 |
| 无障碍 | 优秀的色彩对比、可读字体，并考虑残障用户 | 几乎未关注无障碍要求 |
实战建议（Tips for Success）
- 从细微处开始：先做小改动，逐步过渡到更醒目的造型。排版与间距的小改进往往对「品质感」影响巨大；
- 双主题测试：在浏览器浅色与深色主题下都验证你的扩展；
- 用相对单位：
em、rem比固定像素更具扩展性； - 用 CSS 自定义属性维持间距一致性（与源码中
--m1、--rc的用法一脉相承）； - 校验 CSS 语法，确保选择器书写正确。
常见误区：不要为视觉吸引力牺牲可用性——扩展既要好看，也要好用。具体地：保持关键信息易读、按钮与交互元素足够好点按、为用户操作保留清晰的视觉反馈、并用真实数据（而非占位文本）测试设计。
完成这份作业后，你可以继续第 5 课后续内容：表单、浏览器与 Local Storage 与 后台任务与性能，让重造好型的扩展进一步接上数据与后台能力。
atomcodeClaude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。 ｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get StartedRust0624
Hy4-previewHy4 preview 是由腾讯混元团队研发的新一代混合专家（MoE）旗舰模型。模型总参数量 770B，每个 token 激活 49B，主干共包含78层，第一层采用标准 FFN，其余 77 层均为 MoE 结构，每层包含 256 个路由专家与 1 个共享专家，每个 token 激活 top-8 路由专家及共享专家。主干之外原生内置 1 层 MTP（总参数量 10B，激活 0.7B）以支持投机解码。Python00
GLM-5.3GLM-5.3 与 GLM-5.2 使用相同的基座模型——所有提升均来自后训练。与 GLM-5.2 相比，它在复杂编程和长程任务上的表现显著提升。Jinja00- GLM-5.3-FlashGLM-5.3-Flash (320B-A18B)，是GLM-5系列的首个原生多模态模型。320B总参数，能力超过GLM-5.2Jinja00
Spark-X2.5-4BSpark-X2.5-4B 旨在让强大的 AI 更实用、更高效、更易获得。在广泛日常任务中表现强劲，涵盖对话、写作、翻译、推理、编码、工具调用以及智能体工作流，并在同等规模的开源模型中取得领先成绩。Spark-X2.5 将面向效率的架构与最高 1M tokens 的原生上下文窗口相结合，并支持 200 多种语言。Python00- Spark-X2.5-1.7BSpark-X2.5-1.7B 旨在让强大的 AI 更加实用、高效且易于获取。这些模型在广泛的日常任务中表现出色，涵盖对话、写作、翻译、推理、编程、工具调用和智能体工作流，并在同等规模的开源模型中取得领先结果。Spark-X2.5 将面向效率的架构与最高 1M tokens 的原生上下文窗口相结合，并支持 200 多种语言。Python00
项目优选
kernel
pytorch
kernel
leetcode
ops-transformer
docs
jiuwenswarmcann-learning-hubops-nn
openGauss-server