Web-Dev-For-Beginners 浏览器扩展项目一浏览器工作原理与「Carbon Trigger」扩展开发入门【免费下载链接】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 课程浏览器扩展模块的第一课「All about Browsers」日文版位于 translations/README.ja.md展开先讲清浏览器为什么能获取并渲染网页、不同浏览器之间有何差异再按照课程配套代码start目录完整演示如何用 npm Webpack 构建一个显示本地碳足迹的浏览器扩展并在 Edge 中以「加载已解压的扩展」方式安装运行。读完后你将能独立搭建扩展的双视图 HTML 界面配置表单 结果展示、跑通 Webpack 构建流程并理解manifest.json中每个入口文件的作用。为什么做扩展之前要先理解浏览器浏览器扩展Browser Extension本质上是为浏览器添加功能的小型应用。这一系列课程的目标是构建能在 Chrome、Firefox、Edge 上运行的扩展因此第一步必须理解浏览器本身的工作方式。按照课程文档的定义浏览器是让终端用户从服务器获取内容并显示为网页的软件应用。一点历史背景最早的浏览器叫WorldWideWeb由 Sir Tim Berners-Lee 于 1990 年创建。用户输入 URLUniform Resource Locator地址访问互联网时通常经由http或https地址即超文本传输协议 HTTP/HTTPS让浏览器与 Web 服务器通信并获取网页内容随后浏览器的**渲染引擎Rendering Engine**负责在用户设备手机、桌面、笔记本等上把页面显示出来。除渲染之外浏览器还具备几项与扩展开发密切相关的核心能力缓存Cache浏览器会缓存内容不必每次都从服务器重新获取历史记录History记录用户的浏览活动Cookie一类包含用户活动信息的小型数据可用于保存用户状态。课程特别强调没有两个浏览器是完全一样的。每个浏览器各有优劣专业的 Web 开发者必须理解如何让网页跨浏览器正常工作包括适配手机这类小视口设备以及离线用户。因此文档建议把「查询各浏览器对某项技术的支持情况」的 caniuse 站点加入书签至于「你的用户到底在用哪些浏览器」可以通过在 Web 开发流程中安装各种分析Analytics包来获知——它们会告诉你哪些浏览器在你的用户群体中最流行。这些判断直接决定了扩展开发时该优先支持哪个浏览器、该做哪些降级处理。为什么要做浏览器扩展文档给出的理由很务实当你想快速访问那些反复执行的任务时扩展就派上用场。典型例子包括需要频繁查看各种网页的配色时安装一个**取色器Color Picker**类扩展懒得记密码时使用密码管理器类扩展。从源码结构看这类扩展有一个共同特点它们倾向于管理有限、边界清晰的单一任务而这正是扩展形态成立的原因——不需要独立应用或复杂工作流工具直接在浏览器界面里触手可及。文档也留了一个反思问题你最喜欢的浏览器扩展是什么它完成了什么任务扩展的构建与安装流程在写代码之前课程先走了一遍完整的构建—部署流程。各浏览器管理扩展的方式略有差异但 Chrome 与 Firefox 的流程与文档中以 Edge 为例演示的过程类似。核心流程只有四步用npm构建扩展仓库中对应的脚本见下文实际命令为npm run build文档简写为npm build点击浏览器右上角的「设置与更多」按钮...图标进入扩展管理页Edge 为edge://extensions首次安装选择load unpacked加载已解压的扩展上传构建产物文件夹——本项目是/dist目录更新已安装的扩展点击对应扩展的reload重新加载即可。对于已发布到商店的扩展则直接前往各浏览器对应的扩展商店安装如 Microsoft Edge 扩展商店那里提供经过审核、带自动更新的正式版本而load unpacked这类「侧载」方式仅用于开发阶段测试自己未发布的扩展。仓库中的构建配置佐证start目录的 package.json 完整定义了这套构建流程环境要求enginesnpm 9.0.0、node 18.0.0脚本scriptsbuild: webpack与watch: webpack --watch——npm run build执行一次性构建npm run watch则监听源码变化自动重建适合开发期反复调试依赖devDependencieswebpack ^5.105.0、webpack-cli ^5.1.4运行时依赖dependencies仅有axios ^1.15.0供后续课程调用 CO2 Signal API 使用。也就是说「构建扩展」这一步的实质是Webpack 把src/index.js编译、打包成浏览器可直接加载的dist/main.js。manifest.json扩展的身份证start目录已预置了构建产物 dist/manifest.json它是 Manifest V3 扩展的入口配置内容很短但每个字段都对应一个真实的文件{ manifest_version: 3, name: My Carbon Trigger, version: 0.1.0, host_permissions: [all_urls], background: { service_worker: background.js }, action: { default_popup: index.html } }逐字段对照仓库文件background: { service_worker: background.js }声明后台脚本 background.js。Manifest V3 用 Service Worker 取代旧版的后台页起步代码中它目前只有两行注释//add listener here和//draw the icon here留给后续课程填充action: { default_popup: index.html }点击扩展工具栏图标时弹出的页面即 index.html也就是本课程的「主界面」host_permissions: [all_urls]授予扩展对任意来源网络的访问权限——这是后续调用外部 CO2 Signal API 的前提也是课程后续「后台任务与性能」一课会重点审视的点预置的 index.html 中已经留好了两处占位注释!--form area--与!--result area--并引入styles.css与main.js当前main.js是 0 字节空文件等待 Webpack 构建产物填充。项目准备动手前需要的四样东西课程要构建的扩展是一个「Carbon Trigger」显示你所在地区电力使用的碳足迹与能源构成帮助你在高碳时段对能耗较大的活动做出判断。开始前需要准备所需资源获取方式API Key在 CO2 Signal 官方页面填写邮箱免费领取地区代码查电力地图Electricity Map对应你所在地区的 zone 代码例如波士顿使用US-NEISO起步代码下载本仓库的 start 目录5-browser-extension/start/README.md 有完整说明所有代码都将在该文件夹中完成NPM包管理工具本地安装后依据package.json安装项目依赖并供 Web 资产使用文档提醒拿到 API Key 和地区代码后先记到笔记的某个地方备用——后面测试扩展功能时马上会用到。另外注意安全惯例不要把 API Key 等敏感凭据提交到代码仓库课程后续会用浏览器本地存储来管理它见下文「参考答案」部分。项目结构dist 与 src 的分工文档给出的结构如下结合start目录实际内容补全start/ ├── package.json # 项目依赖与 build/watch 脚本 ├── src/ │ └── index.js # 你的 JS 代码写在这里 └── dist/ # 作为扩展加载的默认文件夹 ├── manifest.json # 扩展配置见上文 ├── index.html # 前端 HTML 标记含 form/result 占位 ├── background.js # 后台 Service Worker ├── main.js # Webpack 构建产物初始为空文件 ├── styles.css # 预置样式基于 Basic.css 风格含暗色模式适配 └── images/ # 弹窗页头图等图片资源各文件的职责manifest.json定义扩展元数据、权限与入口点index.html用户点击扩展图标时呈现的界面popupbackground.js处理后台任务与浏览器事件监听MV3 Service Worker;main.js构建后的最终打包 JS——执行npm run build后打开这个文件就能看到你的源码被打包bundle后的样子src/index.js你的开发代码所在地编译后变成main.js。起步代码 start/src/index.js 目前是一个 17 行的编号骨架按注释编号标出了六段待填逻辑//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、绑定监听并启动应用2、做初始检查3、处理表单提交4、保存用户的 API Key 与地区5最后调用 API6。构建扩展的 HTML表单与结果区这个扩展有两个视图一个用于收集 API Key 与地区代码首次配置另一个用于展示地区碳使用量即文首两张截图。文档要求在 dist/index.html 的!--form area--与!--result area--占位处写入以下标记。配置表单form classform-data autocompleteon div h2New? Add your Information/h2 /div div label forregionRegion Name/label input typetext idregion required classregion-name / /div div label forapiYour API Key from tmrow/label input typetext idapi required classapi-key / /div button classsearch-btnSubmit/button /form这是一个把配置信息写入本地存储localStorage的表单。结构上值得注意的细节label for...与id一一关联region/api保证可访问性两个输入框都带required属性浏览器原生校验会阻止空值提交classform-data、classregion-name、classapi-key是后续 JS 定位元素的钩子——对照完成版 solution/src/index.js它正是用document.querySelector(.form-data)、.region-name、.api-key取出这三个元素所以类名就是前后端的接口契约写错类名后面全部对不上。结果展示区在表单之后追加结果区div classresult div classloadingloading.../div div classerrors/div div classdata/div div classresult-container pstrongRegion: /strongspan classmy-region/span/p pstrongCarbon Usage: /strongspan classcarbon-usage/span/p pstrongFossil Fuel Percentage: /strongspan classfossil-fuel/span/p /div button classclear-btnChange region/button /div各容器的分工同样可在完成版源码中逐一验证元素作用.loading请求 API 数据期间显示「loading...」成功后display: none.errorsAPI 调用失败或数据缺失时显示错误信息.data开发期保留的原始数据调试位.result-container最终呈现格式化结果.my-region、.carbon-usage、.fossil-fuel三个span由 JS 填充文本.clear-btn「Change region」按钮允许用户重置配置、更换地区对照 solution/src/index.js 可以看到.loading、.errors、.result-container、.carbon-usage、.fossil-fuel、.my-region、.clear-btn全部通过querySelector取出与上面每个类名一一对应。安装依赖并构建写入 HTML 后按文档执行第一次构建npm install这条命令依据package.json安装扩展构建所需的依赖Webpack 等开发依赖与运行时的axios。安装完成后执行构建npm run build即package.json中build: webpack脚本Webpack 会把src/index.js编译打包产物写入/dist/main.js——打开该文件即可看到源码被 bundle 后的结果。此时把扩展构建产物加载进 Edge首次load unpacked选择/dist之后改完代码重新构建再reload就能看到表单被预置的 styles.css 干净地渲染出来——该样式表自带 CSS 变量主题与prefers-color-scheme: dark暗色模式适配扩展弹窗会跟随系统深浅色切换。这一步就迈出了构建浏览器扩展的第一脚后续课程将在此基础上让它变得真正可用。完成版是如何运转的供对照参考5-browser-extension/solution/src/index.js 完整实现了骨架中六段逻辑可以作为学习完全部课程后的对照标准init()L89-L116启动时从localStorage读取apiKey与region。两者缺失则显示配置表单视图一已存在则跳过表单直接拉取数据视图二——这正是「两个视图」切换的机制displayCarbonUsage(apiKey, region)L34-L68用axios请求https://api.co2signal.com/v1/latest以countryCode参数传入地区代码、请求头auth-token携带 API Key返回后校验carbonIntensity与fossilFuelPercentage字段分别渲染为「克 CO2/千瓦时」与「化石燃料发电占比」失败时把错误写进.errorscalculateColor(value)L17-L32把碳强度映射到色阶[0, 150, 600, 750, 800]与五色数组[#2AA364, #F5EB4D, #9E4229, #381D02, #381D02]绿→黄→棕→深棕再通过chrome.runtime.sendMessage({ action: updateIcon, ... })把颜色发给后台脚本由 background.js 绘制工具栏图标上的彩色圆点——这就是 start/README.md 中「彩色圆点」概念的实现该创意源自 Energy Lollipop 扩展reset(e)L118-L123「Change region」按钮只清除localStorage中的region保留 API Key再走一次init()。注意一个关键的安全实践API Key 与地区代码通过localStorage.setItem(apiKey / region, ...)存在浏览器本地L72-L74而不是硬编码进src/index.js随仓库分发——这呼应了课程「永远不要把 API Key 提交进代码仓库」的提醒。挑战、作业与延伸阅读挑战去浏览器扩展商店安装一个扩展研究它的文件组织方式——你能从它的manifest.json和打包产物里发现什么安装过程本身就是一次对本文流程的逆向练习。课后作业重新为你的扩展做样式。start目录的样式虽然完整但课程要求你编辑styles.css让扩展拥有自己的风格评分标准是「代码以可用的新样式提交」为满分档。复习与自学习本课时顺带接触了浏览器史文档建议进一步阅读三个方向的资料——Web 浏览器的历史、World Wide Web 的发明历程以及 Web 发明者 Tim Berners-Lee 关于「三十年后的 Web」的访谈理解最初的设计愿景如何影响今天的扩展生态。下一步完成本课后的下一课是 表单、浏览器与本地存储将把本文搭好的表单接上真实的数据流。小结本课时的知识密度集中在三处一是浏览器「URL → HTTP(S) 请求 → 渲染引擎显示」的基本链路以及跨浏览器差异对开发决策的影响二是「npm run build→load unpacked/reload」这条贯穿整个系列的扩展开发工作流三是dist/src分离的项目结构与 Manifest V3 的入口文件约定background.jsService Worker index.htmlpopup。只要dist里四件套manifest、HTML、background、main.js齐备且类名与 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），仅供参考
