在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

microsoft/Web-Dev-For-Beginners

菜单

项目：浏览器扩展

相关源文件

本文档提供了浏览器扩展项目的技术文档，该项目通过创建一个碳足迹跟踪器来教授核心的浏览器扩展概念。该扩展与 CO2Signal API 交互，根据地区的能源使用模式检索和显示碳足迹数据，并更新其图标以反映该地区电力的碳强度。

有关此项目基础的 JavaScript 基础知识，请参阅JavaScript 基础：做出决策和JavaScript 基础：数组和循环。

系统概览

浏览器扩展项目在创建帮助用户监控碳排放的实用应用程序的同时，向学生介绍了浏览器扩展的架构。该系统允许用户输入其地区代码和 CO2Signal 服务的 API 密钥，然后显示实时碳使用信息，并更改扩展程序的图标颜色以反映碳强度。

系统架构图

来源：5-browser-extension/1-about-browsers/README.md11-41 5-browser-extension/2-forms-browsers-local-storage/README.md8-17 5-browser-extension/3-background-tasks-and-performance/README.md15-41

关键组件

1. 用户界面（HTML）

扩展提供了两个主要视图

  1. 表单视图：从用户那里收集 API 密钥和区域代码
  2. 结果视图：显示从 API 检索的碳使用数据

来源：5-browser-extension/1-about-browsers/README.md100-133

2. 主要 JavaScript 逻辑

主 JavaScript 文件 (index.js) 处理所有核心功能

功能目的
init()初始化扩展，检查存储的 API 密钥和区域，并设置初始状态
handleSubmit()处理表单提交并调用 setUpUser()
setUpUser()将 API 密钥和区域保存到 localStorage 并启动数据检索
displayCarbonUsage()调用 CO2Signal API 并显示结果
calculateColor()根据碳强度确定扩展图标的颜色
reset()清除存储的区域并重新启动初始化过程

来源：5-browser-extension/solution/src/index.js17-127 5-browser-extension/2-forms-browsers-local-storage/README.md115-193 5-browser-extension/3-background-tasks-and-performance/README.md15-41

3. 后台处理

扩展使用后台任务来更新扩展图标。这通过 Chrome 的运行时消息传递系统处理

来源：5-browser-extension/3-background-tasks-and-performance/README.md115-135

4. 数据流

下面的序列图说明了扩展中的完整数据流

来源：5-browser-extension/2-forms-browsers-local-storage/README.md115-193 5-browser-extension/3-background-tasks-and-performance/README.md79-113

实现细节

扩展清单

manifest.json 文件定义了扩展的属性、权限和行为

来源：5-browser-extension/solution/dist/manifest.json1-13 5-browser-extension/start/dist/manifest.json1-12

API 集成

该扩展使用 axios 向 CO2Signal 服务发出 API 请求

来源：5-browser-extension/2-forms-browsers-local-storage/README.md163-171 5-browser-extension/solution/src/index.js36-45

LocalStorage 用途

该扩展使用浏览器的 localStorage API 来持久化用户数据，使其在会话之间保持不变

功能LocalStorage 操作
init()从 localStorage 中检索 apiKey 和 region
setUpUser()将 apiKey 和 region 存储到 localStorage
reset()从 localStorage 中移除 region

来源：5-browser-extension/2-forms-browsers-local-storage/README.md95-97 5-browser-extension/2-forms-browsers-local-storage/README.md128-131 5-browser-extension/2-forms-browsers-local-storage/README.md80-83

碳强度颜色计算

calculateColor() 函数根据碳强度阈值确定扩展图标的适当颜色

来源：5-browser-extension/3-background-tasks-and-performance/README.md64-80 5-browser-extension/solution/src/index.js17-32

在 Background.js 中绘制图标

后台脚本包含一个 drawIcon() 函数，该函数创建一个 canvas 元素并为扩展图标绘制一个彩色圆圈

来源：5-browser-extension/3-background-tasks-and-performance/README.md122-132

开发工作流

该扩展使用 webpack 进行打包，并需要以下依赖项

依赖项目的
webpackJavaScript 的模块打包器
webpack-cliwebpack 的命令行界面
axios用于发出 API 请求的 HTTP 客户端

开发工作流程包括

  1. 使用 npm install 安装依赖项
  2. 使用 npm run build 构建扩展
  3. 将已解包的扩展从 /dist 文件夹加载到浏览器中

来源：5-browser-extension/solution/package.json1-29 5-browser-extension/start/package.json1-29 5-browser-extension/1-about-browsers/README.md53-57

扩展生命周期

以下状态图显示了扩展的完整生命周期

来源： 5-browser-extension/solution/src/index.js87-114 5-browser-extension/2-forms-browsers-local-storage/README.md115-138

浏览器兼容性

该扩展程序设计用于支持 Manifest V3 格式的现代浏览器，包括：

  • Chrome
  • Edge
  • Firefox (需要一些兼容性调整)

来源： 5-browser-extension/1-about-browsers/README.md11-16 5-browser-extension/1-about-browsers/README.md48-57

性能考量

该扩展程序实现了多项性能优化：

  1. 异步 API 调用 - 使用 async/await 进行非阻塞 API 请求
  2. 本地存储缓存 - 减少重复 API 调用的需要
  3. 后台处理 - 在后台脚本中处理图标更新，以保持 UI 响应
  4. Canvas 绘图 - 使用高效的 Canvas API 进行图标生成

来源： 5-browser-extension/3-background-tasks-and-performance/README.md14-41 5-browser-extension/3-background-tasks-and-performance/README.md112-134

结论

此浏览器扩展项目演示了关键的浏览器扩展概念，包括：

  1. 扩展结构和 manifest 配置
  2. 表单处理和 API 集成
  3. 使用本地存储进行数据持久化
  4. 用于 UI 更新的后台处理
  5. 扩展组件之间的消息传递

最终的应用程序提供了一个实用的碳排放监测工具，同时教授了必不可少的 Web 开发技能。