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本文基于 Web-Dev-For-Beginners 仓库的浏览器扩展课程第一课葡萄牙语版教案 5-browser-extension/1-about-browsers/translations/README.pt.md系统讲解浏览器的工作机制、扩展的安装加载流程以及“Carbon Trigger”碳足迹扩展的起步搭建HTML 双视图界面、项目目录结构与 Webpack 构建流程。读完之后你将能够解释 URL 到页面渲染的完整链路并把一个可运行的扩展骨架部署到 Chrome、Firefox 或 Edge 中验证。一、浏览器是什么从 WorldWideWeb 到现代渲染引擎浏览器扩展extension是为浏览器附加额外功能的小型应用。但在动手写扩展之前必须先理解宿主环境——浏览器本身是如何工作的。这正是本课教案的开篇逻辑先学“浏览器如何运行”再“结构化浏览器扩展的组成要素”。1.1 历史起点✅ 教案明确给出的史实第一个浏览器名为 “WorldWideWeb”由 Sir Timothy Berners-Lee蒂姆·伯纳斯-李于 1990 年创建。早期浏览器界面极其简陋教案配图 earlybrowsers.jpg 展示了一些早期浏览器的截图用以对比今天浏览器的成熟度。1.2 从 URL 到页面渲染的工作链路当用户通过 URLUniform Resource Locator统一资源定位符接入互联网时——通常经由http或https超文本传输协议——浏览器会与 Web 服务器通信并获取网页内容。随后浏览器的渲染引擎rendering engine在用户设备手机、台式机或笔记本上完成显示。教案归纳的浏览器核心能力包括内容缓存cache将已获取的资源本地缓存避免每次都从服务器重新拉取导航历史记录history记录用户的浏览轨迹Cookie 存储保存小型数据片段用于记录用户活动等信息以及更多本地存储、网络栈、安全模型等均为扩展可借助的平台能力。1.3 关键认知浏览器“并不相同”教案反复强调一点每个浏览器都有自己的长处与短处专业 Web 开发者必须理解如何让自己的页面在不同浏览器中都有良好表现。这包括处理手机这类小视口窗口以及用户处于离线状态时的降级方案。✅ 两个实用建议直接继承自教案将兼容性查询站点caniuse.com纯文本地址见原文加入书签——构建页面时查询它的技术支持列表能为用户提供最佳支持想知道自己用户群体中哪些浏览器最流行查看你的站点分析analytics数据在 Web 开发流程中安装分析包后它会告诉你各主流浏览器的使用占比。二、为什么做浏览器扩展以及如何安装2.1 扩展的价值定位做扩展的理由很直接当某个任务需要你高频重复执行时把它“附”在浏览器里最为顺手。教案给出的两个典型例子需要频繁查看各网页上的颜色值 → 安装取色器扩展记不住各种密码 → 使用密码管理类扩展。而且扩展开发本身有趣它们通常管理数量有限的任务并执行得恰到好处规模可控非常适合初学者练手。2.2 开发态扩展的安装流程开始构建前教案要求先了解扩展的“构建—部署”全流程。各浏览器细节略有差异但 Chrome、Firefox 与 Edge 的流程基本一致。以 Edge 为例见上方配图 install-on-edge.png使用npm build构建你的扩展结合仓库实际脚本即npm run build见下文第五节对 start/package.json 的说明在浏览器右上角点击...图标进入扩展面板Extensions panel首次安装选择Load unpacked加载未打包从本地文件夹加载扩展——本项目的加载对象是/dist目录更新已安装的扩展点击Reload重新加载即可。✅ 注意边界以上流程针对你自己构建的扩展若要安装官方商店中发布的扩展需前往对应浏览器商店如 Edge 加载项商店见原文按商店流程安装。三、项目目标Carbon Trigger 碳足迹扩展本课要构建的扩展功能明确显示你所在地区的碳足迹——展示该地区的电力使用量与能源来源构成。扩展提供一个表单用于收集 API Key从而访问CO2 Signal API。你需要的准备完整继承自教案“Você precisa”清单依赖项说明CO2 Signal API Key在 co2signal.com 页面填写邮箱密钥会发送到你的邮箱见原文不在此输出外部链接地区代码对应 Electricity Map 地图的区域代码如波士顿使用US-NEISO区域列表可查 api.electricitymap.org/v3/zones起步代码仓库中的 5-browser-extension/start 目录你将在其基础上补全代码NPMNode 包管理工具本地安装后依据package.json安装项目依赖✅ 教案建议拿到 API Key 与地区代码后先存入笔记备用——后续测试与调试都要用到。3.1 仓库中的起步包与依赖声明仓库提供的起步代码位于 5-browser-extension/start其 README 描述了这个扩展的完整目标利用 CO2 Signal API 追踪电力使用让浏览器栏上的彩色圆点实时反映你所在地区的电力“碳排放强度”从而辅助你判断当前适合执行哪些高耗能活动该圆点机制的设计灵感来自原文提到的加州排放类扩展 Energy Lollipop。从 start/package.json 可以确认工具链的真实配置运行环境约束engines要求npm 9.0.0、node 18.0.0构建脚本build: webpack与watch: webpack --watch——因此教案中“用 npm 构建扩展”对应的实际命令是npm run build教案原文写作npm build按脚本定义应以npm run build为准开发依赖webpack ^5.105.0与webpack-cli ^5.1.4构建/打包工具链运行时依赖axios ^1.15.0后续课节用于调用 CO2 Signal API 的 HTTP 客户端。起步目录下的 src/index.js 目前是一个带注释编号的骨架//1 表单字段、//2 设置监听并启动应用、//3 初始检查、//4 处理表单提交、//5 设置用户 API Key 与地区、//6 调用 API。这些编号注释就是后续课程的“填空地图”完整实现可对照 solution/src/index.js。四、项目结构dist 与 src 的分工教案给出的目录骨架如下结合仓库实际情况补充dist - | manifest.json (扩展在此定义各项标准/元数据) - | index.html (前端 HTML 标记) - | background.js (后台脚本 JS) - | main.js (构建产物 JS) src - | index.js (你的 JS 代码写在这里)各文件的职责可以从源码结构中确认manifest.json扩展的元数据、权限与入口声明是浏览器识别扩展的“身份证”index.html用户点击扩展图标时弹出窗口的界面标记background.js处理后台任务后续课节中用于接收消息并更新图标颜色main.jsWebpack 打包后的产物src/index.js你的开发源码经构建编译进main.js。这条“源码 → 打包 → dist”链路由 Webpack 完成下一节详解。五、构建扩展的 HTML 界面5.1 双视图设计扩展有两个视图配置视图收集 API Key 与地区代码——结果视图展示该地区的碳排放数据区域、碳使用量、化石燃料百分比。5.2 配置表单在/dist目录下的index.html中填入教案给出的表单结构form classform-data autocompleteon div h2Novo? Adicione suas informações./h2 /div div label forregionNome da Região/label input typetext idregion required classregion-name / /div div labelSua chave de API/label input typetext required classapi-key / /div button classsearch-btnEnviar/button /form这个表单就是用户信息API Key 与地区被录入并**保存到本地存储localStorage**的入口。对照仓库中的完整实现 solution/src/index.js可以看到 HTML 中每个 class 都在 JS 中有精确对应的选择器querySelector(.form-data)、querySelector(.region-name)、querySelector(.api-key)等见该文件第 3–7 行required属性与autocompleteon则分别保证必填校验与浏览器自动填充体验。5.3 结果区域在表单结束标签之后添加教案给出的结果区 divdiv classresult div classloadingcarregando.../div div classerrors/div div classdata/div div classresult-container pstrongRegião: /strongspan classmy-region/span/p pstrongUso de carbono: /strongspan classcarbon-usage/span/p pstrongPorcentagem de combustível fóssil: /strongspan classfossil-fuel/span/p /div button classclear-btnTrocar região/button /div这些结构在源码中的分工可从 solution/src/index.js 的选择器集合确认loadingAPI 数据拉取期间显示“carregando...”加载中errorsAPI 调用失败或数据缺失时展示错误信息——完整实现中当carbonIntensity或fossilFuelPercentage为空时会抛出并显示 “Sorry, data unavailable for the selected region.”见该文件第 44–67 行data保留原始数据便于开发调试result-container呈现格式化后的地区、碳使用量与化石燃料百分比clear-btn“Trocar região”允许用户清除保存的地区并重新配置——对应实现中的reset()只移除 localStorage 中的region键后重新初始化。六、构建流程npm install 与 Webpack 打包写界面代码前先确认扩展的依赖已安装npm install该命令使用 Node Package Manager 安装package.json中声明的依赖核心是为构建过程引入Webpack。教案对 Webpack 的定位是一个bundler打包器负责代码的编译与打包构建完成后查看/dist/main.js你会发现源码已被打包成浏览器可直接加载的产物。构建与验证的完整闭环npm install安装依赖package-lock.json保证版本一致见 start 目录npm run buildwebpack脚本见 start/package.json把src/index.js打包进dist/main.js按第二节的流程在 Edge/Chrome 的扩展面板Load unpacked加载dist目录点击扩展图标确认表单样式完整、布局正确地呈现。✅ 此时你已完成浏览器扩展开发的第一步界面构建并成功加载。后续课节课程目录见 5-browser-extension/README.md 及其后两课会为它接入表单提交、API 调用与图标状态更新等交互逻辑——这些在 solution/src/index.js 的displayCarbonUsage()与chrome.runtime.sendMessage({ action: updateIcon, ... })中已有完整参照。七、挑战、作业与延伸自修7.1 课程挑战教案布置的挑战前往一个浏览器扩展商店安装一个扩展然后以各种方式检查它的文件——manifest、打包后的脚本、图标资源——看看你能发现什么。这个练习直接呼应本课主题你现在已知道扩展文件由 manifest.json、HTML 界面与 JS 组成可以带着地图去“解剖”真实发布的扩展。7.2 作业重构扩展样式课后作业为 Refatore o estilo de sua extensão起步代码自带的样式可以不用要求你编辑 CSS 文件完成自己的风格化。评分标准Rubrica标准优秀合格需改进样式提交代码且新样式可用样式不完整样式包含错误7.3 延伸自修教案建议利用本课对浏览器历史的兴趣继续深读Web 浏览器发展史、Web 的历史Tim Berners-Lee 的愿景以及 2019 年“Web 30 周年”时对 Tim Berners-Lee 的访谈原文链接见教案末尾的 “Revisão e auto-estudo” 小节。小结本课建立了三层认知——浏览器“获取—缓存—渲染”的工作机制决定了扩展的宿主能力Load unpacked/Reload流程决定了扩展的开发迭代节奏而src → webpack → dist的目录分工与 HTML 选择器命名则是扩展 UI 与 JS 逻辑之间的契约。掌握这三层即可平滑进入课程第二课表单、本地存储与第三课后台任务与性能。【免费下载链接】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），仅供参考