Web-Dev-For-Beginners 实战项目构建 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 模块的 Carbon Trigger 浏览器扩展为对象讲解如何基于 tmrow 的 CO2 Signal API 构建一个可在浏览器中实时查看区域电力碳排放强度的扩展。读完本文你将掌握从环境准备、webpack 构建、Edge 加载扩展到获取 API 密钥与区域代码、理解彩色圆点状态机制的完整实战链路并深入读懂扩展核心源码 index.js 的实现原理。扩展要解决什么问题Carbon Trigger 是一个微型网站式的浏览器扩展它调用 CO2 Signal API 查询指定区域的电力消耗与碳强度carbon intensity并将结果以直观的彩色圆点呈现在浏览器扩展栏中。用户输入 API 密钥与区域代码后即可随时ad hoc评估当前时刻是否适合执行高耗能活动——例如在区域用电高峰时延迟使用烘干机这类碳排放强度高的行为。该扩展由微软 Green Cloud Advocacy 团队提出原始创意来自 Asim Hussain 的 Green Principles 的综合实战产物。环境准备与项目构建前置条件开始前需要确保本机已安装 npm项目 package.json 声明了运行约束npm 9.0.0、node 18.0.0。将代码复制到本地目录后执行依赖安装npm install该项目仅依赖一个运行时包axios ^1.15.0用于发起 API 请求开发依赖为webpack ^5.105.4与webpack-cli ^5.1.4。安装完成后使用 webpack 打包生成扩展产物npm run buildpackage.json中scripts.build对应webpack命令产物输出到dist目录后续加载扩展即指向该目录。开发调试阶段可使用npm run watch启动 webpack 的监听模式源码改动会自动重新打包省去手动重复构建。在 Edge 浏览器中加载扩展构建完成后按以下步骤将扩展安装到 Edge点击浏览器右上角的三个点菜单进入扩展面板若尚未开启打开左下角的开发人员模式Developer mode开关选择加载解压缩的扩展Load Unpacked在弹出的目录选择框中打开dist文件夹扩展即被加载。加载成功后扩展图标会出现在浏览器扩展栏中。需要说明的是Load Unpacked是 Chrome/Edge 系浏览器对开发中扩展的标准加载方式无需签名打包正式分发时才需要走应用商店的打包审核流程。获取 API 密钥与区域代码扩展运行依赖两项关键信息二者缺一不可CO2 Signal API 密钥前往 CO2 Signal 官网co2signal.com在页面输入邮箱即可通过邮件获取 API 密钥区域代码region code对应 Electricity Map 的电力区域标识可查询 api.electricitymap.org/v3/zones 获取完整区域列表并与 Electricity Map 地图 对照确认。例如波士顿对应US-NEISO不同国家/地区代码各不相同需按实际位置填写。界面交互与彩色圆点状态机制在扩展界面输入 API 密钥与区域代码后扩展会立即发起一次数据请求浏览器扩展栏中的彩色圆点随即改变颜色反映该区域的实时能耗水平提示用户当前是否适合执行高耗能活动。圆点系统的核心实现在 solution/src/index.js 的calculateColor函数中它将碳强度数值映射到一组预设的色阶上——calculateColor async (value) { let co2Scale [0, 150, 600, 750, 800]; let colors [#2AA364, #F5EB4D, #9E4229, #381D02, #381D02]; let closestNum co2Scale.sort((a, b) { return Math.abs(a - value) - Math.abs(b - value); })[0]; let num (element) element closestNum; let scaleIndex co2Scale.findIndex(num); let closestColor colors[scaleIndex]; chrome.runtime.sendMessage({ action: updateIcon, value: { color: closestColor } }); };其判断逻辑可拆解为定义五个分级阈值[0, 150, 600, 750, 800]对应五个颜色[#2AA364, #F5EB4D, #9E4229, #381D02, #381D02]绿 → 黄 → 橙 → 深棕代表从低碳到高碳将当前碳强度值与阈值逐一求距离排序后取最接近的阈值closestNum通过findIndex找到第一个大于该阈值的下标作为颜色索引得到对应颜色通过chrome.runtime.sendMessage发送updateIcon消息由扩展后台更新工具栏图标颜色。这套距离最近阈值 阈值分档取色的方案保证了颜色跳变稳定、分级清晰即便 API 返回数值波动图标也只在跨越阈值时才改变颜色。核心源码深度解析数据请求displayCarbonUsagedisplayCarbonUsage是扩展的数据中枢向 CO2 Signal API 发起请求并渲染结果const displayCarbonUsage async (apiKey, region) { try { await axios .get(https://api.co2signal.com/v1/latest, { params: { countryCode: region }, headers: { auth-token: apiKey }, }) .then((response) { const data response?.data?.data; if (data?.carbonIntensity null || data?.fossilFuelPercentage null) { throw new Error(Missing carbon intensity or fossil fuel data); } let CO2 Math.floor(data.carbonIntensity); calculateColor(CO2); loading.style.display none; form.style.display none; myregion.textContent region; usage.textContent Math.round(data.carbonIntensity) grams (grams C02 emitted per kilowatt hour); fossilfuel.textContent data.fossilFuelPercentage.toFixed(2) % (percentage of fossil fuels used to generate electricity); results.style.display block; }); } catch (error) { console.warn(Data fetch failed:, error.message); loading.style.display none; results.style.display none; errors.textContent Sorry, data unavailable for the selected region.; } };请求要点请求地址为https://api.co2signal.com/v1/latest查询参数countryCode传入区域代码请求头auth-token携带 API 密钥响应中的carbonIntensity表示每千瓦时发电排放的 CO₂ 克数fossilFuelPercentage表示化石燃料发电占比源码对返回数据做了健壮性校验若carbonIntensity或fossilFuelPercentage缺失直接抛出异常并进入错误分支避免渲染损坏数据成功时更新页面上的区域名、碳排放克数与化石燃料占比保留两位小数三个展示区失败时隐藏结果、显示数据不可用的提示文案。状态记忆localStorage 与 setUpUsersetUpUser负责在表单提交后保存用户配置并触发首次请求const setUpUser async (apiKey, region) { localStorage.setItem(apiKey, apiKey); localStorage.setItem(region, region); loading.style.display block; errors.textContent ; clearBtn.style.display block; displayCarbonUsage(apiKey, region); };API 密钥与区域代码通过localStorage持久化。这意味着用户只需配置一次之后打开浏览器扩展就会自动携带已保存的配置发起查询无需重复输入。这也是课程模块 2-forms-browsers-local-storage/README.md 所讲表单 本地存储技术点的直接应用。启动逻辑init 与 resetinit在扩展启动时执行初始化检查根据 localStorage 是否已有配置决定展示表单还是直接展示结果const init async () { const storedApiKey localStorage.getItem(apiKey); const storedRegion localStorage.getItem(region); // 默认将图标置为绿色 chrome.runtime.sendMessage({ action: updateIcon, value: { color: green } }); if (storedApiKey null || storedRegion null) { // 无配置展示表单隐藏结果/加载/清除按钮 form.style.display block; results.style.display none; loading.style.display none; clearBtn.style.display none; errors.textContent ; } else { // 有配置直接用存储的值查询 results.style.display none; form.style.display none; displayCarbonUsage(storedApiKey, storedRegion); clearBtn.style.display block; } };reset用于清除配置并重新初始化const reset async (e) { e.preventDefault(); localStorage.removeItem(region); init(); };文件末尾通过事件监听器接通整个交互链路并以init()启动应用form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e)); init();从骨架到实现的课程设计为便于循序渐进地学习仓库同时提供了 start/src/index.js 骨架代码其中仅保留按编号排列的注释占位表单字段 → 初始化检查 → 表单提交 → 配置用户 → 调用 API → 事件监听与启动引导学习者按 16 的步骤自行补全逻辑最终与 solution/src/index.js 的完整实现对照验证。相关课程与延伸阅读Carbon Trigger 扩展是第 5 模块构建浏览器扩展的收官实战建议按以下顺序系统学习其前置知识关于浏览器理解浏览器工作原理与扩展的加载机制表单与本地存储掌握扩展界面表单构建与localStorage持久化后台任务与性能了解扩展后台脚本、消息通信与性能评估。完成上述内容后你可以尝试将圆点分级色阶替换为自己的配色方案、增加历史数据对比视图或将扩展移植到 Chrome 与 Firefox 验证跨浏览器兼容性——这正符合 Web-Dev-For-Beginners 课程学完即用、动手实战的设计初衷。【免费下载链接】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），仅供参考
