使用 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-browser-extension/solution完成版扩展代码展开讲解如何用 tmrow 的 CO2 Signal API 追踪区域电力使用情况构建一个可以在 Edge 等浏览器中实时提醒你所在地区电力负荷的浏览器扩展。读完本文你将掌握从npm install、npm run build打包、以 Load unpacked 方式安装扩展到配置 API Key 与区域代码、理解彩色圆点指示器背后calculateColor映射算法与background.js图标绘制的完整实战链路并能在 starter 脚手架 基础上独立完成功能填空。项目背景扩展在解决什么问题Carbon Trigger 是一个像迷你网站一样、针对某一特定任务而定制的浏览器扩展它检查指定区域的电力使用情况与碳强度carbon intensity返回该区域碳足迹的读数。用户只需在表单中输入 API Key 与区域代码即可按需调用它从而用数据指导自己的用电决策。例如当所在区域电力负荷很高时可以推迟运行烘干机这类高耗电活动。这一扩展可以运行在 Edge、Chrome 与 Firefox 上。在仓库中它属于 5-browser-extension 模块的实践成果课程分三讲浏览器基础知识、表单与本地存储、后台任务与性能。完成版代码位于 solution配套的 starter 代码 则把核心逻辑留白供学习者按步骤补齐。环境准备与快速上手你需要先安装 npmNode.js 自带。下载本项目代码到本地文件夹后依次执行npm install安装package.json中声明的全部依赖包括 webpack 构建工具链与 axios HTTP 客户端见 package.json。接着用 Webpack 构建扩展npm run build构建产物会输出到dist/目录。仓库的 dist 目录中已包含构建结果main.js打包后的弹出页脚本、background.js后台 Service Worker、manifest.json扩展清单以及index.html、styles.css。在 Edge 中安装未打包的扩展点击浏览器右上角的三点菜单进入扩展面板开启开发人员模式选择Load unpacked加载解压缩的扩展在弹窗中选择dist文件夹扩展随即加载完成。获取运行所需的两个关键输入使用该扩展需要两样东西CO2 Signal 的 API Key前往 CO2 Signal 官网在页面上的输入框中填入你的邮箱即可通过邮件获取你所在区域的代码region code参考 Electricity Map 的 zones 接口如波士顿对应US-NEISO在扩展界面中填入。将 API Key 与区域代码输入扩展界面后浏览器扩展栏中的彩色圆点会随之变化实时反映所在区域的能源使用情况给你一个现在做哪些高耗能活动是合适的直观指示。这一圆点系统的设计思路来自 Energy Lollipop 扩展用于展示加州碳排放。源码结构总览从表单到圆点完成版源码 solution/src/index.js 是弹出页popup的核心逻辑其运行流程可以拆成六个步骤与 start/src/index.js 中留白的注释编号一一对应获取表单字段与结果区域通过document.querySelector拿到.form-data、.region-name、.api-key、.errors、.loading、.result-container、.carbon-usage、.fossil-fuel、.my-region、.clear-btn等 DOM 节点绑定监听器并启动应用form.addEventListener(submit, ...)与clearBtn.addEventListener(click, ...)最后调用init()初始检查init读取localStorage中的apiKey与region决定展示表单还是直接显示结果处理表单提交handleSubmit阻止默认行为调用setUpUser设置用户setUpUser把 API Key 与区域写入localStorage显示 loading并触发首次 API 调用调用 APIdisplayCarbonUsage请求 CO2 Signal 的/v1/latest接口渲染结果并更新图标颜色。后台脚本 solution/dist/background.js 作为 Service Worker 监听消息收到updateIcon动作后调用chrome.action.setIcon绘制图标。清单文件 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 } }要点host_permissions声明了对所有 URL 的访问权限扩展需要请求外部 APIbackground.service_worker指向后台脚本action.default_popup指定点击工具栏图标时弹出的页面。核心实现displayCarbonUsage 与 CO2 Signal API 调用displayCarbonUsage(apiKey, region)是获取数据的核心函数使用 axios 发起 GET 请求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; });值得注意的实现细节请求参数区域代码通过params.countryCode传递API Key 通过headers[auth-token]传递数据校验源码在取用data.carbonIntensity与data.fossilFuelPercentage前先判空缺失时抛错避免渲染undefined展示指标碳强度以每千瓦时排放的 CO2 克数为单位取整显示化石燃料占比用toFixed(2)保留两位小数显示为百分比错误处理catch块会打印console.warn隐藏 loading 与结果区域并在.errors中提示 Sorry, data unavailable for the selected region.。彩色圆点算法calculateColor 与五档颜色映射拿到碳强度数值后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 } }); };算法逻辑如下定义碳强度刻度co2Scale [0, 150, 600, 750, 800]与对应颜色数组colors [绿, 黄, 红棕, 深棕, 深棕]将刻度数组按与当前值的绝对差排序取最接近的基准点closestNum用findIndex找到第一个大于该基准点的刻度下标scaleIndex取对应颜色通过chrome.runtime.sendMessage发送updateIcon消息通知后台更新图标。需要注意co2Scale.sort(...)是原地排序会修改数组顺序因此该方法在多次调用时依赖排序后的状态从实现看它并非纯函数。绿色约 0–150 区间代表低碳、适合进行高耗能活动黄色约 150–600代表中等红色系600 以上则提示碳强度偏高应谨慎安排耗电行为。后台绘制图标OffscreenCanvas 画圆后台脚本 background.js 监听消息并绘制图标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); }这里用OffscreenCanvas在后台线程创建 200×200 的画布以 (100, 100) 为圆心、半径 50 绘制实心圆颜色来自前台传入的value.color最后截取 100×100 的ImageData交给chrome.action.setIcon。这一动态生成彩色圆点图标的做法源自 Energy Lollipop 扩展是本文档明示的设计来源。表单交互与本地存储setUpUser / init / reset三个函数共同构成完整的输入—持久化—回显闭环setUpUser(apiKey, region)将apiKey与region写入localStorage显示 loading、清空错误提示、显示 clear 按钮然后立即调用displayCarbonUsage发起首次请求init()启动时读取localStorage中的apiKey与region。若任一缺失显示表单、隐藏结果与 clear 按钮若两者都存在则隐藏表单、直接调用displayCarbonUsage渲染历史配置的结果。无论哪种情况都先发送一次绿色的updateIcon消息把图标初始化为通用绿色reset(e)仅清除localStorage中的region保留 API Key然后重新执行init()让用户重新选择区域。const reset async (e) { e.preventDefault(); localStorage.removeItem(region); init(); };事件绑定在文件末尾统一完成form.addEventListener(submit, (e) handleSubmit(e))、clearBtn.addEventListener(click, (e) reset(e))最后调用init()启动应用。运行环境与前置条件根据 package.json引擎要求npm 9.0.0、node 18.0.0脚本npm run build执行webpacknpm run watch执行webpack --watch用于开发时持续监听重编译依赖axios^1.15.0用于 API 请求开发依赖webpack^5.105.4与webpack-cli^5.1.4关键词标注为 chrome extension / edge extension / carbon usage tracker。从 starter 到 solution如何自行完成扩展如果你希望亲手实现一遍可以从 starter 代码 开始其注释编号提示了六个实现步骤表单字段获取、设置监听器、初始检查、表单提交处理、设置用户、调用 API。对照本文上述各节即可逐步补齐先取 DOM 节点再实现displayCarbonUsage调 API、setUpUser写 localStorage、handleSubmit绑定提交、init做初始判断最后form.addEventListener(submit, ...)与init()启动。完成后再执行npm install npm run build并按上文方式在 Edge 中加载dist文件夹验证效果输入 API Key 与区域代码后扩展栏圆点应变为对应颜色弹出页显示碳强度与化石燃料占比。使用建议与注意事项API Key 与区域代码缺一不可两者都存入 localStorage 后扩展才会直接回显结果只填其一则始终显示表单错误提示当所选区域无数据或请求失败时界面会展示 Sorry, data unavailable for the selected region.此时应检查 API Key 是否有效、区域代码是否符合 Electricity Map 的 zones 编码规范图标机制圆点颜色的五档映射基于碳强度数值绿色适合高耗能活动、黄色与红色系则建议推迟或谨慎进行该机制的灵感来自 Energy Lollipop 扩展跨浏览器本扩展基于 Manifest V3action与chrome.actionAPI 在 Edge、Chrome、Firefox 均可用安装流程大同小异均可通过 Load unpacked 加载dist目录。【免费下载链接】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），仅供参考 使用 CO2 Signal API 构建 Carbon Trigger 浏览器扩展：完整实现与源码剖析
使用 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-browser-extension/solution完成版扩展代码展开讲解如何用 tmrow 的 CO2 Signal API 追踪区域电力使用情况构建一个可以在 Edge 等浏览器中实时提醒你所在地区电力负荷的浏览器扩展。读完本文你将掌握从npm install、npm run build打包、以 Load unpacked 方式安装扩展到配置 API Key 与区域代码、理解彩色圆点指示器背后calculateColor映射算法与background.js图标绘制的完整实战链路并能在 starter 脚手架 基础上独立完成功能填空。项目背景扩展在解决什么问题Carbon Trigger 是一个像迷你网站一样、针对某一特定任务而定制的浏览器扩展它检查指定区域的电力使用情况与碳强度carbon intensity返回该区域碳足迹的读数。用户只需在表单中输入 API Key 与区域代码即可按需调用它从而用数据指导自己的用电决策。例如当所在区域电力负荷很高时可以推迟运行烘干机这类高耗电活动。这一扩展可以运行在 Edge、Chrome 与 Firefox 上。在仓库中它属于 5-browser-extension 模块的实践成果课程分三讲浏览器基础知识、表单与本地存储、后台任务与性能。完成版代码位于 solution配套的 starter 代码 则把核心逻辑留白供学习者按步骤补齐。环境准备与快速上手你需要先安装 npmNode.js 自带。下载本项目代码到本地文件夹后依次执行npm install安装package.json中声明的全部依赖包括 webpack 构建工具链与 axios HTTP 客户端见 package.json。接着用 Webpack 构建扩展npm run build构建产物会输出到dist/目录。仓库的 dist 目录中已包含构建结果main.js打包后的弹出页脚本、background.js后台 Service Worker、manifest.json扩展清单以及index.html、styles.css。在 Edge 中安装未打包的扩展点击浏览器右上角的三点菜单进入扩展面板开启开发人员模式选择Load unpacked加载解压缩的扩展在弹窗中选择dist文件夹扩展随即加载完成。获取运行所需的两个关键输入使用该扩展需要两样东西CO2 Signal 的 API Key前往 CO2 Signal 官网在页面上的输入框中填入你的邮箱即可通过邮件获取你所在区域的代码region code参考 Electricity Map 的 zones 接口如波士顿对应US-NEISO在扩展界面中填入。将 API Key 与区域代码输入扩展界面后浏览器扩展栏中的彩色圆点会随之变化实时反映所在区域的能源使用情况给你一个现在做哪些高耗能活动是合适的直观指示。这一圆点系统的设计思路来自 Energy Lollipop 扩展用于展示加州碳排放。源码结构总览从表单到圆点完成版源码 solution/src/index.js 是弹出页popup的核心逻辑其运行流程可以拆成六个步骤与 start/src/index.js 中留白的注释编号一一对应获取表单字段与结果区域通过document.querySelector拿到.form-data、.region-name、.api-key、.errors、.loading、.result-container、.carbon-usage、.fossil-fuel、.my-region、.clear-btn等 DOM 节点绑定监听器并启动应用form.addEventListener(submit, ...)与clearBtn.addEventListener(click, ...)最后调用init()初始检查init读取localStorage中的apiKey与region决定展示表单还是直接显示结果处理表单提交handleSubmit阻止默认行为调用setUpUser设置用户setUpUser把 API Key 与区域写入localStorage显示 loading并触发首次 API 调用调用 APIdisplayCarbonUsage请求 CO2 Signal 的/v1/latest接口渲染结果并更新图标颜色。后台脚本 solution/dist/background.js 作为 Service Worker 监听消息收到updateIcon动作后调用chrome.action.setIcon绘制图标。清单文件 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 } }要点host_permissions声明了对所有 URL 的访问权限扩展需要请求外部 APIbackground.service_worker指向后台脚本action.default_popup指定点击工具栏图标时弹出的页面。核心实现displayCarbonUsage 与 CO2 Signal API 调用displayCarbonUsage(apiKey, region)是获取数据的核心函数使用 axios 发起 GET 请求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; });值得注意的实现细节请求参数区域代码通过params.countryCode传递API Key 通过headers[auth-token]传递数据校验源码在取用data.carbonIntensity与data.fossilFuelPercentage前先判空缺失时抛错避免渲染undefined展示指标碳强度以每千瓦时排放的 CO2 克数为单位取整显示化石燃料占比用toFixed(2)保留两位小数显示为百分比错误处理catch块会打印console.warn隐藏 loading 与结果区域并在.errors中提示 Sorry, data unavailable for the selected region.。彩色圆点算法calculateColor 与五档颜色映射拿到碳强度数值后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 } }); };算法逻辑如下定义碳强度刻度co2Scale [0, 150, 600, 750, 800]与对应颜色数组colors [绿, 黄, 红棕, 深棕, 深棕]将刻度数组按与当前值的绝对差排序取最接近的基准点closestNum用findIndex找到第一个大于该基准点的刻度下标scaleIndex取对应颜色通过chrome.runtime.sendMessage发送updateIcon消息通知后台更新图标。需要注意co2Scale.sort(...)是原地排序会修改数组顺序因此该方法在多次调用时依赖排序后的状态从实现看它并非纯函数。绿色约 0–150 区间代表低碳、适合进行高耗能活动黄色约 150–600代表中等红色系600 以上则提示碳强度偏高应谨慎安排耗电行为。后台绘制图标OffscreenCanvas 画圆后台脚本 background.js 监听消息并绘制图标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); }这里用OffscreenCanvas在后台线程创建 200×200 的画布以 (100, 100) 为圆心、半径 50 绘制实心圆颜色来自前台传入的value.color最后截取 100×100 的ImageData交给chrome.action.setIcon。这一动态生成彩色圆点图标的做法源自 Energy Lollipop 扩展是本文档明示的设计来源。表单交互与本地存储setUpUser / init / reset三个函数共同构成完整的输入—持久化—回显闭环setUpUser(apiKey, region)将apiKey与region写入localStorage显示 loading、清空错误提示、显示 clear 按钮然后立即调用displayCarbonUsage发起首次请求init()启动时读取localStorage中的apiKey与region。若任一缺失显示表单、隐藏结果与 clear 按钮若两者都存在则隐藏表单、直接调用displayCarbonUsage渲染历史配置的结果。无论哪种情况都先发送一次绿色的updateIcon消息把图标初始化为通用绿色reset(e)仅清除localStorage中的region保留 API Key然后重新执行init()让用户重新选择区域。const reset async (e) { e.preventDefault(); localStorage.removeItem(region); init(); };事件绑定在文件末尾统一完成form.addEventListener(submit, (e) handleSubmit(e))、clearBtn.addEventListener(click, (e) reset(e))最后调用init()启动应用。运行环境与前置条件根据 package.json引擎要求npm 9.0.0、node 18.0.0脚本npm run build执行webpacknpm run watch执行webpack --watch用于开发时持续监听重编译依赖axios^1.15.0用于 API 请求开发依赖webpack^5.105.4与webpack-cli^5.1.4关键词标注为 chrome extension / edge extension / carbon usage tracker。从 starter 到 solution如何自行完成扩展如果你希望亲手实现一遍可以从 starter 代码 开始其注释编号提示了六个实现步骤表单字段获取、设置监听器、初始检查、表单提交处理、设置用户、调用 API。对照本文上述各节即可逐步补齐先取 DOM 节点再实现displayCarbonUsage调 API、setUpUser写 localStorage、handleSubmit绑定提交、init做初始判断最后form.addEventListener(submit, ...)与init()启动。完成后再执行npm install npm run build并按上文方式在 Edge 中加载dist文件夹验证效果输入 API Key 与区域代码后扩展栏圆点应变为对应颜色弹出页显示碳强度与化石燃料占比。使用建议与注意事项API Key 与区域代码缺一不可两者都存入 localStorage 后扩展才会直接回显结果只填其一则始终显示表单错误提示当所选区域无数据或请求失败时界面会展示 Sorry, data unavailable for the selected region.此时应检查 API Key 是否有效、区域代码是否符合 Electricity Map 的 zones 编码规范图标机制圆点颜色的五档映射基于碳强度数值绿色适合高耗能活动、黄色与红色系则建议推迟或谨慎进行该机制的灵感来自 Energy Lollipop 扩展跨浏览器本扩展基于 Manifest V3action与chrome.actionAPI 在 Edge、Chrome、Firefox 均可用安装流程大同小异均可通过 Load unpacked 加载dist目录。【免费下载链接】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），仅供参考