从零构建 Carbon Trigger 浏览器扩展用 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-BeginnersCarbon Trigger 是 Web-Dev-For-Beginners 课程第 5 课「浏览器扩展」的完整示例项目它调用 tmrow 的 CO2 Signal API追踪你所在区域的电力消耗强度并直接在浏览器扩展栏中显示一个随碳排放数据变化的彩色圆点帮你随时判断当前是否适合执行高耗能活动。读完本文你将掌握该扩展的安装构建流程、API 密钥与区域代码的获取方法并通过阅读源码理解其「拉取数据 → 计算颜色 → 更新扩展图标 → 本地持久化」的完整实现链路。项目背景与设计理念Carbon Trigger 的核心思路非常直观电力系统的碳排放强度carbon intensity每时每刻都在变化——当电网中有大量风能、太阳能或核电时用电产生的碳排放较低反之当火电化石燃料占比升高时用电的碳排放强度也随之飙升。扩展所做的就是把这一数据实时呈现在浏览器工具栏上让你在打开一个高耗能应用如视频渲染、游戏、大模型推理之前先看一眼当前区域的用电是否「绿色」。该「圆点」概念借鉴了面向加州排放数据的 Energy Lollipop 扩展 中有明确说明。完成版源码位于 5-browser-extension/solution构建产物可直接加载的扩展位于其dist/目录。环境准备与快速开始环境要求运行本项目前你需要安装 Node.js 与 npm。仓库中的 package.json 明确声明了版本要求engines: { npm: 9.0.0, node: 18.0.0 }即要求 npm 9.0.0、Node.js 18.0.0engines字段声明了扩展所依赖的运行环境。安装依赖并构建将 5-browser-extension/solution 目录的代码下载到本地文件夹后依次执行两条命令# 安装全部依赖包axios、webpack、webpack-cli npm install # 使用 Webpack 构建扩展 npm run build构建完成后会在solution/下生成dist/目录其中包含扩展运行所需的全部文件manifest.json清单、background.js后台 Service Worker、index.html弹窗页面、main.js打包后的业务逻辑、styles.css样式以及images/资源目录。开发期间如需监听文件变更自动重新打包可运行npm run watch即webpack --watch。安装扩展以 Microsoft Edge 为例原文档给出的安装步骤基于 Edge 浏览器与 Chrome 的「加载已解压的扩展程序」流程一致点击浏览器右上角的「三个点」菜单找到「扩展」面板选择「加载解压缩的扩展」Load Unpacked在弹出的对话框中选择dist文件夹扩展即被加载到浏览器中。扩展的清单文件 manifest.json 采用 Manifest V3 规范{ manifest_version: 3, name: My Carbon Trigger, version: 0.1.0, host_permissions: [all_urls], background: { service_worker: background.js }, action: { default_popup: index.html } }关键配置含义如下配置项值作用manifest_version3使用 Manifest V3 规范后台逻辑由 Service Worker 承担host_permissionsall_urls允许扩展向任意域名发起网络请求请求 CO2 Signal API 所需background.service_workerbackground.js指定后台 Service Worker用于监听消息并绘制图标action.default_popupindex.html点击工具栏图标时弹出的设置界面获取 API 密钥与区域代码要真正使用扩展需要两样东西CO2 Signal API 密钥前往 co2signal.com 页面在输入框中填写你的邮箱即可通过邮件申请原文档提示「here per email anfordern」。该密钥用于请求数据接口时的身份认证。区域代码对应 Electricity Map 上的区域标识完整的代码清单见其 zones 接口。例如作者在波士顿使用US-NEISO美国新英格兰独立系统运营商区域。拿到密钥和区域代码后点击扩展工具栏图标在弹出的index.html表单中输入两者并提交。若一切正常扩展栏中的彩色圆点会随之变化实时反映你所在区域的能源消耗情况——绿色代表当前用电较清洁黄色与深红色则代表碳排放强度升高。源码级解析数据获取与颜色映射下面结合 src/index.js 源码剖析扩展的核心工作流程。1. 请求 CO2 Signal APIdisplayCarbonUsage函数使用 axios 发起请求向https://api.co2signal.com/v1/latest发送 GET 请求以countryCode作为查询参数、auth-token作为请求头携带 API 密钥await axios .get(https://api.co2signal.com/v1/latest, { params: { countryCode: region }, headers: { auth-token: apiKey }, })响应数据中两个关键字段驱动了后续逻辑carbonIntensity碳排放强度单位是「克二氧化碳 / 每千瓦时」grams CO2 emitted per kilowatt hourfossilFuelPercentage化石燃料发电占比百分比。源码对缺失数据做了防御性校验若carbonIntensity或fossilFuelPercentage为null会抛出Missing carbon intensity or fossil fuel data错误并在 UI 上显示Sorry, data unavailable for the selected region.避免因异常数据导致页面崩溃。2. 碳排放强度 → 颜色的映射算法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]中找出与当前值最接近的档位通过按绝对差值排序取第一个元素实现用findIndex找到第一个大于该档位的刻度索引作为颜色数组下标取出对应颜色并通过chrome.runtime.sendMessage发送updateIcon消息给后台。颜色与碳强度的对应关系可归纳为碳强度克/kWh颜色语义0 附近#2AA364绿色用电清洁适合执行耗能活动150 附近#F5EB4D黄色中等强度酌情安排600 附近#9E4229棕红高排放谨慎用电750 及以上#381D02深棕极高排放尽量避免耗能任务3. 后台 Service Worker 绘制图标后台脚本 background.js 监听来自页面的消息收到updateIcon后调用chrome.action.setIcon用OffscreenCanvas动态绘制一个实心圆作为扩展图标chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action updateIcon) { chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } }); function drawIcon(value) { let canvas new OffscreenCanvas(200, 200); let context canvas.getContext(2d); context.beginPath(); context.fillStyle value.color; context.arc(100, 100, 50, 0, 2 * Math.PI); context.fill(); return context.getImageData(50, 50, 100, 100); }这一「页面发消息 → Service Worker 画图标」的协作模式是 Manifest V3 扩展中动态更新工具栏图标的典型实现弹窗页面自身无法直接修改action图标必须经由后台脚本完成而OffscreenCanvas无需真实 DOM 即可在后台离线绘制图形。4. 配置的本地持久化与会话管理setUpUser将用户提交的 API 密钥与区域写入localStorage并立即发起首次数据请求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); };init负责启动时检查若localStorage中已存在密钥与区域则跳过表单直接展示结果否则显示配置表单。reset只清除region保留 API 密钥然后重新执行init。通过这种持久化设计用户只需配置一次之后每次打开浏览器扩展都会自动拉取最新数据。效果验证与使用提示配置完成后扩展工具栏上的圆点颜色应与 extension-screenshot.png 所示一致直观反映区域实时用电碳强度安装过程中 Edge 会弹出如图 install-on-edge.png 所示的确认界面。使用提示若页面显示Sorry, data unavailable for the selected region.说明当前区域代码不受 API 支持或网络请求失败可更换 zones 清单 中的其他代码重试更换区域时点击「Clear」按钮对应reset仅清除区域配置API 密钥保留便于快速切换地点由于依赖外部 CO2 Signal API扩展的实际可用性受该服务的数据覆盖范围与密钥配额限制。小结Carbon Trigger 是一个小而完整的浏览器扩展教学范例从 package.json 的工程化构建Webpack axios到 manifest.json 的 MV3 配置再到 src/index.js 与 background.js 的前后台协作完整覆盖了「表单输入 → 外部 API 请求 → 颜色映射 → 动态图标 → localStorage 持久化」的全部环节。它同时是 Web-Dev-For-Beginners 课程中「浏览器扩展与后台任务」一章1-about-browsers、2-forms-browsers-local-storage、3-background-tasks-and-performance的配套实战收尾帮助你打通浏览器扩展从开发到上线的完整链路。【免费下载链接】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），仅供参考