Carbon Trigger 浏览器扩展起步指南Web-Dev-For-Beginners构建、加载与 CO2 Signal 集成实战【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本文基于 5-browser-extension/start/translations/README.fr.md法语版起步文档展开介绍 Carbon Trigger 浏览器扩展的完整起步流程通过 npm 与 webpack 构建扩展、在 Edge 中以“加载解压缩的扩展”方式安装dist产物、配置 CO2 Signal API 密钥与地区代码并让浏览器扩展栏中的彩色圆点实时反映你所在地区的电力碳强度。读完并跟做本文后你将掌握一个可运行于 Edge、Chrome 和 Firefox 的浏览器扩展从源码到上架本地浏览器的完整链路。一、扩展定位把地区电力碳强度放进浏览器本模块5-browser-extension/README.md的核心任务是构建一个迷你网站式的浏览器扩展它针对单一具体任务做了深度定制查询 C02 Signal API 中某个地区的电力使用量与碳强度并返回该地区的碳足迹读数。法语版起步文档给出的产品定义是使用 tmrow 的 C02 Signal API 跟踪电力消耗构建一个浏览器扩展让你在浏览器内直接获得你所在地区的电力消耗有多重的提醒。你可以在需要时临时ad hoc调用这个扩展基于这些数据对日常活动作出判断——例如在地区电力碳排放较高的时段推迟运行洗衣机、烘干机等高耗电活动。模块主文档还给出了同样的示例在用电高峰期推迟烘干衣服这类碳密集活动。彩色圆点这一指示器设计借鉴了面向加州排放的 Energy Lollipop 扩展的图标结构圆点颜色变化直接反映地区能耗水平给你一个现在适合做哪些高耗能活动的直观指针。扩展创意本身来自 Microsoft 绿色云倡导团队负责人 Asim HussainGreen Principles 作者扩展结构则参考了 Adebola Adeniran 的 COVID 扩展。二、环境准备与构建命令2.1 前提条件根据起步文档你只需要安装 npm可以确认更精确的引擎要求engines: { npm: 9.0.0, node: 18.0.0 }——即需要 Node.js 18 与 npm 9运行时依赖只有一项axios ^1.15.0用于发起对 CO2 Signal API 的 HTTP 请求构建工具为webpack ^5.105.0与webpack-cli ^5.1.4均为 devDependencies。2.2 安装依赖并构建文档给出的两条核心命令npm install安装所有必需包。npm run build从 webpack 构建扩展。对照 5-browser-extension/start/package.json 中的scripts字段build实际执行的就是webpack此外还有一个watch脚本执行webpack --watch可在开发阶段监听源码变更并自动重新打包——法语文档只写了build而源码脚本中还提供了这个开发辅助命令。构建完成后产物输出到dist目录该目录就是稍后加载进浏览器的扩展根目录其中包含打包后的 manifest 与脚本。三、在 Edge 中加载 dist 目录法语文档的安装步骤原文为法语此处按原文操作序列转述使用浏览器右上角的三点菜单找到 Extensions扩展面板在面板中选择Charger lextension décompressée加载解压缩的扩展即 Load Unpacked以加载一个新扩展在弹出提示中打开dist目录扩展即完成加载。需要说明的是文档以 Edge 为例演示加载流程但模块主文档明确该扩展可以工作在 Edge、Chrome 和 Firefox 上以未打包目录加载扩展这一机制在三者中基本一致对应入口名称略有差异。四、配置 API 密钥与地区代码扩展要正常工作需要两个配置项均在扩展界面中以表单输入CO2 Signal 的 API 密钥到 CO2 Signal 官网通过邮箱申请在该页面输入邮箱即可获得密钥地区代码对应 Electricity Map 上你所在地区的分区代码分区代码列表可从 Electricity Map 的 zones 接口获取。文档给出的实例是作者所在的波士顿使用US-NEISO。从源码结构看这两个配置项的落地方式在参考实现 5-browser-extension/solution/src/index.js 中非常清晰表单提交后setUpUser会把apiKey与region写入localStorage之后每次打开扩展都会先localStorage.getItem读取已有配置有配置则跳过表单直接请求数据无配置则显示表单——这正是表单 本地存储这一课程主题见 5-browser-extension/2-forms-browsers-local-storage/README.md的实战应用请求由displayCarbonUsage发出axios.get(https://api.co2signal.com/v1/latest, { params: { countryCode: region }, headers: { auth-token: apiKey } })即把地区代码作为查询参数countryCode、把密钥放入请求头auth-token响应中取data.carbonIntensity每千瓦时电力排放的二氧化碳克数与data.fossilFuelPercentage发电所用化石燃料占比两个字段缺失时抛出错误并在界面上显示 Sorry, data unavailable for the selected region.结果区会展示类似552 grams (grams C02 emitted per kilowatt hour)与89.35% (percentage of fossil fuels used to generate electricity)的读数界面中的表单、loading、错误提示等元素都通过 CSS class.form-data、.region-name、.api-key、.errors、.loading等与 DOM 关联。五、彩色圆点指示器的实现原理法语文档提到当 API 密钥与地区填入扩展界面后浏览器扩展栏中的彩色圆点会随之变化以反映你所在地区的能耗水平。这一行为在参考实现 5-browser-extension/solution/src/index.js 中由calculateColor函数完成其核心是一张五级碳强度刻度表let co2Scale [0, 150, 600, 750, 800]; let colors [#2AA364, #F5EB4D, #9E4229, #381D02, #381D02];从源码结构看算法把当前carbonIntensity克 CO2/kWh与刻度表中的阈值做就近匹配映射为五种颜色低强度约 0–150 g为绿色#2AA364中强度约 150 g为黄色#F5EB4D较高约 600 g为棕橙色#9E4229高与极高约 750–800 g 及以上均为深棕色#381D02。确定颜色后通过扩展消息机制通知背景脚本更新图标chrome.runtime.sendMessage({ action: updateIcon, value: { color: closestColor } });而扩展初始化时init函数会先发送{ action: updateIcon, value: { color: green } }把图标设为通用的绿色随后才根据数据请求结果切换为对应颜色——这解释了为什么扩展刚加载时圆点是绿色的取数完成后才变为用户地区的真实水平色。六、起步模板你需要自己补全的代码骨架法语起步文档对应的代码位于 5-browser-extension/start/src/index.js它并不是空文件而是一份带编号注释的任务清单骨架要求学习者按顺序补全六个部分定义表单字段与结果区的 DOM 引用设置事件监听器并启动应用初始检查读取本地存储、决定显示表单还是结果处理表单提交设置用户的 API 密钥与地区调用 API。完成这些任务后即可对照 5-browser-extension/solution/src/index.js 这一参考实现见 5-browser-extension/solution/README.md自查。两套代码共享同一份 package.json 依赖结构webpack axios因此你在 start 目录构建的扩展与 solution 目录的构建方式完全一致npm install→npm run build→ 在浏览器中加载dist。七、小结与适用前提适用前提Node.js 18、npm 9可访问 CO2 Signal API需自申请密钥并拥有目标地区在 Electricity Map 中的分区代码如波士顿的US-NEISO完整链路npm install安装依赖 →npm run build由 webpack 打包出dist→ 在 Edge 等浏览器中加载解压缩的扩展指向dist→ 在扩展界面输入 API 密钥与地区代码 → 扩展栏彩色圆点按 0/150/600/750/800 g CO2/kWh 五级刻度变色学习价值本起步文档是第 5 课浏览器扩展模块的入口后续课程会进一步讲解浏览器工作原理1-about-browsers/README.md、表单与本地存储2-forms-browsers-local-storage/README.md以及后台任务与性能3-background-tasks-and-performance/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），仅供参考