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-Beginners本指南围绕 Web-Dev-For-Beginners 课程第 5 模块「浏览器扩展」的完整代码Carbon Trigger展开讲解如何基于 tmrow 的 CO2 Signal API 构建一款直接运行在浏览器工具栏中的扩展实时反映你所在区域的电力碳排放强度并据此对耗电活动如使用烘干机、运行大型计算任务做出更环保的时机决策。读完本文你将掌握浏览器扩展的安装、构建、加载与配置全流程并深入理解其背后调用 API、使用 localStorage 持久化配置、按碳排放强度动态着色图标的核心实现原理。项目概览一个「碳触发器」浏览器扩展Carbon Trigger 是一个典型的单任务型浏览器扩展mini web site用户只需在扩展表单中输入一次 CO2 Signal API 密钥和所在区域代码扩展便会持续向 CO2 Signal API 查询该区域的实时电力数据返回两个关键指标——碳强度carbonIntensity单位克 CO₂/千瓦时与化石燃料发电占比fossilFuelPercentage%并把结果以「彩色圆点图标」的形式呈现在浏览器扩展栏中。该扩展可随时ad hoc调用当你想知道此刻是否适合执行高耗电活动时看一眼扩展图标即可。例如当区域用电高峰期导致碳排放强度偏高时可以推迟运行烘干机这类碳密集型活动。这一扩展完整实现了课程模块的三个教学主题浏览器工作机制与扩展部署1-about-browsers、表单与 localStorage2-forms-browsers-local-storage、后台任务与性能3-background-tasks-and-performance并在 Chrome、Edge、Firefox 等主流浏览器上均可加载运行。环境准备与依赖在开始之前你需要在本机准备好以下环境Node.js ≥ 18与npm ≥ 9完整代码的 package.json 中通过engines字段声明了这一版本下限低于该版本时构建可能失败浏览器本文以 Microsoft Edge 为例说明加载流程Chrome / Firefox 的「加载已解压的扩展程序」操作与之类似网络访问扩展运行时需要访问https://api.co2signal.com/v1/latest获取实时数据。将代码下载到本地文件夹后进入扩展目录课程仓库中的5-browser-extension/solution为完整代码5-browser-extension/start为留白练习版。安装与构建npm 与 webpack先安装全部依赖包npm install然后通过 webpack 构建扩展npm run build构建产物会输出到dist目录这也是后续浏览器加载的目录。package.json 的scripts中提供了两个常用命令npm run build执行webpack一次性打包npm run watch执行webpack --watch监听源码变更并自动增量重建适合开发调试。依赖方面运行时只依赖一个库axios^1.15.0用于发起 HTTP 请求webpack^5.105.4与webpack-cli^5.1.4作为构建工具置于 devDependencies。也就是说整个扩展的「业务逻辑」全部由原生 JavaScript 编写依赖极少非常适合作为学习浏览器扩展工作原理的入门范例。在 Edge 中加载扩展打开 Edge 浏览器点击右上角「三个点」菜单找到「扩展」面板打开「开发人员模式」Developer Mode选择「加载解压缩的扩展」Load Unpacked在弹出的文件选择对话框中定位到构建产物dist文件夹并确认扩展即被加载。加载成功后扩展会出现在浏览器扩展栏中。若开发过程中修改了源码重新执行npm run build后在扩展管理页点击刷新按钮即可看到最新效果。配置 API 密钥与区域代码扩展要正常工作必须完成两项配置均通过扩展弹出表单输入之后由 localStorage 持久化API 密钥前往 co2signal.com 在页面输入邮箱申请CO2 Signal 会通过邮件发送 API key。该密钥在每次 API 请求中通过auth-token请求头传递见下文源码分析区域代码区域代码与 Electricity Map 地图上的分区一致可查询 api.electricitymap.org/v3/zones 获取完整列表。例如美国波士顿地区使用US-NEISO新英格兰 ISO代码中请求参数名为countryCode。配置完成后扩展栏中的彩色圆点图标会随该区域实时电力数据变化直观提示当前适合执行的耗电活动。这一「圆点」视觉方案的灵感来源于面向加州排放数据的 Energy Lollipop 扩展。源码级原理剖析完整代码的四个关键环节完整代码位于 5-browser-extension/solution/src/index.js结构清晰可按逻辑划分为四部分。1. DOM 引用与事件绑定代码顶部用document.querySelector()捕获表单与结果区的全部关键元素分别对应表单字段.form-data、.region-name、.api-key、结果展示.result-container、.carbon-usage、.fossil-fuel、.my-region与状态提示.errors、.loading、.clear-btnconst form document.querySelector(.form-data); const region document.querySelector(.region-name); const apiKey document.querySelector(.api-key); const errors document.querySelector(.errors); const loading document.querySelector(.loading); const results document.querySelector(.result-container); const usage document.querySelector(.carbon-usage); const fossilfuel document.querySelector(.fossil-fuel); const myregion document.querySelector(.my-region); const clearBtn document.querySelector(.clear-btn);随后注册两个事件监听并启动应用form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e)); init();handleSubmit中调用e.preventDefault()阻止表单默认提交行为避免页面刷新再调用setUpUser(apiKey.value, region.value)提取用户输入并进入数据流程。2. 用户偏好持久化localStoragesetUpUser负责把用户配置写入 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 中的apiKey与region若任一为空则显示表单引导首次配置若已有历史配置则直接隐藏表单、自动调用displayCarbonUsage(storedApiKey, storedRegion)并显示清空按钮。reset()只移除region一项并重新执行init()方便用户切换到其他区域。这套「首次配置 / 回访自动加载」的状态机正是 2-forms-browsers-local-storage 课程的核心实践。安全性说明课程文档明确指出把 API 密钥存放在 localStorage 中仅供学习用途JavaScript 可读取该数据生产环境应将敏感凭据放在服务端安全存储。3. API 调用与数据校验displayCarbonUsage使用 axios 向 CO2 Signal API 发起 GET 请求认证方式为auth-token请求头区域通过countryCode查询参数传递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; });值得注意的实现细节响应数据通过可选链response?.data?.data安全访问避免空指针在渲染前对carbonIntensity与fossilFuelPercentage做了存在性校验缺失即抛错碳强度四舍五入后展示为「克 CO₂/千瓦时」化石燃料占比保留两位小数并附百分比try/catch兜底处理网络失败与数据异常此时隐藏加载与结果区并在.errors中显示「Sorry, data unavailable for the selected region.」友好提示从完整代码可推断扩展同时支持了「手动提交」与「回访自动加载」两条数据路径均复用同一个displayCarbonUsage函数。4. 图标颜色映射从碳强度到「圆点」颜色这是扩展最具特色的逻辑。calculateColor依据碳强度数值在预置的颜色阶梯中选取最近的颜色并通过chrome.runtime.sendMessage通知后台更新工具栏图标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 } }); };映射逻辑可以解读为co2Scale数组定义了分档阈值先把数组按与当前值的距离排序取最近档位再用findIndex找到第一个超过该档位的索引最终落到colors中对应的颜色。因此碳排放强度很低如接近 0时图标为绿色#2AA364强度升高后依次过渡为黄色#F5EB4D、深棕#9E4229极高时趋近深色#381D02。在init()启动阶段扩展会先发送一次updateIcon动作把图标置为通用绿色作为数据未到达前的默认状态。整套「圆点配色」方案借鉴了 Energy Lollipop 扩展的视觉语言让用户无需阅读数字即可凭颜色直觉判断当前电网的「绿」与「不绿」。工作原理小结一次完整的查询流程综合完整代码与课程讲解一次典型的数据流程如下用户首次打开扩展init()发现 localStorage 为空显示配置表单用户填入 API 密钥与区域代码并提交handleSubmit阻止默认刷新setUpUser将配置写入 localStorage 并展示加载态displayCarbonUsage携带auth-token请求头与countryCode参数请求 CO2 Signal API响应解析出carbonIntensity与fossilFuelPercentage渲染到结果区calculateColor根据碳强度计算颜色chrome.runtime.sendMessage更新工具栏图标用户之后每次打开扩展init()自动读取 localStorage 并重复步骤 35无需再次配置点击「清空」按钮reset则移除区域配置回到初始状态。延伸学习路径若想从零动手实现可对照留白版 5-browser-extension/start/src/index.js内含 16 编号注释的待补全骨架逐步填充最终对照 完整实现 验证深入学习表单、localStorage 与 API 集成可阅读 2-forms-browsers-local-storage 课程其中详细拆解了 DOM 引用、事件监听、初始化与重置、异步请求与错误处理了解浏览器工作机制与扩展部署可阅读 1-about-browsers 课程关注性能与后台任务可阅读 3-background-tasks-and-performance 课程动手挑战课程提供了「为 API 调用添加指数退避重试机制、区域代码输入校验、30 分钟缓存过期、历史数据展示」等进阶练习可在完整代码基础上尝试。说明本扩展的完整代码说明文档经由 AI 翻译服务Co-op Translator提供多语言版本翻译内容可能存在误差关键信息建议以原始英文文档5-browser-extension/solution/README.md为准。【免费下载链接】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），仅供参考