Web-Dev-For-Beginners 浏览器扩展实战二表单提交、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本文基于 Web-Dev-For-Beginners 仓库中「浏览器扩展项目」第 2 课日文版课程文档带你把第 1 课搭好的静态扩展页面变成真正“有记忆、会联网”的动态应用通过 CSS 类选择器定位 DOM 元素、注册事件监听器、用 Local Storage 持久化用户设置、以async/await异步调用 CO2 Signal REST API 并渲染结果。读完并动手实现后你将掌握一个可运行的碳足迹查询扩展的完整前端逻辑理解 Web 存储、REST 认证与异步错误处理这三个职业 Web 开发的核心技能如何串联成一条数据流。本课在整个扩展项目中的位置浏览器扩展项目分三课推进第 1 课 Browser Extension Part 1 讲解浏览器与扩展的基本概念、项目脚手架webpack 构建以及表单 HTML 与结果div的搭建本课在第 1 课成果之上补齐 JavaScript 逻辑第 3 课再做后台任务与性能优化。课程文档约定编写代码时对照相应文件内的“编号段落”放置代码学习者起点是一份带编号占位注释的骨架文件 start/src/index.js//1 // form fields // results divs //6 //call the API //5 //set up users api key and region //4 // handle form submission //3 initial checks //2 // set listeners and start app可以看到编号与课程小节一一对应1 是 DOM 引用2 是监听器与启动3 是init()4 是表单提交5 是用户设置6 是 API 调用。完成构建后运行npm run buildwebpack并在扩展页刷新即可看到效果。项目的构建配置见 solution/package.json要求 Node ≥ 18、npm ≥ 9依赖axios^1.15.0与 webpack^5.105.4脚本提供build与watch两条命令。第一步准备要操作的 DOM 引用在 JavaScript 能操作界面之前需要先拿到具体 HTML 元素的引用。课程要求在 src/index.js 顶部用const变量保存每个关键元素的引用全部通过document.querySelector()配合 CSS 类选择器获取// フォームフィールド const form document.querySelector(.form-data); const region document.querySelector(.region-name); const apiKey document.querySelector(.api-key); // 結果 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);这些类名与第 1 课在 HTML 中设置的结构一一对应.form-data是表单容器.region-name与.api-key是两个输入框其余为加载指示、错误区、结果区.carbon-usage、.fossil-fuel、.my-region分别是碳强度、化石燃料占比、区域名的展示位以及清除按钮。把元素引用集中存为const后后文所有函数都可以直接复用而不必重复查询 DOM。第二步注册事件监听器并启动应用接下来让扩展响应用户动作为表单挂submit监听、为清除按钮挂click监听并在文件末尾立即调用一次init()完成初始化form.addEventListener(submit, (e) handleSubmit(e)); clearBtn.addEventListener(click, (e) reset(e)); init();注意这里的箭头函数速记法事件对象(e)被直接转发给handleSubmit/reset等价于写一个匿名 function 表达式再调用。课程还提示一个自查点如果忘了在表单提交处理里调用e.preventDefault()浏览器会执行默认提交行为整页刷新所有 JavaScript 状态都会丢失。第三步构建 init() 与 reset()理解 Local Storageinit()是扩展的“导航系统”扩展每次打开时先检查用户是否保存过设置再决定展示哪个界面function init() { //何かがローカルストレージにある場合は、それをピックアップします。 const storedApiKey localStorage.getItem(apiKey); const storedRegion localStorage.getItem(regionName); //アイコンを一般的な緑色に設定 //todo if (storedApiKey null || storedRegion null) { //キーを持っていない場合は、フォームを表示します。 form.style.display block; results.style.display none; loading.style.display none; clearBtn.style.display none; errors.textContent ; } else { //ローカルストレージにキー/領域を保存している場合、そのキー/領域がロードされたときに結果を表示します。 displayCarbonUsage(storedApiKey, storedRegion); results.style.display none; form.style.display none; clearBtn.style.display block; } }; function reset(e) { e.preventDefault(); //リージョン専用のローカルストレージをクリアします。 localStorage.removeItem(regionName); init(); }课程文档把这段逻辑拆解得很清楚两个const先检查用户是否已在 Local Storage 保存了 API 密钥与区域代码任一为null首次使用时把form显示为block同时隐藏结果区、加载区、清除按钮并把错误文本清空两者都存在回访用户时直接用存储值调用displayCarbonUsage()发起 API 查询隐藏表单、显示清除按钮。reset()只删除区域相关的键regionName再重新init()让用户换一个区域而不必从头配置。Local Storage 的关键特性与安全边界课程在此引入了一个对扩展开发极其重要的概念Local Storage。它以key-value字符串对的形式把数据保存在浏览器中特点是无有效期——关闭浏览器、重启电脑后数据依然存在另一种 Web 存储 session storage 则会在浏览器关闭时清空通过getItem()、setItem()、removeItem()三个 Web API 方法读写被所有现代浏览器广泛支持扩展拥有独立的 Local Storage 实例与主浏览器窗口普通网页的存储相互隔离各自独立工作。你可以在浏览器里验证给 API 键存入一个字符串值后如 Edge 中右键页面选“检查”切到 DevTools 的Application标签页查看 Local Storage 面板课程同时给出了明确的安全警告把 API 密钥放进 Local Storage 并不是好习惯因为任何能运行 JavaScript 的代码都能读取它。本课之所以这样做纯粹是因为这是一个不会发布到应用商店的学习项目。真实产品应在服务端安全地保管敏感凭据。第四步处理表单提交 handleSubmithandleSubmit接收事件参数(e)阻止默认行为避免页面刷新然后取出两个输入框的值交给setUpUserfunction handleSubmit(e) { e.preventDefault(); setUpUser(apiKey.value, region.value); }文档提醒回忆第 1 课的 HTML两个输入字段都带了required属性所以浏览器会在提交前强制用户填值这里拿到的不会是空值。第五步保存用户设置 setUpUsersetUpUser负责把凭据写入 Local Storage并布置好“API 正在调用中”的界面状态function setUpUser(apiKey, regionName) { localStorage.setItem(apiKey, apiKey); localStorage.setItem(regionName, regionName); loading.style.display block; errors.textContent ; clearBtn.style.display block; //初期化の呼び出し displayCarbonUsage(apiKey, regionName); }它做了五件事写入两个存储键、显示 loading 提示、清空历史错误、显示清除按钮、发起首次 API 调用。数据持久化与界面状态更新在同一次协调动作中完成这是“无刷新体验”的关键。第六步调用 CO2 Signal API 并渲染结果课程先补了 API 背景APIApplication Programming Interface是程序之间交互的标准方式其中最流行的一类是REST APIRepresentational State Transfer特点是使用不同形态的 URL 端点配合标准 HTTP 方法来取数。本扩展查询的是 CO2 Signal 的https://api.co2signal.com/v1/latest端点返回某区域电网实时的碳强度与化石燃料占比。异步是这段代码的核心async关键字让函数“先发起请求、等数据返回后再继续”避免扩展整体卡死在等待网络上。完整实现如下课程文档版本axios 的导入路径以最终源码为准见下文对比import axios from ../node_modules/axios; async function displayCarbonUsage(apiKey, region) { try { await axios .get(https://api.co2signal.com/v1/latest, { params: { countryCode: region, }, headers: { auth-token: apiKey, }, }) .then((response) { let CO2 Math.floor(response.data.data.carbonIntensity); //calculateColor(CO2); loading.style.display none; form.style.display none; myregion.textContent region; usage.textContent Math.round(response.data.data.carbonIntensity) grams (grams C02 emitted per kilowatt hour); fossilfuel.textContent response.data.data.fossilFuelPercentage.toFixed(2) % (percentage of fossil fuels used to generate electricity); results.style.display block; }); } catch (error) { console.log(error); loading.style.display none; results.style.display none; errors.textContent Sorry, we have no data for the region you have requested.; } }课程对这段“大功能”的要点解读值得完整保留因为 API 会返回 Promise所以函数写成async并包裹在try/catch中——我们无法控制 API 响应速度它甚至可能完全不响应必须用异步来消化这种不确定性通过请求头的auth-token参数完成认证查询参数countryCode指定区域响应到达后把response.data.data里的carbonIntensity碳强度克 CO₂/千瓦时与fossilFuelPercentage发电中化石燃料占比保留两位小数分别渲染到usage、fossilfuel并显示结果容器出错时隐藏加载与结果区向用户显示友好错误消息而不是抛出原始异常。代码里的//calculateColor(CO2)占位注释是留给第 3 课“动态图标”的内容本课完成时扩展主体已可运行只有图标颜色还是静态的。对照最终源码课程的落地形态把课程文档与仓库中的完成版 solution/src/index.js 对照可以验证整条调用链与几处演进调用链一致最终版同样是init()L89-L116读取存储 →displayCarbonUsage()L34-L68用 axios 请求v1/latest端点并携带auth-token头 → 成功后更新 UI、失败时写入错误提示监听器注册与init()启动L125-L129与课程描述完全一致。导入方式修正最终版使用标准的import axios from axiosL1而非课程讲义里示意性的../node_modules路径写法。存储键名变化最终版把区域键命名为regionL74、L92、L121课程讲义中为regionName两者语义相同读代码时注意区分。防御性增强最终版在解析响应前先做可选链取值与空值校验L42-L47数据缺失时主动抛错走 catch 分支比讲义版本更健壮。calculateColor的落地讲义中的占位注释在最终版实现了为calculateColorL17-L32——按[0, 150, 600, 750, 800]的 CO₂ 刻度把数值映射到五个渐深颜色再通过chrome.runtime.sendMessage({ action: updateIcon, value: { color } })通知后台脚本更新扩展图标init()里也补发了一个“通用绿色”的初始图标消息L95-L100。这正是课程所说“图标在下一课修复”的后续。构建产物位于dist/目录如 start/dist包含manifest.json、main.js、background.js、index.html、styles.css与images/——main.js就是src/index.js经 webpack 打包的结果。完成本课并npm run build、刷新扩展页后碳足迹查询即可用首次使用显示表单提交后显示加载态并拉取实时数据重开扩展则自动用存储的设置恢复结果清除按钮随时可以回到初始状态。挑战与课后作业课程的延伸练习是挑选一个浏览器内置的 Web API如 HTML Drag and Drop API深入研究思考“什么样的 API 称得上优秀”——它解决什么真实问题、如何处理错误与边界情况、有哪些安全考量、浏览器兼容如何。配套作业 API を採用するAdopt an API 要求你自选一个免费公共 API 并构建一个完整的浏览器扩展英文版 assignment.md 给出了更细的验收标准表单输入 API 所需参数、带正确错误处理的 API 集成、用 Local Storage 保存用户偏好或密钥、加载态与用户反馈、async/awaittry/catch的现代 JS 实现加分项包括多端点、缓存、键盘快捷键、数据导入导出等。评分维度覆盖 API 集成、代码质量、用户体验、Local Storage 使用与 README 文档质量。课程最后的复习建议值得展开Local Storage 与 API 是职业 Web 开发者的两件常用工具想一想它们如何协同——例如设计一个网站把用户授权信息缓存在 Web 存储中页面每次加载时先读缓存再决定是否重新向 API 请求这正是本课init()分支逻辑的放大版。【免费下载链接】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），仅供参考