采纳一个 API基于 Web-Dev-For-Beginners 项目构建真实的浏览器扩展作业指南【免费下载链接】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 开源课程中「浏览器扩展」模块第二部分表单与本地存储的作业任务展开讲解如何挑选一个免费公共 API并把它集成进一个具备表单输入、本地存储持久化、异步请求与错误处理能力的浏览器扩展中。读完本文你将掌握从 API 选型、扩展规划、编码实现到测试提交的完整作业流程并能对照仓库中的完整解决方案carbon trigger 扩展逐行理解关键实现。作业概述从静态表单到动态数据扩展在上一课中你已经构建了一个外观不错的浏览器扩展表单但它本质上是静态的。本次作业的目标是让扩展「活」起来连接真实的外部数据服务并让它拥有「记忆」。这正如课程 README 中所描述——扩展将接入互联网、获取真实的环境数据并记住你的设置供下次使用。本作业的核心任务非常明确选择一种外部 API并构建一个能解决真实问题或为用户提供有价值功能的浏览器扩展。它要求你综合运用以下核心技术栈DOM 操作使用document.querySelector()获取并控制表单与结果元素事件处理通过addEventListener监听表单提交与按钮点击本地存储使用localStorage在浏览器会话之间持久化用户偏好异步编程用async/await与fetch或 axios发起 API 请求错误处理用try/catch优雅应对网络失败与无效响应用户体验提供加载状态、错误提示与数据校验。这些能力正好对应本课2-forms-browsers-local-storage/README.md所讲解的全部知识点作业即是对课程内容的综合实践检验。第一步选择合适的 API作业要求从 public-apis 精选免费公共 API 列表 中挑选一个 API。选型时要考虑以下类别作业文档为初学者列出了 5 个热门选项API 名称类别用途Dog CEO API娱乐返回随机狗狗图片OpenWeatherMap天气获取实时天气数据Quotable API引用返回励志名言NewsAPI新闻获取当前头条新闻Numbers API趣味事实返回有趣的数字事实选型建议来自作业文档的 Getting Started Tips从简单开始选择不需要复杂认证的 API避免在第一步就陷入 OAuth 等繁琐流程阅读文档彻底理解所选 API 的端点endpoints与响应结构规划 UI在写代码之前先草绘扩展的界面频繁测试增量构建每添加一个功能就测试一次处理错误始终假设 API 调用可能失败并据此规划。值得注意的是本课程配套的完整解决方案选择了 CO2 Signal APIapi.co2signal.com用于查询某个地区电网的实时碳排放强度。该 API 通过auth-token请求头认证使用countryCode参数指定区域例如波士顿地区使用US-NEISO返回的 JSON 数据中包含carbonIntensity碳强度单位克 CO₂/千瓦时与fossilFuelPercentage化石燃料发电占比两个核心字段。第二步规划你的扩展作业要求你在动手编码前回答四个规划问题你的扩展解决什么问题例如帮助用户了解当前地区电力碳排放强度从而决定何时运行高耗电活动谁是目标用户例如关注低碳生活的家庭用户、希望优化用电时段的开发者你将在本地存储中保存哪些数据例如API 密钥、地区代码、用户偏好设置如何处理 API 失败或速率限制例如显示友好错误信息、实现重试机制、缓存响应以减少调用次数围绕这四个问题你可以参考课程配套解决方案的架构思路。carbon-trigger扩展solution/src/index.js的整体数据流如下用户填写表单 → handleSubmit 拦截提交 → setUpUser 保存偏好到 localStorage → displayCarbonUsage 发起 API 请求 → 校验并解析 JSON → 更新 UI或显示错误而init()函数负责在扩展启动时检查本地存储如果找到已保存的apiKey与region则为「回归用户」直接自动加载数据并显示结果否则视为「首次用户」显示设置表单。这个「检查存储 → 分支处理」的流程正是规划问题 3 与问题 4 在代码层面的落实。第三步构建你的扩展作业明确了扩展必须包含的功能与代码质量要求下面结合课程 README 的代码与仓库解决方案逐一展开。必备功能要求1. 为所需 API 参数提供表单输入你需要为 API 要求的每个参数准备输入字段。参考课程代码2-forms-browsers-local-storage/README.md中通过 CSS 类选择器获取 DOM 引用的方式// form fields const form document.querySelector(.form-data); const region document.querySelector(.region-name); const apiKey document.querySelector(.api-key); // results const errors document.querySelector(.errors); const loading document.querySelector(.loading); const results document.querySelector(.result-container); const usage document.querySelector(.carbon-usage); const fossilfuel document.querySelector(.fossil-fuel); const myregion document.querySelector(.my-region); const clearBtn document.querySelector(.clear-btn);所有引用都以const存储便于在整个代码中复用。课程还强调HTML 表单字段应包含required属性让浏览器在handleSubmit执行前自动完成客户端校验确保用户同时提供 API 密钥与区域代码。2. 带恰当错误处理的 API 集成课程给出了使用现代fetchAPI 的displayCarbonUsage函数无需外部依赖async function displayCarbonUsage(apiKey, region) { try { const response await fetch(https://api.co2signal.com/v1/latest, { method: GET, headers: { auth-token: apiKey, Content-Type: application/json }, ...new URLSearchParams({ countryCode: region }) { url: https://api.co2signal.com/v1/latest?countryCode${region} } }); if (!response.ok) { throw new Error(API request failed: ${response.status}); } const data await response.json(); const carbonData data.data; const carbonIntensity Math.round(carbonData.carbonIntensity); loading.style.display none; form.style.display none; myregion.textContent region.toUpperCase(); usage.textContent ${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour); fossilfuel.textContent ${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity); results.style.display block; } catch (error) { console.error(Error fetching carbon data:, error); loading.style.display none; results.style.display none; errors.textContent Sorry, we couldn\t fetch data for that region. Please check your API key and region code.; } }这段代码演示了多个关键实践用response.ok提前捕获 API 失败、用模板字符串格式化输出、失败时隐藏加载状态并展示用户友好的错误消息。仓库中的完整解决方案solution/src/index.js则使用 axios 实现相同逻辑并额外加入了响应数据的空值校验if (data?.carbonIntensity null || data?.fossilFuelPercentage null) { throw new Error(Missing carbon intensity or fossil fuel data); }这是对「无效 API 响应」边界情况处理的直接体现与作业第四步「测试和打磨」中要求处理「无效 API 响应」的条目一一对应。3. 为偏好或 API 密钥提供本地存储localStorage是浏览器提供的一种持久化键值存储具有以下特性数据在浏览器会话之间持久保留不同于 sessionStorage通过getItem()与setItem()读写键值对当键不存在时返回null无需网络即可即时访问。在课程解决方案中setUpUser负责保存用户凭据function setUpUser(apiKey, regionName) { // Save user credentials for future sessions localStorage.setItem(apiKey, apiKey); localStorage.setItem(regionName, regionName); // Update UI to show loading state loading.style.display block; errors.textContent ; clearBtn.style.display block; // Fetch carbon usage data with users credentials displayCarbonUsage(apiKey, regionName); }而init()则负责读取function init() { const storedApiKey localStorage.getItem(apiKey); const storedRegion localStorage.getItem(regionName); if (storedApiKey null || storedRegion null) { // First-time user: show the setup form form.style.display block; results.style.display none; loading.style.display none; clearBtn.style.display none; errors.textContent ; } else { // Returning user: load their saved data automatically displayCarbonUsage(storedApiKey, storedRegion); results.style.display none; form.style.display none; clearBtn.style.display block; } }reset()函数则为用户提供重新开始的能力function reset(e) { e.preventDefault(); // Clear stored region to allow user to choose a new location localStorage.removeItem(regionName); // Restart the initialization process init(); }关于浏览器扩展本地存储的重要说明浏览器扩展拥有独立于普通网页的隔离存储空间这提供了安全隔离并防止与其他网站的数据冲突。你可以通过打开浏览器开发者工具F12切换到Application应用程序面板并展开Local Storage部分来查看已存储的数据。安全提醒在生产应用中将 API 密钥存放在 LocalStorage 存在安全风险因为 JavaScript 可以访问这些数据。本课程项目仅用于学习目的真实应用应将敏感凭据放在安全的服务器端存储中。4. 干净、响应式的用户界面扩展的 UI 应随应用状态动态切换首次用户显示表单、加载数据时显示加载指示器、成功后显示结果容器、失败时显示错误区域。上述代码中反复出现的loading.style.display、results.style.display、form.style.display切换正是这一要求的具体实现。5. 加载状态与用户反馈setUpUser在发起 API 调用前将loading元素设为可见成功后隐藏并显示结果失败时则在errors元素中呈现友好提示。这一「先显示加载、再根据结果切换 UI」的模式为用户提供了清晰的状态反馈。代码质量要求作业对代码质量提出了明确标准对照仓库解决方案可以逐条验证使用现代 JavaScriptES6特性解决方案大量使用const、箭头函数、模板字符串、可选链操作符?.与展开运算符...见 solution/src/index.js对 API 调用使用 async/awaitdisplayCarbonUsage、setUpUser、handleSubmit、init、reset均为 async 函数用 try/catch 进行错误处理displayCarbonUsage外层包裹try/catch捕获网络错误与数据异常添加有意义的注释解决方案代码在关键步骤前都有说明注释如// Save user credentials for future sessions、//make initial call、//start app保持一致的代码格式使用 Tab 缩进函数声明风格统一。课程 README 还强调了事件监听的注册方式对应index.js末尾的三行form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e)); init();这里用箭头函数简写作为回调比传统函数表达式更简洁。注意handleSubmit必须调用e.preventDefault()——课程自测题指出如果忘记这行代码页面将重新加载丢失全部 JavaScript 状态并打断用户体验function handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); }第四步测试与打磨作业要求对扩展进行系统测试用不同输入测试扩展尝试不同的 API 参数组合验证输出是否正确变化处理边界情况包括无网络连接、无效 API 响应如响应中缺少carbonIntensity字段可参考解决方案中的空值校验逻辑以及错误的 API 密钥确保浏览器重启后扩展仍能正常工作这直接依赖init()从 localStorage 恢复用户凭据的逻辑——重启后应自动加载已保存的设置并直接显示结果而非要求用户重新输入添加用户友好的错误消息例如课程代码中的Sorry, we couldn\t fetch data for that region. Please check your API key and region code.。加分挑战完成基础要求后作业提供了 5 个进阶方向添加多个 API 端点以获得更丰富的功能实现数据缓存以减少 API 调用次数可结合 localStorage 存储带过期时间戳的响应例如缓存 30 分钟为常见操作创建键盘快捷键添加数据导出/导入功能实现用户自定义选项。课程 README 的 GitHub Copilot Agent 挑战对这些方向给出了更具体的实践提示为失败的 API 调用实现带指数退避的重试机制、在调用 API 前校验区域代码、添加带进度指示的加载动画、在 localStorage 中缓存 API 响应30 分钟过期并展示历史数据——这些都与作业的加分项高度契合可作为你的进阶练习目标。提交要求作业提交需要包含三部分可正常工作的浏览器扩展能够成功与所选 API 集成README 文件说明选择了哪个 API 及原因如何安装和使用你的扩展所需的任何 API 密钥或设置步骤扩展运行时的截图干净、有注释的代码遵循现代 JavaScript 实践。仓库中碳足迹扩展的 READMEsolution/README.md是一个很好的文档范例它说明了安装步骤先npm install安装依赖再npm run build用 webpack 构建然后在 Edge 的扩展面板选择「Load Unpacked加载解压缩的扩展」加载dist文件夹。这提示你如果扩展使用 webpack 等构建工具参见 solution/package.json 中的build: webpack脚本与 axios 依赖README 需要说明完整的构建与加载流程。评估标准理解你的分数从何而来作业附带的评分表从五个维度评估你的成果这也是自我检查的最佳清单标准优秀90-100%良好80-89%发展中70-79%起步60-69%API 集成无瑕疵的 API 集成具有全面的错误与边界情况处理成功的 API 集成具备基本错误处理API 可用但错误处理有限API 集成存在重大问题代码质量干净、注释充分、遵循最佳实践的现代 JavaScript结构良好、注释恰当代码可用但需更好组织代码质量差、注释极少用户体验界面精美加载状态与用户反馈出色界面良好具备基本用户反馈界面基本可用用户体验差、界面令人困惑本地存储本地存储使用成熟含数据校验与管理关键功能正确实现本地存储基础本地存储实现本地存储使用极少或错误文档全面的 README含安装说明与截图覆盖大多数要求的良好文档基础文档、缺少细节文档差或缺失对照课程 README 的讲解你可以这样理解各维度的得分点API 集成的满分关键在于try/catchresponse.ok 数据空值校验的完整错误处理链路代码质量对应 ES6 特性、async/await 与注释规范用户体验对应加载状态切换与友好错误消息本地存储的「数据校验与管理」对应init()对存储数据的读取分支与reset()的清理逻辑文档对应 README 的安装、API 密钥说明与截图。配套参考资料作业附带的官方学习资源均来自 MDN包括浏览器扩展文档WebExtensionsFetch API 使用指南本地存储教程JSON 解析与处理。在本仓库中你可以进一步研读 本课完整讲义、模块总览、完整解决方案源码 以及起步脚手架后者以编号注释标出各段代码应放置的位置正好对应课程「按编号段落填充代码」的提示。通过「讲义 脚手架 解决方案」三者的对照你能最有效地理解每一步实现并独立完成自己的 API 扩展。说明本文基于 translations/de/5-browser-extension/2-forms-browsers-local-storage/assignment.md课程作业德文翻译版内容与英文原版 5-browser-extension/2-forms-browsers-local-storage/assignment.md 一致与课程配套源码撰写文中所有 API 示例与代码行为均可在本仓库对应文件中验证。【免费下载链接】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），仅供参考 采纳一个 API：基于 Web-Dev-For-Beginners 项目构建真实的浏览器扩展作业指南
采纳一个 API基于 Web-Dev-For-Beginners 项目构建真实的浏览器扩展作业指南【免费下载链接】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 开源课程中「浏览器扩展」模块第二部分表单与本地存储的作业任务展开讲解如何挑选一个免费公共 API并把它集成进一个具备表单输入、本地存储持久化、异步请求与错误处理能力的浏览器扩展中。读完本文你将掌握从 API 选型、扩展规划、编码实现到测试提交的完整作业流程并能对照仓库中的完整解决方案carbon trigger 扩展逐行理解关键实现。作业概述从静态表单到动态数据扩展在上一课中你已经构建了一个外观不错的浏览器扩展表单但它本质上是静态的。本次作业的目标是让扩展「活」起来连接真实的外部数据服务并让它拥有「记忆」。这正如课程 README 中所描述——扩展将接入互联网、获取真实的环境数据并记住你的设置供下次使用。本作业的核心任务非常明确选择一种外部 API并构建一个能解决真实问题或为用户提供有价值功能的浏览器扩展。它要求你综合运用以下核心技术栈DOM 操作使用document.querySelector()获取并控制表单与结果元素事件处理通过addEventListener监听表单提交与按钮点击本地存储使用localStorage在浏览器会话之间持久化用户偏好异步编程用async/await与fetch或 axios发起 API 请求错误处理用try/catch优雅应对网络失败与无效响应用户体验提供加载状态、错误提示与数据校验。这些能力正好对应本课2-forms-browsers-local-storage/README.md所讲解的全部知识点作业即是对课程内容的综合实践检验。第一步选择合适的 API作业要求从 public-apis 精选免费公共 API 列表 中挑选一个 API。选型时要考虑以下类别作业文档为初学者列出了 5 个热门选项API 名称类别用途Dog CEO API娱乐返回随机狗狗图片OpenWeatherMap天气获取实时天气数据Quotable API引用返回励志名言NewsAPI新闻获取当前头条新闻Numbers API趣味事实返回有趣的数字事实选型建议来自作业文档的 Getting Started Tips从简单开始选择不需要复杂认证的 API避免在第一步就陷入 OAuth 等繁琐流程阅读文档彻底理解所选 API 的端点endpoints与响应结构规划 UI在写代码之前先草绘扩展的界面频繁测试增量构建每添加一个功能就测试一次处理错误始终假设 API 调用可能失败并据此规划。值得注意的是本课程配套的完整解决方案选择了 CO2 Signal APIapi.co2signal.com用于查询某个地区电网的实时碳排放强度。该 API 通过auth-token请求头认证使用countryCode参数指定区域例如波士顿地区使用US-NEISO返回的 JSON 数据中包含carbonIntensity碳强度单位克 CO₂/千瓦时与fossilFuelPercentage化石燃料发电占比两个核心字段。第二步规划你的扩展作业要求你在动手编码前回答四个规划问题你的扩展解决什么问题例如帮助用户了解当前地区电力碳排放强度从而决定何时运行高耗电活动谁是目标用户例如关注低碳生活的家庭用户、希望优化用电时段的开发者你将在本地存储中保存哪些数据例如API 密钥、地区代码、用户偏好设置如何处理 API 失败或速率限制例如显示友好错误信息、实现重试机制、缓存响应以减少调用次数围绕这四个问题你可以参考课程配套解决方案的架构思路。carbon-trigger扩展solution/src/index.js的整体数据流如下用户填写表单 → handleSubmit 拦截提交 → setUpUser 保存偏好到 localStorage → displayCarbonUsage 发起 API 请求 → 校验并解析 JSON → 更新 UI或显示错误而init()函数负责在扩展启动时检查本地存储如果找到已保存的apiKey与region则为「回归用户」直接自动加载数据并显示结果否则视为「首次用户」显示设置表单。这个「检查存储 → 分支处理」的流程正是规划问题 3 与问题 4 在代码层面的落实。第三步构建你的扩展作业明确了扩展必须包含的功能与代码质量要求下面结合课程 README 的代码与仓库解决方案逐一展开。必备功能要求1. 为所需 API 参数提供表单输入你需要为 API 要求的每个参数准备输入字段。参考课程代码2-forms-browsers-local-storage/README.md中通过 CSS 类选择器获取 DOM 引用的方式// form fields const form document.querySelector(.form-data); const region document.querySelector(.region-name); const apiKey document.querySelector(.api-key); // results const errors document.querySelector(.errors); const loading document.querySelector(.loading); const results document.querySelector(.result-container); const usage document.querySelector(.carbon-usage); const fossilfuel document.querySelector(.fossil-fuel); const myregion document.querySelector(.my-region); const clearBtn document.querySelector(.clear-btn);所有引用都以const存储便于在整个代码中复用。课程还强调HTML 表单字段应包含required属性让浏览器在handleSubmit执行前自动完成客户端校验确保用户同时提供 API 密钥与区域代码。2. 带恰当错误处理的 API 集成课程给出了使用现代fetchAPI 的displayCarbonUsage函数无需外部依赖async function displayCarbonUsage(apiKey, region) { try { const response await fetch(https://api.co2signal.com/v1/latest, { method: GET, headers: { auth-token: apiKey, Content-Type: application/json }, ...new URLSearchParams({ countryCode: region }) { url: https://api.co2signal.com/v1/latest?countryCode${region} } }); if (!response.ok) { throw new Error(API request failed: ${response.status}); } const data await response.json(); const carbonData data.data; const carbonIntensity Math.round(carbonData.carbonIntensity); loading.style.display none; form.style.display none; myregion.textContent region.toUpperCase(); usage.textContent ${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour); fossilfuel.textContent ${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity); results.style.display block; } catch (error) { console.error(Error fetching carbon data:, error); loading.style.display none; results.style.display none; errors.textContent Sorry, we couldn\t fetch data for that region. Please check your API key and region code.; } }这段代码演示了多个关键实践用response.ok提前捕获 API 失败、用模板字符串格式化输出、失败时隐藏加载状态并展示用户友好的错误消息。仓库中的完整解决方案solution/src/index.js则使用 axios 实现相同逻辑并额外加入了响应数据的空值校验if (data?.carbonIntensity null || data?.fossilFuelPercentage null) { throw new Error(Missing carbon intensity or fossil fuel data); }这是对「无效 API 响应」边界情况处理的直接体现与作业第四步「测试和打磨」中要求处理「无效 API 响应」的条目一一对应。3. 为偏好或 API 密钥提供本地存储localStorage是浏览器提供的一种持久化键值存储具有以下特性数据在浏览器会话之间持久保留不同于 sessionStorage通过getItem()与setItem()读写键值对当键不存在时返回null无需网络即可即时访问。在课程解决方案中setUpUser负责保存用户凭据function setUpUser(apiKey, regionName) { // Save user credentials for future sessions localStorage.setItem(apiKey, apiKey); localStorage.setItem(regionName, regionName); // Update UI to show loading state loading.style.display block; errors.textContent ; clearBtn.style.display block; // Fetch carbon usage data with users credentials displayCarbonUsage(apiKey, regionName); }而init()则负责读取function init() { const storedApiKey localStorage.getItem(apiKey); const storedRegion localStorage.getItem(regionName); if (storedApiKey null || storedRegion null) { // First-time user: show the setup form form.style.display block; results.style.display none; loading.style.display none; clearBtn.style.display none; errors.textContent ; } else { // Returning user: load their saved data automatically displayCarbonUsage(storedApiKey, storedRegion); results.style.display none; form.style.display none; clearBtn.style.display block; } }reset()函数则为用户提供重新开始的能力function reset(e) { e.preventDefault(); // Clear stored region to allow user to choose a new location localStorage.removeItem(regionName); // Restart the initialization process init(); }关于浏览器扩展本地存储的重要说明浏览器扩展拥有独立于普通网页的隔离存储空间这提供了安全隔离并防止与其他网站的数据冲突。你可以通过打开浏览器开发者工具F12切换到Application应用程序面板并展开Local Storage部分来查看已存储的数据。安全提醒在生产应用中将 API 密钥存放在 LocalStorage 存在安全风险因为 JavaScript 可以访问这些数据。本课程项目仅用于学习目的真实应用应将敏感凭据放在安全的服务器端存储中。4. 干净、响应式的用户界面扩展的 UI 应随应用状态动态切换首次用户显示表单、加载数据时显示加载指示器、成功后显示结果容器、失败时显示错误区域。上述代码中反复出现的loading.style.display、results.style.display、form.style.display切换正是这一要求的具体实现。5. 加载状态与用户反馈setUpUser在发起 API 调用前将loading元素设为可见成功后隐藏并显示结果失败时则在errors元素中呈现友好提示。这一「先显示加载、再根据结果切换 UI」的模式为用户提供了清晰的状态反馈。代码质量要求作业对代码质量提出了明确标准对照仓库解决方案可以逐条验证使用现代 JavaScriptES6特性解决方案大量使用const、箭头函数、模板字符串、可选链操作符?.与展开运算符...见 solution/src/index.js对 API 调用使用 async/awaitdisplayCarbonUsage、setUpUser、handleSubmit、init、reset均为 async 函数用 try/catch 进行错误处理displayCarbonUsage外层包裹try/catch捕获网络错误与数据异常添加有意义的注释解决方案代码在关键步骤前都有说明注释如// Save user credentials for future sessions、//make initial call、//start app保持一致的代码格式使用 Tab 缩进函数声明风格统一。课程 README 还强调了事件监听的注册方式对应index.js末尾的三行form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e)); init();这里用箭头函数简写作为回调比传统函数表达式更简洁。注意handleSubmit必须调用e.preventDefault()——课程自测题指出如果忘记这行代码页面将重新加载丢失全部 JavaScript 状态并打断用户体验function handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); }第四步测试与打磨作业要求对扩展进行系统测试用不同输入测试扩展尝试不同的 API 参数组合验证输出是否正确变化处理边界情况包括无网络连接、无效 API 响应如响应中缺少carbonIntensity字段可参考解决方案中的空值校验逻辑以及错误的 API 密钥确保浏览器重启后扩展仍能正常工作这直接依赖init()从 localStorage 恢复用户凭据的逻辑——重启后应自动加载已保存的设置并直接显示结果而非要求用户重新输入添加用户友好的错误消息例如课程代码中的Sorry, we couldn\t fetch data for that region. Please check your API key and region code.。加分挑战完成基础要求后作业提供了 5 个进阶方向添加多个 API 端点以获得更丰富的功能实现数据缓存以减少 API 调用次数可结合 localStorage 存储带过期时间戳的响应例如缓存 30 分钟为常见操作创建键盘快捷键添加数据导出/导入功能实现用户自定义选项。课程 README 的 GitHub Copilot Agent 挑战对这些方向给出了更具体的实践提示为失败的 API 调用实现带指数退避的重试机制、在调用 API 前校验区域代码、添加带进度指示的加载动画、在 localStorage 中缓存 API 响应30 分钟过期并展示历史数据——这些都与作业的加分项高度契合可作为你的进阶练习目标。提交要求作业提交需要包含三部分可正常工作的浏览器扩展能够成功与所选 API 集成README 文件说明选择了哪个 API 及原因如何安装和使用你的扩展所需的任何 API 密钥或设置步骤扩展运行时的截图干净、有注释的代码遵循现代 JavaScript 实践。仓库中碳足迹扩展的 READMEsolution/README.md是一个很好的文档范例它说明了安装步骤先npm install安装依赖再npm run build用 webpack 构建然后在 Edge 的扩展面板选择「Load Unpacked加载解压缩的扩展」加载dist文件夹。这提示你如果扩展使用 webpack 等构建工具参见 solution/package.json 中的build: webpack脚本与 axios 依赖README 需要说明完整的构建与加载流程。评估标准理解你的分数从何而来作业附带的评分表从五个维度评估你的成果这也是自我检查的最佳清单标准优秀90-100%良好80-89%发展中70-79%起步60-69%API 集成无瑕疵的 API 集成具有全面的错误与边界情况处理成功的 API 集成具备基本错误处理API 可用但错误处理有限API 集成存在重大问题代码质量干净、注释充分、遵循最佳实践的现代 JavaScript结构良好、注释恰当代码可用但需更好组织代码质量差、注释极少用户体验界面精美加载状态与用户反馈出色界面良好具备基本用户反馈界面基本可用用户体验差、界面令人困惑本地存储本地存储使用成熟含数据校验与管理关键功能正确实现本地存储基础本地存储实现本地存储使用极少或错误文档全面的 README含安装说明与截图覆盖大多数要求的良好文档基础文档、缺少细节文档差或缺失对照课程 README 的讲解你可以这样理解各维度的得分点API 集成的满分关键在于try/catchresponse.ok 数据空值校验的完整错误处理链路代码质量对应 ES6 特性、async/await 与注释规范用户体验对应加载状态切换与友好错误消息本地存储的「数据校验与管理」对应init()对存储数据的读取分支与reset()的清理逻辑文档对应 README 的安装、API 密钥说明与截图。配套参考资料作业附带的官方学习资源均来自 MDN包括浏览器扩展文档WebExtensionsFetch API 使用指南本地存储教程JSON 解析与处理。在本仓库中你可以进一步研读 本课完整讲义、模块总览、完整解决方案源码 以及起步脚手架后者以编号注释标出各段代码应放置的位置正好对应课程「按编号段落填充代码」的提示。通过「讲义 脚手架 解决方案」三者的对照你能最有效地理解每一步实现并独立完成自己的 API 扩展。说明本文基于 translations/de/5-browser-extension/2-forms-browsers-local-storage/assignment.md课程作业德文翻译版内容与英文原版 5-browser-extension/2-forms-browsers-local-storage/assignment.md 一致与课程配套源码撰写文中所有 API 示例与代码行为均可在本仓库对应文件中验证。【免费下载链接】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），仅供参考