Web-Dev-For-Beginners 第 5 模块实战基于 CO2 Signal API 的 Carbon Trigger 浏览器扩展完整解析【免费下载链接】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 模块「浏览器扩展」的完整解决方案文档讲解如何用 CO2 Signal API 构建一个监测所在地区电网碳强度的浏览器扩展从npm install、webpack 构建到在 Edge 中通过 “Load Unpacked” 加载dist产物、配置 API 密钥与区域代码直至彩色圆点图标实时反映区域能耗。读完本文你将掌握该扩展的完整运行流程、关键参数API 密钥、区域代码如US-NEISO的获取方式并能结合仓库源码理解表单提交、数据校验、颜色映射与本地持久化的实现细节。扩展要解决的问题把电网碳强度放进浏览器工具栏Carbon Trigger 是一个“ad hoc按需触发”的浏览器扩展它调用 tmrow 公司的 CO2 Signal API查询你所在区域当前电力的碳强度carbon intensity即每千瓦时电力排放的 CO2 克数与化石燃料发电占比并把结果浓缩成浏览器扩展栏上的一个彩色圆点。文档给出的使用场景很具体当你看到圆点偏向高能耗颜色时就知道此时运行烘干机、大批量渲染任务等高能耗活动并不合适可以延后到低碳时段执行。换句话说扩展把“区域电网有多‘重’”这个原本抽象的环境指标变成了开发者能随时瞥见、并据此调整行为的信号。文档还指出这套“圆点dot”图标概念借鉴了针对加州排放数据的 Energy Lollipop 扩展Energy Lollipop 为纯文本提及非仓库文件。该扩展是第 5 模块三个课程——浏览器工作原理About the browser、表单与本地存储Forms and local storage、后台任务与性能Background tasks and performance——的综合实战项目模块总览见 第 5 模块 README。运行环境与构建流程解决方案代码位于 5-browser-extension/solution 目录原始文档说明的运行前提与操作步骤如下这里结合 package.json 的实际内容补充了版本约束。环境前提机器上需要安装 npm。从 package.json 声明的engines字段看项目要求 npm ≥ 9.0.0、Node.js ≥ 18.0.0见 package.json 第 6-9 行。第一步把代码下载到本地文件夹然后安装全部依赖npm install第二步用 webpack 构建扩展npm run build对照 package.json 第 10-14 行build脚本实际执行的就是webpack另有一个watch脚本webpack --watch用于开发时监听变更自动重建。构建产物输出到dist目录——这正是下一步安装时要选择的目标文件夹。依赖结构也很简洁package.json 第 22-28 行生产依赖只有一个axios^1.15.0用于向 CO2 Signal API 发起请求开发依赖是webpack^5.105.4与webpack-cli^5.1.4负责把src/index.js打包成浏览器扩展可加载的产物。包名carbon-trigger-extension、关键词chrome extension/edge extension/carbon usage tracker也印证了这是一个面向 Edge/Chromium 系的扩展项目。在 Edge 中安装Load Unpacked 流程文档给出的安装步骤以 Edge 为例Chrome 等其他 Chromium 浏览器流程相同点击浏览器右上角的“三个点”菜单进入“扩展”Extensions面板选择“Load Unpacked”加载解压缩扩展来添加一个新扩展在弹出的目录选择框中打开构建生成的dist文件夹扩展随即加载完成。需要说明的前提dist目录只有在执行过npm run build后才存在若加载失败请先确认构建是否成功。使用前提API 密钥与区域代码扩展装好之后首次打开界面会出现一个表单需要填入两样东西源码中对应的输入框选择器分别是.api-key与.region-name见 src/index.js 第 4-6 行1. CO2 Signal API 的 API 密钥。需要先在 CO2 Signal 的官网co2signal.com通过邮件方式申请一个密钥文档明确给出了这一获取路径。密钥在请求时以auth-token请求头发送。2. 区域代码region code。该代码对应 Electricity Map 的分区定义可以在 Electricity Map 的 zones 接口api.electricitymap.org/v3/zones纯文本端点说明中查到。文档给出了实例在波士顿作者使用的区域代码是US-NEISO新英格兰独立系统运营商辖区。填入并点击提交后扩展会立即请求一次数据此后每次打开扩展都会自动读取已保存的配置并刷新结果这一点在下方源码剖析中展开。源码剖析从表单提交到彩色圆点解决方案的核心逻辑全部在 src/index.js 中约 130 行可以按“数据获取 → 颜色映射 → 状态持久化”三条线索阅读。数据获取与校验displayCarbonUsagedisplayCarbonUsage函数第 34-68 行是数据入口await axios .get(https://api.co2signal.com/v1/latest, { params: { countryCode: region }, headers: { auth-token: apiKey }, })请求端点是 CO2 Signal 的v1/latest查询参数countryCode传入的正是你填写的区域代码如US-NEISO认证依赖自定义请求头auth-token这就是文档要求你先申请密钥的原因拿到响应后会做防御性校验若carbonIntensity或fossilFuelPercentage缺失则抛出错误避免把undefined渲染到界面上成功后界面显示两项指标碳强度取整后标注为“grams (grams C02 emitted per kilowatt hour)”化石燃料占比保留两位小数并标注“percentage of fossil fuels used to generate electricity”失败路径密钥错误、区域无数据、网络问题统一降级为一句提示“Sorry, data unavailable for the selected region.”同时隐藏 loading 与结果容器。颜色映射calculateColor 的色阶逻辑文档中“工具栏圆点变色”的效果来自calculateColor函数第 17-32 行。它维护两条平行的数组let co2Scale [0, 150, 600, 750, 800]; let colors [#2AA364, #F5EB4D, #9E4229, #381D02, #381D02];即把碳强度分为 5 档0 g/kWh 附近是绿色#2AA364150 附近转黄#F5EB4D600 进入砖红#9E4229750 与 800 以上统一为深褐#381D02。函数把传入值与色阶端点做最近距离比较后通过chrome.runtime.sendMessage({ action: updateIcon, value: { color } })把颜色派发给扩展后台最终体现在工具栏圆点上——这正是文档描述的“圆点颜色反映你所在区域的能耗水平”的底层机制。状态持久化localStorage 与初始化流程setUpUser第 72-80 行会把表单里的apiKey和region写入localStorage随后触发首次数据请求。扩展启动时的init函数第 89-116 行则负责两条分支本地没有存储密钥或区域时显示表单、隐藏结果区等待用户填写已有存储值时跳过表单直接调用displayCarbonUsage用保存的配置拉取数据——这就是文档所说“一旦填入密钥与区域圆点会自动更新”的原因。此外还有一个“清除”按钮reset函数第 118-123 行只移除region一项存储后重新走init流程方便切换区域而无需重新申请密钥。小结与延伸阅读本文覆盖了 第 5 模块解决方案文档 的完整内容扩展定位、npm installnpm run build构建流程、Edge “Load Unpacked” 安装步骤、API 密钥与区域代码US-NEISO示例的获取以及彩色圆点的行为预期并基于 package.json 与 src/index.js 补充了版本约束、webpack 脚本、API 请求参数、色阶映射与 localStorage 持久化等源码级细节。如果你想继续深入本模块建议按以下顺序阅读课程文档About the browser——浏览器与扩展的架构基础其中包含manifest.json、webpack.config.js等典型扩展目录结构的讲解Forms and local storage——本扩展表单与本地存储部分的教学版Background tasks and performance——扩展的后台任务与性能测量方法。仓库中该解决方案的文档还维护了西语、法语、意大利语、日语、马来语、印地语等译本位于 5-browser-extension/solution/translation 目录可与原文对照阅读。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Web-Dev-For-Beginners 第 5 模块实战：基于 CO2 Signal API 的 Carbon Trigger 浏览器扩展完整解析
Web-Dev-For-Beginners 第 5 模块实战基于 CO2 Signal API 的 Carbon Trigger 浏览器扩展完整解析【免费下载链接】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 模块「浏览器扩展」的完整解决方案文档讲解如何用 CO2 Signal API 构建一个监测所在地区电网碳强度的浏览器扩展从npm install、webpack 构建到在 Edge 中通过 “Load Unpacked” 加载dist产物、配置 API 密钥与区域代码直至彩色圆点图标实时反映区域能耗。读完本文你将掌握该扩展的完整运行流程、关键参数API 密钥、区域代码如US-NEISO的获取方式并能结合仓库源码理解表单提交、数据校验、颜色映射与本地持久化的实现细节。扩展要解决的问题把电网碳强度放进浏览器工具栏Carbon Trigger 是一个“ad hoc按需触发”的浏览器扩展它调用 tmrow 公司的 CO2 Signal API查询你所在区域当前电力的碳强度carbon intensity即每千瓦时电力排放的 CO2 克数与化石燃料发电占比并把结果浓缩成浏览器扩展栏上的一个彩色圆点。文档给出的使用场景很具体当你看到圆点偏向高能耗颜色时就知道此时运行烘干机、大批量渲染任务等高能耗活动并不合适可以延后到低碳时段执行。换句话说扩展把“区域电网有多‘重’”这个原本抽象的环境指标变成了开发者能随时瞥见、并据此调整行为的信号。文档还指出这套“圆点dot”图标概念借鉴了针对加州排放数据的 Energy Lollipop 扩展Energy Lollipop 为纯文本提及非仓库文件。该扩展是第 5 模块三个课程——浏览器工作原理About the browser、表单与本地存储Forms and local storage、后台任务与性能Background tasks and performance——的综合实战项目模块总览见 第 5 模块 README。运行环境与构建流程解决方案代码位于 5-browser-extension/solution 目录原始文档说明的运行前提与操作步骤如下这里结合 package.json 的实际内容补充了版本约束。环境前提机器上需要安装 npm。从 package.json 声明的engines字段看项目要求 npm ≥ 9.0.0、Node.js ≥ 18.0.0见 package.json 第 6-9 行。第一步把代码下载到本地文件夹然后安装全部依赖npm install第二步用 webpack 构建扩展npm run build对照 package.json 第 10-14 行build脚本实际执行的就是webpack另有一个watch脚本webpack --watch用于开发时监听变更自动重建。构建产物输出到dist目录——这正是下一步安装时要选择的目标文件夹。依赖结构也很简洁package.json 第 22-28 行生产依赖只有一个axios^1.15.0用于向 CO2 Signal API 发起请求开发依赖是webpack^5.105.4与webpack-cli^5.1.4负责把src/index.js打包成浏览器扩展可加载的产物。包名carbon-trigger-extension、关键词chrome extension/edge extension/carbon usage tracker也印证了这是一个面向 Edge/Chromium 系的扩展项目。在 Edge 中安装Load Unpacked 流程文档给出的安装步骤以 Edge 为例Chrome 等其他 Chromium 浏览器流程相同点击浏览器右上角的“三个点”菜单进入“扩展”Extensions面板选择“Load Unpacked”加载解压缩扩展来添加一个新扩展在弹出的目录选择框中打开构建生成的dist文件夹扩展随即加载完成。需要说明的前提dist目录只有在执行过npm run build后才存在若加载失败请先确认构建是否成功。使用前提API 密钥与区域代码扩展装好之后首次打开界面会出现一个表单需要填入两样东西源码中对应的输入框选择器分别是.api-key与.region-name见 src/index.js 第 4-6 行1. CO2 Signal API 的 API 密钥。需要先在 CO2 Signal 的官网co2signal.com通过邮件方式申请一个密钥文档明确给出了这一获取路径。密钥在请求时以auth-token请求头发送。2. 区域代码region code。该代码对应 Electricity Map 的分区定义可以在 Electricity Map 的 zones 接口api.electricitymap.org/v3/zones纯文本端点说明中查到。文档给出了实例在波士顿作者使用的区域代码是US-NEISO新英格兰独立系统运营商辖区。填入并点击提交后扩展会立即请求一次数据此后每次打开扩展都会自动读取已保存的配置并刷新结果这一点在下方源码剖析中展开。源码剖析从表单提交到彩色圆点解决方案的核心逻辑全部在 src/index.js 中约 130 行可以按“数据获取 → 颜色映射 → 状态持久化”三条线索阅读。数据获取与校验displayCarbonUsagedisplayCarbonUsage函数第 34-68 行是数据入口await axios .get(https://api.co2signal.com/v1/latest, { params: { countryCode: region }, headers: { auth-token: apiKey }, })请求端点是 CO2 Signal 的v1/latest查询参数countryCode传入的正是你填写的区域代码如US-NEISO认证依赖自定义请求头auth-token这就是文档要求你先申请密钥的原因拿到响应后会做防御性校验若carbonIntensity或fossilFuelPercentage缺失则抛出错误避免把undefined渲染到界面上成功后界面显示两项指标碳强度取整后标注为“grams (grams C02 emitted per kilowatt hour)”化石燃料占比保留两位小数并标注“percentage of fossil fuels used to generate electricity”失败路径密钥错误、区域无数据、网络问题统一降级为一句提示“Sorry, data unavailable for the selected region.”同时隐藏 loading 与结果容器。颜色映射calculateColor 的色阶逻辑文档中“工具栏圆点变色”的效果来自calculateColor函数第 17-32 行。它维护两条平行的数组let co2Scale [0, 150, 600, 750, 800]; let colors [#2AA364, #F5EB4D, #9E4229, #381D02, #381D02];即把碳强度分为 5 档0 g/kWh 附近是绿色#2AA364150 附近转黄#F5EB4D600 进入砖红#9E4229750 与 800 以上统一为深褐#381D02。函数把传入值与色阶端点做最近距离比较后通过chrome.runtime.sendMessage({ action: updateIcon, value: { color } })把颜色派发给扩展后台最终体现在工具栏圆点上——这正是文档描述的“圆点颜色反映你所在区域的能耗水平”的底层机制。状态持久化localStorage 与初始化流程setUpUser第 72-80 行会把表单里的apiKey和region写入localStorage随后触发首次数据请求。扩展启动时的init函数第 89-116 行则负责两条分支本地没有存储密钥或区域时显示表单、隐藏结果区等待用户填写已有存储值时跳过表单直接调用displayCarbonUsage用保存的配置拉取数据——这就是文档所说“一旦填入密钥与区域圆点会自动更新”的原因。此外还有一个“清除”按钮reset函数第 118-123 行只移除region一项存储后重新走init流程方便切换区域而无需重新申请密钥。小结与延伸阅读本文覆盖了 第 5 模块解决方案文档 的完整内容扩展定位、npm installnpm run build构建流程、Edge “Load Unpacked” 安装步骤、API 密钥与区域代码US-NEISO示例的获取以及彩色圆点的行为预期并基于 package.json 与 src/index.js 补充了版本约束、webpack 脚本、API 请求参数、色阶映射与 localStorage 持久化等源码级细节。如果你想继续深入本模块建议按以下顺序阅读课程文档About the browser——浏览器与扩展的架构基础其中包含manifest.json、webpack.config.js等典型扩展目录结构的讲解Forms and local storage——本扩展表单与本地存储部分的教学版Background tasks and performance——扩展的后台任务与性能测量方法。仓库中该解决方案的文档还维护了西语、法语、意大利语、日语、马来语、印地语等译本位于 5-browser-extension/solution/translation 目录可与原文对照阅读。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考