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-browser-extension 模块的完整解决方案展开利用 tmrow 提供的 CO2 Signal API 追踪区域电力消耗数据构建一个驻留在浏览器工具栏中的扩展实时以彩色圆点提示你所在区域的电力负荷强度帮助你据此合理安排洗衣、充电等高耗电活动。读完本文你将掌握浏览器扩展从安装依赖、Webpack 构建、加载调试到配置 API 密钥与区域代码的完整流程并能理解其背后的数据请求、本地存储与图标动态更新的实现原理。扩展的核心功能用数据指导你的用电决策Carbon Trigger 浏览器扩展的思路非常简单直接通过 CO2 Signal API 获取电力实时数据在浏览器中以醒目的方式提示用户当前区域的电网负荷有多重。扩展并非直接替你操作而是作为一个随时可见的提醒器reminder让你在刷网页的空隙瞄一眼工具栏上的彩色圆点就能判断现在是否是执行高耗电任务的好时机。其彩色圆点colored dot交互概念借鉴了 Energy Lollipop 浏览器扩展的设计——后者用类似方式呈现加州地区的碳排放状态。在 solution 目录 的完整代码中这一概念被落地为图标颜色随区域实时碳强度carbon intensity变化绿色表示清洁、低负荷深褐色表示高碳、高负荷。环境准备npm 与项目依赖开发前需要确保本机安装了 npm 为例其 package.json 明确声明了运行环境与依赖{ name: carbon-trigger-extension, version: 1.0.0, engines: { npm: 9.0.0, node: 18.0.0 }, scripts: { test: echo \Error: no test specified\ exit 1, watch: webpack --watch, build: webpack }, devDependencies: { webpack: ^5.105.4, webpack-cli: ^5.1.4 }, dependencies: { axios: ^1.15.0 } }从配置可以看出几个关键点运行时要求Node.js ≥ 18.0.0、npm ≥ 9.0.0低于该版本可能无法正常构建构建工具使用 Webpack 5 及其 CLI 完成打包build脚本即执行webpackwatch脚本用于开发时监听文件变更自动重新构建HTTP 客户端生产依赖 axios ^1.15.0用于向 CO2 Signal API 发起请求源码调用位置见 5-browser-extension/solution/src/index.js。如果你希望从零开始跟着课程逐步编写则使用 start 起始代码目录其中的 index.js 仅保留了编号注释占位符等待你逐步填充 DOM 引用、事件监听、API 调用等逻辑。安装与构建两个命令跑通全流程在项目目录下依次执行两条命令即可完成依赖安装与产物构建npm install npm run buildnpm install会根据 package.json 拉取 Webpack、Webpack CLI 与 axios 等全部依赖并将其锁定到 package-lock.jsonnpm run build触发 Webpack 打包将 src/index.js 源码编译、打包为浏览器可直接加载的产物输出到dist目录。构建完成后dist文件夹就是最终要加载进浏览器的扩展本体其中应包含 manifest.json扩展配置、index.html界面与打包后的脚本文件等。在 Edge 中加载扩展Load Unpacked 方式开发期扩展无需发布到商店通过浏览器的开发者模式即可加载点击浏览器右上角的三点菜单...进入扩展Extensions面板确保开启开发人员模式Developer mode选择加载解压缩的扩展Load Unpacked在文件选择对话框中选中构建产物dist文件夹扩展即被加载到浏览器工具栏。之后每次修改源码重新执行npm run build再到扩展管理页点击扩展卡片上的重新加载Reload即可看到最新效果。开发阶段采用构建 → 加载 → 测试 → 调试的循环与生产环境从商店安装的扩展不同后者经过商店审核、支持自动更新而本地加载仅用于开发调试。配置 API 密钥与区域代码让扩展认识你的电网加载完成后扩展还不能立即工作——你需要为其提供两个关键信息CO2 Signal API 密钥前往 CO2 Signal 官网在页面上的输入框中填写你的邮箱即可通过邮件获得免费的 API 密钥区域代码查询与 Electricity Map 地图相对应的区域编码。例如作者在波士顿Boston地区使用的区域代码为US-NEISO即美国新英格兰 ISO 电力市场的编码。这两个值在扩展界面中填写并提交后会被保存在浏览器的localStorage中键名分别为apiKey与region见 源码 setUpUser 函数下次打开扩展时会自动读取并跳过重复配置——这正是第 2 课《调用 API、使用 Local Storage》所讲授的持久化思想localStorage以键值对形式跨会话保存数据扩展拥有独立于普通网页的隔离存储空间。⚠️安全提示localStorage 中的 JavaScript 可被页面脚本直接访问生产环境中将 API 密钥明文存在 localStorage 存在安全风险本项目作为教学示例采用该方案真实应用应对敏感凭据使用安全的服务端存储。配置完成后扩展会向 API 发起请求并展示结果。界面包含两个视图首次使用时的配置表单视图填写 Region Name 与 API Key和加载数据后的结果视图显示区域、碳用量与化石燃料占比数据请求链路从表单提交到界面刷新扩展的前端逻辑集中在 src/index.js其完整流程为① 建立 DOM 引用通过document.querySelector获取表单.form-data、输入框.region-name、.api-key以及结果区.result-container、.carbon-usage、.fossil-fuel等的引用。② 事件绑定form.addEventListener(submit, (e) handleSubmit(e))拦截表单提交clearBtn.addEventListener(click, (e) reset(e))绑定更换区域按钮随后调用init()完成初始化。③ 初始化判断init()从 localStorage 读取apiKey与region若不存在则显示配置表单若已存在则直接调用displayCarbonUsage()加载数据——实现老用户打开即见结果的无感体验。④ 提交与持久化handleSubmit调用e.preventDefault()阻止页面刷新将输入值交给setUpUser()后者把凭据写入 localStorage、显示 loading 状态并触发首次数据请求。⑤ 请求 CO2 Signal APIdisplayCarbonUsage使用 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展示区域、碳强度与化石燃料占比 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; });请求的关键参数与含义如下参数位置说明countryCodequery 参数区域代码如US-NEISOauth-token请求头CO2 Signal API 密钥用于身份认证carbonIntensity响应数据碳强度g CO₂/kWh用于颜色映射fossilFuelPercentage响应数据发电所用化石燃料的百分比该函数还实现了健壮的异常处理try/catch包裹请求捕获网络失败或数据缺失隐藏 loading 与结果区并在.errors元素中提示 Sorry, data unavailable for the selected region.避免扩展静默崩溃。彩色圆点系统把数字变成一眼可读的颜色扩展最具辨识度的功能是工具栏图标的颜色变化其实现分为前端计算与后台绘制两个环节对应第 3 课《后台任务与性能》的内容。前端颜色计算calculateColor见 src/index.jscalculateColor 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]与对应的颜色数组通过最近邻排序找到与当前 CO2 值最接近的刻度点再经findIndex映射到颜色。色阶含义如下碳强度范围颜色语义0–150#2AA364绿色清洁、低负荷适合执行耗电任务150–600#F5EB4D黄色中等负荷600–750#9E4229橙色高负荷750#381D02深褐色极高碳强度计算完成后通过chrome.runtime.sendMessage({ action: updateIcon, value: { color } })向后台脚本发送消息——这是扩展内不同脚本上下文之间通信的标准方式chrome.runtimeAPI 承担着扩展神经系统的角色。Edge 之所以能使用 chrome API是因为新版 Edge 基于 Chromium 内核两者共享扩展 API 体系。后台脚本绘制图标dist/background.js后台监听onMessage收到updateIcon动作后调用chrome.action.setIcon()更新工具栏图标并使用OffscreenCanvas离屏绘制一个实心圆。离屏画布OffscreenCanvas不会阻塞 UI 线程是性能更优的绘制方案。init()在扩展启动时还会先发送一次color: green的默认图标更新让用户在数据加载完成前就看到一个活着的绿色圆点而非空白或破损的图标。实用技巧与性能提醒开发期调试每次改动源码后执行npm run build并重新加载扩展若需监听文件变化可运行npm run watch性能自查本扩展体积小、逻辑简单但仍遵循通用性能原则——保持 DOM 结构精简、避免不必要的脚本阻塞、离屏绘制图标减少主线程负担。可用浏览器 DevTools 的 Performance 面板录制分析观察是否有超过 15ms 的长任务更换区域点击结果视图中的 Change region.clear-btn按钮会调用reset()仅清除 localStorage 中的region键保留 apiKey随后重新进入配置流程方便切换不同电网区域对比数据。至此一个完整的 Carbon Trigger 扩展便跑通了配置密钥 → 请求 CO2 Signal API → 展示碳数据 → 动态更新图标颜色的整条链路。你可以基于 5-browser-extension/solution 的完整代码直接构建也可以对照课程前三课浏览器基础、API 与 Local Storage、后台任务与性能逐步手写最终在工具栏收获一个随时提醒你现在是否适合用电的实用小工具。【免费下载链接】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 Signal API 的区域电力负荷监控扩展
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-browser-extension 模块的完整解决方案展开利用 tmrow 提供的 CO2 Signal API 追踪区域电力消耗数据构建一个驻留在浏览器工具栏中的扩展实时以彩色圆点提示你所在区域的电力负荷强度帮助你据此合理安排洗衣、充电等高耗电活动。读完本文你将掌握浏览器扩展从安装依赖、Webpack 构建、加载调试到配置 API 密钥与区域代码的完整流程并能理解其背后的数据请求、本地存储与图标动态更新的实现原理。扩展的核心功能用数据指导你的用电决策Carbon Trigger 浏览器扩展的思路非常简单直接通过 CO2 Signal API 获取电力实时数据在浏览器中以醒目的方式提示用户当前区域的电网负荷有多重。扩展并非直接替你操作而是作为一个随时可见的提醒器reminder让你在刷网页的空隙瞄一眼工具栏上的彩色圆点就能判断现在是否是执行高耗电任务的好时机。其彩色圆点colored dot交互概念借鉴了 Energy Lollipop 浏览器扩展的设计——后者用类似方式呈现加州地区的碳排放状态。在 solution 目录 的完整代码中这一概念被落地为图标颜色随区域实时碳强度carbon intensity变化绿色表示清洁、低负荷深褐色表示高碳、高负荷。环境准备npm 与项目依赖开发前需要确保本机安装了 npm 为例其 package.json 明确声明了运行环境与依赖{ name: carbon-trigger-extension, version: 1.0.0, engines: { npm: 9.0.0, node: 18.0.0 }, scripts: { test: echo \Error: no test specified\ exit 1, watch: webpack --watch, build: webpack }, devDependencies: { webpack: ^5.105.4, webpack-cli: ^5.1.4 }, dependencies: { axios: ^1.15.0 } }从配置可以看出几个关键点运行时要求Node.js ≥ 18.0.0、npm ≥ 9.0.0低于该版本可能无法正常构建构建工具使用 Webpack 5 及其 CLI 完成打包build脚本即执行webpackwatch脚本用于开发时监听文件变更自动重新构建HTTP 客户端生产依赖 axios ^1.15.0用于向 CO2 Signal API 发起请求源码调用位置见 5-browser-extension/solution/src/index.js。如果你希望从零开始跟着课程逐步编写则使用 start 起始代码目录其中的 index.js 仅保留了编号注释占位符等待你逐步填充 DOM 引用、事件监听、API 调用等逻辑。安装与构建两个命令跑通全流程在项目目录下依次执行两条命令即可完成依赖安装与产物构建npm install npm run buildnpm install会根据 package.json 拉取 Webpack、Webpack CLI 与 axios 等全部依赖并将其锁定到 package-lock.jsonnpm run build触发 Webpack 打包将 src/index.js 源码编译、打包为浏览器可直接加载的产物输出到dist目录。构建完成后dist文件夹就是最终要加载进浏览器的扩展本体其中应包含 manifest.json扩展配置、index.html界面与打包后的脚本文件等。在 Edge 中加载扩展Load Unpacked 方式开发期扩展无需发布到商店通过浏览器的开发者模式即可加载点击浏览器右上角的三点菜单...进入扩展Extensions面板确保开启开发人员模式Developer mode选择加载解压缩的扩展Load Unpacked在文件选择对话框中选中构建产物dist文件夹扩展即被加载到浏览器工具栏。之后每次修改源码重新执行npm run build再到扩展管理页点击扩展卡片上的重新加载Reload即可看到最新效果。开发阶段采用构建 → 加载 → 测试 → 调试的循环与生产环境从商店安装的扩展不同后者经过商店审核、支持自动更新而本地加载仅用于开发调试。配置 API 密钥与区域代码让扩展认识你的电网加载完成后扩展还不能立即工作——你需要为其提供两个关键信息CO2 Signal API 密钥前往 CO2 Signal 官网在页面上的输入框中填写你的邮箱即可通过邮件获得免费的 API 密钥区域代码查询与 Electricity Map 地图相对应的区域编码。例如作者在波士顿Boston地区使用的区域代码为US-NEISO即美国新英格兰 ISO 电力市场的编码。这两个值在扩展界面中填写并提交后会被保存在浏览器的localStorage中键名分别为apiKey与region见 源码 setUpUser 函数下次打开扩展时会自动读取并跳过重复配置——这正是第 2 课《调用 API、使用 Local Storage》所讲授的持久化思想localStorage以键值对形式跨会话保存数据扩展拥有独立于普通网页的隔离存储空间。⚠️安全提示localStorage 中的 JavaScript 可被页面脚本直接访问生产环境中将 API 密钥明文存在 localStorage 存在安全风险本项目作为教学示例采用该方案真实应用应对敏感凭据使用安全的服务端存储。配置完成后扩展会向 API 发起请求并展示结果。界面包含两个视图首次使用时的配置表单视图填写 Region Name 与 API Key和加载数据后的结果视图显示区域、碳用量与化石燃料占比数据请求链路从表单提交到界面刷新扩展的前端逻辑集中在 src/index.js其完整流程为① 建立 DOM 引用通过document.querySelector获取表单.form-data、输入框.region-name、.api-key以及结果区.result-container、.carbon-usage、.fossil-fuel等的引用。② 事件绑定form.addEventListener(submit, (e) handleSubmit(e))拦截表单提交clearBtn.addEventListener(click, (e) reset(e))绑定更换区域按钮随后调用init()完成初始化。③ 初始化判断init()从 localStorage 读取apiKey与region若不存在则显示配置表单若已存在则直接调用displayCarbonUsage()加载数据——实现老用户打开即见结果的无感体验。④ 提交与持久化handleSubmit调用e.preventDefault()阻止页面刷新将输入值交给setUpUser()后者把凭据写入 localStorage、显示 loading 状态并触发首次数据请求。⑤ 请求 CO2 Signal APIdisplayCarbonUsage使用 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展示区域、碳强度与化石燃料占比 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; });请求的关键参数与含义如下参数位置说明countryCodequery 参数区域代码如US-NEISOauth-token请求头CO2 Signal API 密钥用于身份认证carbonIntensity响应数据碳强度g CO₂/kWh用于颜色映射fossilFuelPercentage响应数据发电所用化石燃料的百分比该函数还实现了健壮的异常处理try/catch包裹请求捕获网络失败或数据缺失隐藏 loading 与结果区并在.errors元素中提示 Sorry, data unavailable for the selected region.避免扩展静默崩溃。彩色圆点系统把数字变成一眼可读的颜色扩展最具辨识度的功能是工具栏图标的颜色变化其实现分为前端计算与后台绘制两个环节对应第 3 课《后台任务与性能》的内容。前端颜色计算calculateColor见 src/index.jscalculateColor 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]与对应的颜色数组通过最近邻排序找到与当前 CO2 值最接近的刻度点再经findIndex映射到颜色。色阶含义如下碳强度范围颜色语义0–150#2AA364绿色清洁、低负荷适合执行耗电任务150–600#F5EB4D黄色中等负荷600–750#9E4229橙色高负荷750#381D02深褐色极高碳强度计算完成后通过chrome.runtime.sendMessage({ action: updateIcon, value: { color } })向后台脚本发送消息——这是扩展内不同脚本上下文之间通信的标准方式chrome.runtimeAPI 承担着扩展神经系统的角色。Edge 之所以能使用 chrome API是因为新版 Edge 基于 Chromium 内核两者共享扩展 API 体系。后台脚本绘制图标dist/background.js后台监听onMessage收到updateIcon动作后调用chrome.action.setIcon()更新工具栏图标并使用OffscreenCanvas离屏绘制一个实心圆。离屏画布OffscreenCanvas不会阻塞 UI 线程是性能更优的绘制方案。init()在扩展启动时还会先发送一次color: green的默认图标更新让用户在数据加载完成前就看到一个活着的绿色圆点而非空白或破损的图标。实用技巧与性能提醒开发期调试每次改动源码后执行npm run build并重新加载扩展若需监听文件变化可运行npm run watch性能自查本扩展体积小、逻辑简单但仍遵循通用性能原则——保持 DOM 结构精简、避免不必要的脚本阻塞、离屏绘制图标减少主线程负担。可用浏览器 DevTools 的 Performance 面板录制分析观察是否有超过 15ms 的长任务更换区域点击结果视图中的 Change region.clear-btn按钮会调用reset()仅清除 localStorage 中的region键保留 apiKey随后重新进入配置流程方便切换不同电网区域对比数据。至此一个完整的 Carbon Trigger 扩展便跑通了配置密钥 → 请求 CO2 Signal API → 展示碳数据 → 动态更新图标颜色的整条链路。你可以基于 5-browser-extension/solution 的完整代码直接构建也可以对照课程前三课浏览器基础、API 与 Local Storage、后台任务与性能逐步手写最终在工具栏收获一个随时提醒你现在是否适合用电的实用小工具。【免费下载链接】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），仅供参考
