企业官网建设流程全解析

Carbon Trigger 浏览器扩展实战：Web-Dev-For-Beginners 仓库中基于 CO2 Signal API 的扩展入门

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners

本文围绕 Web-Dev-For-Beginners 仓库第 5 课（Browser Extension）的"Starter Code"说明文档展开，带你完整走通 Carbon Trigger 扩展的获取、构建与安装流程：用 npm 安装依赖、用 Webpack 打包出dist目录，再通过 Edge 的 "Load Unpacked" 机制把扩展装进浏览器。读完本篇，你能独立完成一个 Manifest V3 浏览器扩展的本地构建与加载，并理解"彩色圆点"如何随所在区域的电力碳强度实时变化。

一、这个扩展要解决什么问题

Carbon Trigger 是一个浏览器扩展：它调用 tmrow 公司的 CO2 Signal API 追踪某个区域的电网用能情况，让你在浏览器里随时获得"你所在地区的电力有多'重'"的提醒。使用场景很直接——在电网碳强度高的时段，把洗衣机的烘干、充电等耗电活动延后到低碳时段再执行。这种"圆点（dot）"式提示系统的灵感来自面向加州排放数据的 Energy Lollipop 扩展（仓库英文原文见 5-browser-extension/start/README.md，本篇所依据的印地语译本见 5-browser-extension/start/translations/README.hi.md）。

模块层面的背景在 5-browser-extension/README.md 中也有说明：该扩展可在 Edge、Chrome 与 Firefox 上工作，本质上是一个"针对非常具体任务的小型网站"，整个第 5 课按"浏览器工作原理 → 表单与本地存储 → 后台任务与性能"三节递进，而 Starter Code 正是这节课程配套的练习起点。

二、环境要求与构建步骤

2.1 前置条件

• 本地已安装 npm；
• 将本份代码复制（下载）到本地任意文件夹后在该目录中操作。

从 5-browser-extension/start/package.json 可以确认具体版本约束：engines字段要求npm >= 9.0.0、node >= 18.0.0；扩展的 npm 包名为carbon-trigger-extension，作者是 Microsoft Cloud Advocacy Team，许可证为 MIT。依赖非常精简：

2.2 安装依赖与构建

在扩展目录中依次执行：

npm install # 安装 package.json 中声明的全部依赖 npm run build # 执行 webpack 打包，产物输出到 dist/

package.json的scripts中还额外提供了一个watch脚本（webpack --watch），适合在开发阶段边改边自动重新打包；test脚本目前是占位实现（exit 1），说明仓库没有为这部分配置自动化测试。构建完成后，浏览器加载的就是dist/目录。

三、在 Edge 中安装（Load Unpacked）

安装步骤（适用于 Edge，Chrome 的操作路径基本一致）：

1. 点击浏览器右上角的"三点"菜单，进入扩展（Extensions）面板；
2. 选择Load Unpacked（加载解压缩的扩展）；
3. 在弹出的目录选择框中选中构建产物dist文件夹，扩展即完成加载。

关于dist目录里装的是什么，仓库中已包含一份构建后的样例，可直接查看：

• 5-browser-extension/start/dist/manifest.json：声明manifest_version: 3，扩展名为 "My Carbon Trigger"（版本 0.1.0），host_permissions为<all_urls>（跨域请求 API 所需），background.service_worker指向background.js，action.default_popup指向index.html——即点击扩展图标时弹出的那个表单/结果页面；
• 5-browser-extension/start/dist/background.js：starter 版本只是一个占位骨架，注释写着 "add listener here / draw the icon here"，提示学习者在此实现"接收 popup 发来的颜色消息、绘制图标"的逻辑；
• 5-browser-extension/start/dist/main.js、5-browser-extension/start/dist/index.html、5-browser-extension/start/dist/styles.css：popup 页面的脚本、结构与样式。

四、两个必填配置：API 密钥与区域代码

扩展装好后要真正跑起来，需要在扩展弹出的界面中填入两项配置：

1. CO2 Signal API 密钥：向 CO2 Signal（co2signal.com）申请，流程是通过邮箱获取；
2. 区域代码：对应 Electricity Map（electricitymap.org）中你所在区域的 zone code。文档中给出的示例：作者位于波士顿，使用的是US-NEISO。

提交后，浏览器扩展工具栏中的彩色圆点会随该区域的电网碳强度变化，并借此提示你"哪些耗电活动现在做比较合适"。

五、从仓库源码看"彩色圆点"的实现

Starter 目录下的 5-browser-extension/start/src/index.js 是一份刻意挖空的骨架，只保留了 1～6 的注释提纲（表单字段、结果容器、监听器、API 调用、用户密钥与区域设置、表单提交处理），需要学习者自己补全。而配套的 5-browser-extension/solution/src/index.js 给出了完整参照实现，可作为学习对照：

• 颜色映射（solution/src/index.js）：calculateColor维护两个数组——co2Scale = [0, 150, 600, 750, 800]（gCO2/kWh 分档阈值）与colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']（从绿到深褐的颜色档）。函数把当前碳强度归入分档，再通过chrome.runtime.sendMessage({ action: 'updateIcon', value: { color } })把目标颜色发给后台 service worker 去绘制图标——这正是 starter 中background.js留白处要实现的部分；
• API 调用（solution/src/index.js）：displayCarbonUsage用 axios 请求https://api.co2signal.com/v1/latest，查询参数countryCode传区域代码，请求头携带auth-token: <apiKey>。取回数据后先校验carbonIntensity与fossilFuelPercentage是否缺失（缺失则抛出异常），随后展示"每千瓦时碳排放的克数"与"化石燃料发电占比"，请求失败时显示 "Sorry, data unavailable for the selected region." 的兜底文案；
• 配置持久化（solution/src/index.js）：setUpUser把apiKey与region写入localStorage。下次打开扩展时init会先读回这两项——有值则直接刷新数据、无值则显示表单，这也是本模块"Forms and local storage"一节的核心知识点；
• 重置逻辑（solution/src/index.js）：点击 clear 按钮只移除localStorage中的region（保留 API 密钥），然后重新执行init回到表单页。

六、小结与延伸

回到 Starter Code 文档的主线：npm install→npm run build→ Edge 中 Load Unpacked 选择dist→ 填入 API 密钥与区域代码 → 观察工具栏圆点变色，这就是完整闭环。若想把练习做深，可以继续对照仓库中同模块的两节配套课程：5-browser-extension/2-forms-browsers-local-storage/README.md（表单、localStorage 的用法）与 5-browser-extension/3-background-tasks-and-performance/README.md（后台任务与性能剖析），它们分别对应本文第五节中 popup 表单与background.js图标绘制两条线索。

【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners