读懂 Carbon Trigger 浏览器扩展完整版代码用 CO2 数据实时提醒区域用电强度【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners这是一篇面向 Web 开发者与浏览器扩展初学者的技术解析围绕微软开源课程仓库 Web-Dev-For-Beginners 中的 5-browser-extension 实战项目成品代码展开。文章将带你从零搭建并加载一款使用 tmrow 的 CO2 Signal API 追踪区域电力碳排放强度的 Chromium 浏览器扩展并深入源码剖析彩色圆点 实时数据面板背后的实现原理让你掌握 Manifest V3 扩展、webpack 构建、chrome.action API 与 localStorage 状态管理的完整套路。一、扩展要解决什么问题Carbon Trigger 是一款以提醒为核心的浏览器扩展它调用 tmrow 的 CO2 Signal API查询你所在区域当前的电力碳排放强度并把结论以浏览器扩展栏里的一个彩色圆点直观呈现出来。绿色代表当前区域发电比较清洁、适合执行耗电任务随着碳强度升高圆点逐渐变深提示你把高耗能工作延后。当你临时查看这个圆点时就能基于真实数据决定现在是否适合跑大型构建、渲染视频或执行其他能耗密集型任务。该圆点提示系统最初源自作者受加利福尼亚州排放监控工具 Energy Lollipop 扩展启发而引入的设计。本仓库中该项目包含两个子目录需要你动手补全的起步版 5-browser-extension/start以及包含全部完成代码的成品版 5-browser-extension/solution。本文解析的对象是完成版 solution其说明文档对应英文原版 solution README。二、运行环境与前置条件在开始之前请确认本机已安装 Node.js 与 npm 包管理器。关于版本要求solution 的 package.json 中通过 engines 字段明确了最低运行环境engines: { npm: 9.0.0, node: 18.0.0 }同时可以注意到该项目的构建工具链与依赖非常精简开发依赖webpack ^5.105.4、webpack-cli ^5.1.4用于将 ES Module 源码打包为扩展可直接使用的产物运行依赖axios ^1.15.0用于向后端 API 发起 HTTP 请求。从源码结构来看这是一个不需要 React/Vue 等框架、仅由原生 JS axios webpack 组成的轻量扩展项目非常适合作为理解浏览器扩展数据流的第一课。三、安装依赖并完成 webpack 构建将 5-browser-extension/solution 目录的代码下载/复制到本地文件夹后依次执行两条命令。第一步安装全部依赖npm install第二步通过 webpack 构建扩展npm run build若希望在开发过程中监听文件变更并自动重新打包可以改用 watch 脚本npm run watch以上三个命令分别对应 package.json 中scripts段的test、watch与build配置。构建完成后会在 solution 目录下生成dist/文件夹里面是浏览器可直接加载的完整扩展包。在当前仓库中该产物已被提交你可以直接查看其内容包含 5 个文件manifest.json —— 扩展清单MV3 声明文件background.js—— 后台 service worker负责响应图标更新消息main.js—— 由 src/index.js 打包生成的 popup 逻辑index.html—— 扩展弹出面板的页面结构styles.css—— 面板样式。四、加载扩展到 Edge或 Chromium 系浏览器构建出dist/之后即可把它安装进浏览器以 Microsoft Edge 为例步骤如下打开浏览器点击右上角三点菜单找到Extensions扩展面板在扩展管理页开启开发人员模式Developer mode点击Load Unpacked加载解压缩的扩展在弹出的文件选择框中定位并打开项目里的dist文件夹扩展随即被加载工具栏会出现 Carbon Trigger 的图标。从 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_version: 3采用最新的 MV3 标准后台逻辑改用 service workerhost_permissions: [all_urls]声明扩展可以向任意域名发起跨域请求这是它能调用 CO2 Signal 在线 API 的前提background.service_worker注册后台脚本用于响应 popup 发来的图标更新消息action.default_popup点击工具栏图标时弹出index.html面板。五、申请 API Key 与查询区域编码扩展需要两类外部信息才能工作API Key与区域编码。CO2 Signal API Key打开 CO2 Signal 官网在页面输入框中填写邮箱即可申请官方以邮件形式发送 Key区域编码需要找到你所在地区在 Electricity Map 上对应的电力区代码可通过其官方 zones 接口http://api.electricitymap.org/v3/zones查询区域 ID 形如US-NEISO如波士顿地区即使用US-NEISO、FR法国等。它是 API 请求中countryCode参数所期望的格式。获取到这两项后把它们输入扩展弹出面板中的对应表单并提交扩展就会开始拉取数据。六、源码剖析从表单提交到彩色圆点理解整条数据链路只需跟随 src/index.js 的几个核心函数。6.1 表单提交与本地持久化handleSubmit拦截表单的 submit 事件将用户填写的 apiKey 与 region 交给setUpUser。后者先通过localStorage.setItem把两项配置写入本地存储这就是刷新后无需重新填写的机制随即发起首次数据请求const setUpUser async (apiKey, region) { localStorage.setItem(apiKey, apiKey); localStorage.setItem(region, region); ... displayCarbonUsage(apiKey, region); };6.2 拉取碳强度数据displayCarbonUsage使用 axios 向https://api.co2signal.com/v1/latest发起 GET 请求countryCode参数传入区域编码、auth-token请求头传入 API Keyawait axios .get(https://api.co2signal.com/v1/latest, { params: { countryCode: region }, headers: { auth-token: apiKey }, }) ...拿到响应后代码会先校验返回数据中是否真的包含carbonIntensity碳强度与fossilFuelPercentage化石燃料发电占比字段缺失则抛出异常随后把碳强度向下取整并交由calculateColor处理同时在面板中渲染三条信息当前区域名称Region碳用量carbonIntensity的整数值 grams C02 emitted per kilowatt hour每千瓦时二氧化碳克数化石燃料占比fossilFuelPercentage.toFixed(2)%发电所用化石燃料百分比。若请求失败例如区域代码不存在则进入 catch 分支在界面提示Sorry, data unavailable for the selected region.并隐藏结果区域。6.3 碳强度映射为圆点颜色calculateColor是本扩展的核心设计。它预先定义了一组碳强度刻度与一组对应颜色let co2Scale [0, 150, 600, 750, 800]; let colors [#2AA364, #F5EB4D, #9E4229, #381D02, #381D02];算法思路是先把当前碳强度值与刻度数组逐一比较找出最接近的刻度值再依据该刻度值在数组中的位置从颜色表中选取对应色值最后把颜色通过消息发送给后台chrome.runtime.sendMessage({ action: updateIcon, value: { color: closestColor } });即碳强度越低圆点越接近绿色#2AA364中等强度映射为黄色#F5EB4D较高强度逐渐过渡到深棕/深色#9E4229、#381D02——从源码结构看高值区间共用最深色以表示高碳强度、谨慎执行耗电任务。6.4 后台绘制图标popup 里发送的消息由 dist/background.js 中的消息监听器接收。MV3 下扩展图标无法直接改用 CSS 颜色因此后台代码使用OffscreenCanvas现场绘制一张纯色圆点图像再调用chrome.action.setIcon更新工具栏图标chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action updateIcon) { chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } });drawIcon在 200×200 的离屏画布上以指定颜色填充一个圆再取其中 100×100 的区域作为图标位图——这即是彩色圆点会随区域用电强度实时变色的底层实现注释表明该创意借鉴自 Energy Lollipop 扩展。6.5 启动恢复与重置区域init是扩展的入口逻辑打开面板时先读取 localStorage若尚未保存 apiKey/region则显示填写表单若已有历史配置则隐藏表单并直接调用displayCarbonUsage恢复数据。同时无论哪种情况启动时都会把图标先置为通用的绿色表示正常状态。面板底部的Change region更换区域按钮则触发reset仅删除 localStorage 中的region键随后重新执行init让用户再次进入填写界面。若直接刷新浏览器页面popup 会因 localStorage 持久化而保留上一次的配置与数据。七、扩展使用体验小结把 API Key 与区域代码输入扩展界面后浏览器扩展栏中的彩色圆点会持续反映该区域的用电强度并指导你何时适合执行高耗能活动。这一整套表单配置 → localStorage 持久化 → 在线 API 拉取 → 颜色映射 → 后台图标重绘的流程完整覆盖了 MV3 扩展开发中最典型的数据与 UI 交互场景。八、延伸学习路径该扩展只是 Web-Dev-For-Beginners 课程仓库中 5-browser-extension 模块的阶段性成果。如果你想从头掌握相关知识可以按顺序阅读该模块的系列课程并结合起步代码亲手实现关于浏览器了解浏览器工作原理与扩展运行环境表单、浏览器与本地存储掌握表单取值、浏览器 API 与 localStorage 的使用这正是本扩展配置持久化的基础后台任务与性能认识后台脚本、service worker 与性能优化对应本扩展中监听消息、重绘图标的后台逻辑。动手实践则建议以起步版 5-browser-extension/start 为模板对照 完成版源码 逐行补齐src/index.js中缺失的函数——当你在浏览器里看到那个圆点随本地区域发电数据变绿、变黄、变深时便意味着你已完整打通了从 API 数据到浏览器扩展 UI 的整条链路。【免费下载链接】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），仅供参考
读懂 Carbon Trigger 浏览器扩展完整版代码：用 CO2 数据实时提醒区域用电强度
读懂 Carbon Trigger 浏览器扩展完整版代码用 CO2 数据实时提醒区域用电强度【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners这是一篇面向 Web 开发者与浏览器扩展初学者的技术解析围绕微软开源课程仓库 Web-Dev-For-Beginners 中的 5-browser-extension 实战项目成品代码展开。文章将带你从零搭建并加载一款使用 tmrow 的 CO2 Signal API 追踪区域电力碳排放强度的 Chromium 浏览器扩展并深入源码剖析彩色圆点 实时数据面板背后的实现原理让你掌握 Manifest V3 扩展、webpack 构建、chrome.action API 与 localStorage 状态管理的完整套路。一、扩展要解决什么问题Carbon Trigger 是一款以提醒为核心的浏览器扩展它调用 tmrow 的 CO2 Signal API查询你所在区域当前的电力碳排放强度并把结论以浏览器扩展栏里的一个彩色圆点直观呈现出来。绿色代表当前区域发电比较清洁、适合执行耗电任务随着碳强度升高圆点逐渐变深提示你把高耗能工作延后。当你临时查看这个圆点时就能基于真实数据决定现在是否适合跑大型构建、渲染视频或执行其他能耗密集型任务。该圆点提示系统最初源自作者受加利福尼亚州排放监控工具 Energy Lollipop 扩展启发而引入的设计。本仓库中该项目包含两个子目录需要你动手补全的起步版 5-browser-extension/start以及包含全部完成代码的成品版 5-browser-extension/solution。本文解析的对象是完成版 solution其说明文档对应英文原版 solution README。二、运行环境与前置条件在开始之前请确认本机已安装 Node.js 与 npm 包管理器。关于版本要求solution 的 package.json 中通过 engines 字段明确了最低运行环境engines: { npm: 9.0.0, node: 18.0.0 }同时可以注意到该项目的构建工具链与依赖非常精简开发依赖webpack ^5.105.4、webpack-cli ^5.1.4用于将 ES Module 源码打包为扩展可直接使用的产物运行依赖axios ^1.15.0用于向后端 API 发起 HTTP 请求。从源码结构来看这是一个不需要 React/Vue 等框架、仅由原生 JS axios webpack 组成的轻量扩展项目非常适合作为理解浏览器扩展数据流的第一课。三、安装依赖并完成 webpack 构建将 5-browser-extension/solution 目录的代码下载/复制到本地文件夹后依次执行两条命令。第一步安装全部依赖npm install第二步通过 webpack 构建扩展npm run build若希望在开发过程中监听文件变更并自动重新打包可以改用 watch 脚本npm run watch以上三个命令分别对应 package.json 中scripts段的test、watch与build配置。构建完成后会在 solution 目录下生成dist/文件夹里面是浏览器可直接加载的完整扩展包。在当前仓库中该产物已被提交你可以直接查看其内容包含 5 个文件manifest.json —— 扩展清单MV3 声明文件background.js—— 后台 service worker负责响应图标更新消息main.js—— 由 src/index.js 打包生成的 popup 逻辑index.html—— 扩展弹出面板的页面结构styles.css—— 面板样式。四、加载扩展到 Edge或 Chromium 系浏览器构建出dist/之后即可把它安装进浏览器以 Microsoft Edge 为例步骤如下打开浏览器点击右上角三点菜单找到Extensions扩展面板在扩展管理页开启开发人员模式Developer mode点击Load Unpacked加载解压缩的扩展在弹出的文件选择框中定位并打开项目里的dist文件夹扩展随即被加载工具栏会出现 Carbon Trigger 的图标。从 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_version: 3采用最新的 MV3 标准后台逻辑改用 service workerhost_permissions: [all_urls]声明扩展可以向任意域名发起跨域请求这是它能调用 CO2 Signal 在线 API 的前提background.service_worker注册后台脚本用于响应 popup 发来的图标更新消息action.default_popup点击工具栏图标时弹出index.html面板。五、申请 API Key 与查询区域编码扩展需要两类外部信息才能工作API Key与区域编码。CO2 Signal API Key打开 CO2 Signal 官网在页面输入框中填写邮箱即可申请官方以邮件形式发送 Key区域编码需要找到你所在地区在 Electricity Map 上对应的电力区代码可通过其官方 zones 接口http://api.electricitymap.org/v3/zones查询区域 ID 形如US-NEISO如波士顿地区即使用US-NEISO、FR法国等。它是 API 请求中countryCode参数所期望的格式。获取到这两项后把它们输入扩展弹出面板中的对应表单并提交扩展就会开始拉取数据。六、源码剖析从表单提交到彩色圆点理解整条数据链路只需跟随 src/index.js 的几个核心函数。6.1 表单提交与本地持久化handleSubmit拦截表单的 submit 事件将用户填写的 apiKey 与 region 交给setUpUser。后者先通过localStorage.setItem把两项配置写入本地存储这就是刷新后无需重新填写的机制随即发起首次数据请求const setUpUser async (apiKey, region) { localStorage.setItem(apiKey, apiKey); localStorage.setItem(region, region); ... displayCarbonUsage(apiKey, region); };6.2 拉取碳强度数据displayCarbonUsage使用 axios 向https://api.co2signal.com/v1/latest发起 GET 请求countryCode参数传入区域编码、auth-token请求头传入 API Keyawait axios .get(https://api.co2signal.com/v1/latest, { params: { countryCode: region }, headers: { auth-token: apiKey }, }) ...拿到响应后代码会先校验返回数据中是否真的包含carbonIntensity碳强度与fossilFuelPercentage化石燃料发电占比字段缺失则抛出异常随后把碳强度向下取整并交由calculateColor处理同时在面板中渲染三条信息当前区域名称Region碳用量carbonIntensity的整数值 grams C02 emitted per kilowatt hour每千瓦时二氧化碳克数化石燃料占比fossilFuelPercentage.toFixed(2)%发电所用化石燃料百分比。若请求失败例如区域代码不存在则进入 catch 分支在界面提示Sorry, data unavailable for the selected region.并隐藏结果区域。6.3 碳强度映射为圆点颜色calculateColor是本扩展的核心设计。它预先定义了一组碳强度刻度与一组对应颜色let co2Scale [0, 150, 600, 750, 800]; let colors [#2AA364, #F5EB4D, #9E4229, #381D02, #381D02];算法思路是先把当前碳强度值与刻度数组逐一比较找出最接近的刻度值再依据该刻度值在数组中的位置从颜色表中选取对应色值最后把颜色通过消息发送给后台chrome.runtime.sendMessage({ action: updateIcon, value: { color: closestColor } });即碳强度越低圆点越接近绿色#2AA364中等强度映射为黄色#F5EB4D较高强度逐渐过渡到深棕/深色#9E4229、#381D02——从源码结构看高值区间共用最深色以表示高碳强度、谨慎执行耗电任务。6.4 后台绘制图标popup 里发送的消息由 dist/background.js 中的消息监听器接收。MV3 下扩展图标无法直接改用 CSS 颜色因此后台代码使用OffscreenCanvas现场绘制一张纯色圆点图像再调用chrome.action.setIcon更新工具栏图标chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { if (msg.action updateIcon) { chrome.action.setIcon({ imageData: drawIcon(msg.value) }); } });drawIcon在 200×200 的离屏画布上以指定颜色填充一个圆再取其中 100×100 的区域作为图标位图——这即是彩色圆点会随区域用电强度实时变色的底层实现注释表明该创意借鉴自 Energy Lollipop 扩展。6.5 启动恢复与重置区域init是扩展的入口逻辑打开面板时先读取 localStorage若尚未保存 apiKey/region则显示填写表单若已有历史配置则隐藏表单并直接调用displayCarbonUsage恢复数据。同时无论哪种情况启动时都会把图标先置为通用的绿色表示正常状态。面板底部的Change region更换区域按钮则触发reset仅删除 localStorage 中的region键随后重新执行init让用户再次进入填写界面。若直接刷新浏览器页面popup 会因 localStorage 持久化而保留上一次的配置与数据。七、扩展使用体验小结把 API Key 与区域代码输入扩展界面后浏览器扩展栏中的彩色圆点会持续反映该区域的用电强度并指导你何时适合执行高耗能活动。这一整套表单配置 → localStorage 持久化 → 在线 API 拉取 → 颜色映射 → 后台图标重绘的流程完整覆盖了 MV3 扩展开发中最典型的数据与 UI 交互场景。八、延伸学习路径该扩展只是 Web-Dev-For-Beginners 课程仓库中 5-browser-extension 模块的阶段性成果。如果你想从头掌握相关知识可以按顺序阅读该模块的系列课程并结合起步代码亲手实现关于浏览器了解浏览器工作原理与扩展运行环境表单、浏览器与本地存储掌握表单取值、浏览器 API 与 localStorage 的使用这正是本扩展配置持久化的基础后台任务与性能认识后台脚本、service worker 与性能优化对应本扩展中监听消息、重绘图标的后台逻辑。动手实践则建议以起步版 5-browser-extension/start 为模板对照 完成版源码 逐行补齐src/index.js中缺失的函数——当你在浏览器里看到那个圆点随本地区域发电数据变绿、变黄、变深时便意味着你已完整打通了从 API 数据到浏览器扩展 UI 的整条链路。【免费下载链接】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），仅供参考