拓冰网站定制 
Web-Dev-For-Beginners 浏览器扩展课程第一部分理解浏览器与打造第一个 Manifest V3 碳足迹扩展【免费下载链接】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系统讲解浏览器的工作机制URL 解析、HTTP 请求、渲染引擎、缓存与 cookies、浏览器扩展的安装与加载流程并给出一个可复制、可运行的实战路径基于 starter 代码库、Webpack 5 构建链和 Manifest V3 清单动手写出一个展示本地区域碳足迹的 Edge/Chrome 扩展的第一阶段——配置表单与结果界面的 HTML 搭建与首次构建加载。读完本文你将能够解释浏览器处理网页请求的完整链路并独立完成扩展的npm install、npm run build与 Load Unpacked 开发者模式安装闭环。一、浏览器是什么从 WorldWideWeb 到现代渲染引擎浏览器扩展Browser Extension是为浏览器添加额外功能的迷你应用。但在动手构建之前必须先理解浏览器本身的工作方式。定义浏览器是让用户能够访问服务器上的内容、并将其呈现为网页的软件应用。✅ 一点历史第一个浏览器名为 WorldWideWeb由 Sir Timothy Berners-Lee 于 1990 年创建。浏览器处理一次网页请求的完整链路原文档核心内容用户输入 URLUniform Resource Locator地址连接互联网通过http或https协议Hypertext Transfer Protocol访问资源浏览器与 Web 服务器通信拉取网页内容HTML、CSS、JavaScript此刻浏览器的**渲染引擎Rendering Engine**负责在用户的设备上——无论是手机、台式机还是笔记本——将内容输出为可视化页面。除了渲染浏览器还提供两项关键能力内容缓存Caching将已获取的网页资源缓存下来避免每次访问都回到服务器取回Cookies 存储cookies 是包含浏览活动记录所需信息的小型数据浏览器负责持久化保存它们。这两项能力正是后续课程中扩展功能本地存储 API 键、区域代码所依赖的浏览器基础设施。浏览器并不相同跨浏览器差异是必须面对的约束原文档强调了一个关键点所有浏览器并不完全一样。每个浏览器各有优劣专业 Web 开发者必须理解如何让网页在各种浏览器cross-browser下都正常工作其中就包括小视口viewport控制如手机屏幕与离线offline处理等任务。规划功能时用 caniuse 网站原文推荐加入书签上的技术支持清单可以判断你的技术在各主流浏览器的支持程度从而决定优先支持哪些浏览器想知道你的用户群中哪些浏览器最流行查看**分析analytics**数据——Web 开发流程中会安装各类分析包它们会告诉你不同主流浏览器中的使用占比帮助你确定支持优先级。二、为什么做浏览器扩展小而专解决重复操作做扩展的动因很直接当某个重复性操作需要频繁进出浏览器时扩展是最便捷的答案。原文档给出的典型场景在多个网页中反复查看颜色值 → 安装一个color-picker类扩展难以记住各站点的密码 → 安装password-management类扩展。浏览器扩展往往把数量有限的几项任务做得非常精到这也是它易于开发、趣味十足的原因。✅ 自检问题你最喜欢的浏览器扩展是什么它完成什么任务三、扩展的安装与加载流程npm build → Load Unpacked / Reload在动手写代码前先走一遍编写并部署浏览器扩展的完整流程。各浏览器管理这一过程的方式略有差异但 Chrome、Firefox、Edge 的流程本质相同原文档以 Edge 为例用npm build构建扩展starter 代码库中对应的实际脚本是npm run build见下文 package.json 的scripts.build: webpack点击浏览器右上角的...图标进入 Extensions扩展管理面板若是首次安装选择Load Unpacked把构建产物文件夹本项目为/dist加载进去若扩展已安装代码改动后点击该扩展旁的reload重新加载即可。✅ 注意区分本流程针对你自己构建的扩展开发者侧载。若要安装各浏览器官方商店如 Microsoft Edge Add-ons已发布上架的扩展则直接去对应商店搜索安装即可——这也正是文末挑战环节要做的事。四、项目准备一个展示区域碳足迹的扩展本项目的产品形态是一个区域碳足迹扩展显示你所在地区的能源使用量与能源来源。扩展内置一个表单用于收集访问 CO2 Signal API 所需的 API 密钥并在结果界面输出该地区的碳使用数据。所需资源清单原文档完整继承API 密钥CO2 Signal 的 API key——在其官网页面输入邮箱即可收到密钥邮件区域代码对应 Electricity Map 的区域编码Electricity Map 的 zones 接口提供全集例如波士顿使用US-NEISOstarter 代码仓库中的 start 文件夹 即课程起点后续所有代码都在这个文件夹内完成NPMNode 的包管理工具需本地安装它会按 package.json 中列出的依赖安装好构建所需的 Web 资产。✅ 实操提示拿到 API key 和区域代码后先记下来后续会反复用到。安全上切勿把密钥提交进代码仓库。代码库结构dist 与 src 的分工原文档给出的目录树如下dist放构建产物与默认配置src放你书写的源码dist -|manifest.json (defaults set here) # 扩展默认配置 -|index.html (front-end HTML markup) # 前端 HTML 标记 -|background.js (background JS) # 后台脚本 -|main.js (built JS) # Webpack 打包后的 JS src -|index.js (your JS code goes here) # 你的 JS 代码写在这里结合仓库实际文件可以进一步确认每个角色的实现事实dist/manifest.json是 Manifest V3 清单决定了扩展的身份、权限与入口manifest.json 原文如下{ 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 } }manifest_version: 3使用 MV3后台脚本以service_worker形式声明background.jsaction.default_popup: index.html点击扩展图标时弹出的就是dist/index.html这正是我们本阶段要填充表单与结果区的文件host_permissions: [all_urls]为后续调用外部 API 预留的宿主权限。dist/index.html目前是带占位注释的骨架index.htmlbody classcontainer img altplants and people srcimages/plants-people.png / div h1Welcome to Your Personal Carbon Trigger!/h1 /div !--form area-- !-- 本阶段要填充的表单区域 -- !--result area-- !-- 本阶段要填充的结果区域 -- script srcmain.js/script /body页面通过styles.css引入基础样式基于 Basic.css 的变量体系支持prefers-color-scheme: dark暗色模式见 styles.css并以script srcmain.js挂载打包产物。src/index.js是带编号注释的脚手架index.js为后续课程的实现排好了 1–6 的落点1 表单字段选择器、2 设置监听并启动应用、3 初始检查、4 处理表单提交、5 设置用户的 API key 与区域、6 调用 API——本阶段第一部分先只动 HTMLJS 逻辑留到后续课程。五、构建扩展的 HTML两个屏幕配置表单 结果区这个扩展有两个界面第一屏收集 API 密钥与区域代码第二屏输出该区域的碳使用数据。现在动手在/dist文件夹的index.html中在!--form area--处填入表单区域原文档完整代码form classform-data autocompleteon div h2New? Add your Information/h2 /div div labelRegion Name/label input typetext required classregion-name / /div div labelYour API Key from tmrow/label input typetext required classapi-key / /div button classsearch-btnSubmit/button /form这个表单的用途是让用户填入保存的信息并将它们写入本地存储localStorage。结构要点classform-data整个表单的容器类后续 JS 用它绑定submit事件classregion-name与classapi-key两个必填输入框requiredJS 通过这两个类名取值并存入 localStorageautocompleteon允许浏览器自动填充改善首次配置体验classsearch-btn提交按钮。接着在表单下方添加结果区域原文档完整代码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 期间的加载提示errorsAPI 失败或数据无效时显示错误信息data保留原始数据用于开发调试result-container格式化展示碳数据其中my-region、carbon-usage、fossil-fuel三个 span 就是后续 JS 填充文本的目标节点clear-btnChange region允许用户更换区域、重新配置扩展。可以对照 solution 目录中的成品构建产物 验证这些类名正是后续 JS 的查询目标实现中通过document.querySelector(.form-data)、.region-name、.api-key、.errors、.loading、.result-container、.carbon-usage、.fossil-fuel、.my-region、.clear-btn分别取到上述节点把apiKey与region写入 localStorage随后以auth-token请求头调用 CO2 Signal 的/v1/latest接口取回carbonIntensity单位克 CO2/千瓦时与fossilFuelPercentage化石燃料占比后填入对应 span并用display样式在 loading / 表单 / 结果三种状态间切换。六、构建链npm install 与 Webpack 打包HTML 写好后回到终端完成本阶段的收尾——安装依赖并构建npm install该命令使用 Node 的包管理器 npm按 package.json 安装扩展构建流程所需的依赖。从仓库的 package.json 可以确认其具体内容{ name: carbon-trigger-extension, engines: { npm: 9.0.0, node: 18.0.0 }, scripts: { test: echo \Error: no test specified\ exit 1, watch: webpack --watch, build: webpack }, devDependencies: { webpack: ^5.105.0, webpack-cli: ^5.1.4 }, dependencies: { axios: ^1.15.0 } }webpackwebpack-cli是构建工具链Webpack 是一个bundler负责控制编译与打包axios是运行期依赖供后续课程发起 API 请求使用starter 的 main.js 目前为空文件构建后才会被填充——对照 solution 的构建产物 可以看到 axios 库已被完整打进 bundle这正是代码被捆绑bundled的直观证据engines声明了运行前提Node 18、npm 9环境不满足时npm install会直接报错scripts中除build: webpack外还提供watch: webpack --watch——开发时开启 watch 模式src/下的改动会被自动重新打包省去每次手动 build。构建完成后npm run build输出即/dist/main.js。此时若把该扩展作为开发者扩展部署到 Edge弹出窗口中表单就会以干净排版显示——本阶段第一部分到此完成后续课程将在此基础上加入交互逻辑。从源码结构看扩展图标能量点系统作为对整体架构的预告starter 的 background.js 展示了 MV3 service worker 如何与弹窗页面协作它监听chrome.runtime.onMessage事件当收到action updateIcon的消息时调用drawIcon函数用OffscreenCanvas画布绘制一个 100×100 的彩色圆点并getImageData后通过chrome.action.setIcon更新扩展栏图标颜色。solution 的构建产物中可以看到carbonIntensity会先按[0, 150, 600, 750, 800]分档取最近值再映射到#2AA364绿→#381D02深褐的色阶——这就是浏览器扩展栏上那枚碳强度指示点灵感来自 Energy Lollipop 扩展。理解这条popup 发消息 → service worker 改图标的调用链是理解后续课程背景脚本Part 3的钥匙。七、练习、挑战与自我提升课后挑战原文档 Challenge去浏览器扩展商店浏览挑选一个扩展安装到你的浏览器上然后设法拆解它的文件。你能发现什么——商店扩展的解包结构与本课程的manifest.json 打包 JS 结构如出一辙这是把课堂知识落到实处的最好方式。课后作业本课的正式作业是 Restyle your extension要求你在保持可用性的前提下为扩展设计配色、字体与布局用npm run build 重新加载的方式测试表单、加载、结果、错误各视觉状态并按评分表视觉设计 / 功能性 / 代码质量 / 可访问性四个维度自评。复习与自学习本课带我们回顾了一点浏览器历史。建议顺着这条线继续阅读 Web 浏览器发展史、万维网World Wide Web的历史以及 Sir Tim Berners-Lee 关于 Web 诞生 30 年的访谈理解万维网先驱们当初如何构想着它的用途——这会让你在后续设计扩展功能时更有历史纵深。可立即动手的清单结合原文档与仓库打开浏览器的扩展管理页如edge://extensions或chrome://extensions开启开发者模式清点你已安装的扩展在 DevTools 的 Network 面板里观察一次网页加载验证请求 → 响应 → 渲染的链路按本文第五、六节完成dist/index.html的表单与结果区填写跑通npm install、npm run build与 Load Unpacked 全流程对照 solution 的完整实现 与 starter 的起点代码逐行理解从脚手架到成品之间差了什么。【免费下载链接】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），仅供参考 Web-Dev-For-Beginners 浏览器扩展课程第一部分：理解浏览器与打造第一个 Manifest V3 碳足迹扩展
Web-Dev-For-Beginners 浏览器扩展课程第一部分理解浏览器与打造第一个 Manifest V3 碳足迹扩展【免费下载链接】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系统讲解浏览器的工作机制URL 解析、HTTP 请求、渲染引擎、缓存与 cookies、浏览器扩展的安装与加载流程并给出一个可复制、可运行的实战路径基于 starter 代码库、Webpack 5 构建链和 Manifest V3 清单动手写出一个展示本地区域碳足迹的 Edge/Chrome 扩展的第一阶段——配置表单与结果界面的 HTML 搭建与首次构建加载。读完本文你将能够解释浏览器处理网页请求的完整链路并独立完成扩展的npm install、npm run build与 Load Unpacked 开发者模式安装闭环。一、浏览器是什么从 WorldWideWeb 到现代渲染引擎浏览器扩展Browser Extension是为浏览器添加额外功能的迷你应用。但在动手构建之前必须先理解浏览器本身的工作方式。定义浏览器是让用户能够访问服务器上的内容、并将其呈现为网页的软件应用。✅ 一点历史第一个浏览器名为 WorldWideWeb由 Sir Timothy Berners-Lee 于 1990 年创建。浏览器处理一次网页请求的完整链路原文档核心内容用户输入 URLUniform Resource Locator地址连接互联网通过http或https协议Hypertext Transfer Protocol访问资源浏览器与 Web 服务器通信拉取网页内容HTML、CSS、JavaScript此刻浏览器的**渲染引擎Rendering Engine**负责在用户的设备上——无论是手机、台式机还是笔记本——将内容输出为可视化页面。除了渲染浏览器还提供两项关键能力内容缓存Caching将已获取的网页资源缓存下来避免每次访问都回到服务器取回Cookies 存储cookies 是包含浏览活动记录所需信息的小型数据浏览器负责持久化保存它们。这两项能力正是后续课程中扩展功能本地存储 API 键、区域代码所依赖的浏览器基础设施。浏览器并不相同跨浏览器差异是必须面对的约束原文档强调了一个关键点所有浏览器并不完全一样。每个浏览器各有优劣专业 Web 开发者必须理解如何让网页在各种浏览器cross-browser下都正常工作其中就包括小视口viewport控制如手机屏幕与离线offline处理等任务。规划功能时用 caniuse 网站原文推荐加入书签上的技术支持清单可以判断你的技术在各主流浏览器的支持程度从而决定优先支持哪些浏览器想知道你的用户群中哪些浏览器最流行查看**分析analytics**数据——Web 开发流程中会安装各类分析包它们会告诉你不同主流浏览器中的使用占比帮助你确定支持优先级。二、为什么做浏览器扩展小而专解决重复操作做扩展的动因很直接当某个重复性操作需要频繁进出浏览器时扩展是最便捷的答案。原文档给出的典型场景在多个网页中反复查看颜色值 → 安装一个color-picker类扩展难以记住各站点的密码 → 安装password-management类扩展。浏览器扩展往往把数量有限的几项任务做得非常精到这也是它易于开发、趣味十足的原因。✅ 自检问题你最喜欢的浏览器扩展是什么它完成什么任务三、扩展的安装与加载流程npm build → Load Unpacked / Reload在动手写代码前先走一遍编写并部署浏览器扩展的完整流程。各浏览器管理这一过程的方式略有差异但 Chrome、Firefox、Edge 的流程本质相同原文档以 Edge 为例用npm build构建扩展starter 代码库中对应的实际脚本是npm run build见下文 package.json 的scripts.build: webpack点击浏览器右上角的...图标进入 Extensions扩展管理面板若是首次安装选择Load Unpacked把构建产物文件夹本项目为/dist加载进去若扩展已安装代码改动后点击该扩展旁的reload重新加载即可。✅ 注意区分本流程针对你自己构建的扩展开发者侧载。若要安装各浏览器官方商店如 Microsoft Edge Add-ons已发布上架的扩展则直接去对应商店搜索安装即可——这也正是文末挑战环节要做的事。四、项目准备一个展示区域碳足迹的扩展本项目的产品形态是一个区域碳足迹扩展显示你所在地区的能源使用量与能源来源。扩展内置一个表单用于收集访问 CO2 Signal API 所需的 API 密钥并在结果界面输出该地区的碳使用数据。所需资源清单原文档完整继承API 密钥CO2 Signal 的 API key——在其官网页面输入邮箱即可收到密钥邮件区域代码对应 Electricity Map 的区域编码Electricity Map 的 zones 接口提供全集例如波士顿使用US-NEISOstarter 代码仓库中的 start 文件夹 即课程起点后续所有代码都在这个文件夹内完成NPMNode 的包管理工具需本地安装它会按 package.json 中列出的依赖安装好构建所需的 Web 资产。✅ 实操提示拿到 API key 和区域代码后先记下来后续会反复用到。安全上切勿把密钥提交进代码仓库。代码库结构dist 与 src 的分工原文档给出的目录树如下dist放构建产物与默认配置src放你书写的源码dist -|manifest.json (defaults set here) # 扩展默认配置 -|index.html (front-end HTML markup) # 前端 HTML 标记 -|background.js (background JS) # 后台脚本 -|main.js (built JS) # Webpack 打包后的 JS src -|index.js (your JS code goes here) # 你的 JS 代码写在这里结合仓库实际文件可以进一步确认每个角色的实现事实dist/manifest.json是 Manifest V3 清单决定了扩展的身份、权限与入口manifest.json 原文如下{ 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 } }manifest_version: 3使用 MV3后台脚本以service_worker形式声明background.jsaction.default_popup: index.html点击扩展图标时弹出的就是dist/index.html这正是我们本阶段要填充表单与结果区的文件host_permissions: [all_urls]为后续调用外部 API 预留的宿主权限。dist/index.html目前是带占位注释的骨架index.htmlbody classcontainer img altplants and people srcimages/plants-people.png / div h1Welcome to Your Personal Carbon Trigger!/h1 /div !--form area-- !-- 本阶段要填充的表单区域 -- !--result area-- !-- 本阶段要填充的结果区域 -- script srcmain.js/script /body页面通过styles.css引入基础样式基于 Basic.css 的变量体系支持prefers-color-scheme: dark暗色模式见 styles.css并以script srcmain.js挂载打包产物。src/index.js是带编号注释的脚手架index.js为后续课程的实现排好了 1–6 的落点1 表单字段选择器、2 设置监听并启动应用、3 初始检查、4 处理表单提交、5 设置用户的 API key 与区域、6 调用 API——本阶段第一部分先只动 HTMLJS 逻辑留到后续课程。五、构建扩展的 HTML两个屏幕配置表单 结果区这个扩展有两个界面第一屏收集 API 密钥与区域代码第二屏输出该区域的碳使用数据。现在动手在/dist文件夹的index.html中在!--form area--处填入表单区域原文档完整代码form classform-data autocompleteon div h2New? Add your Information/h2 /div div labelRegion Name/label input typetext required classregion-name / /div div labelYour API Key from tmrow/label input typetext required classapi-key / /div button classsearch-btnSubmit/button /form这个表单的用途是让用户填入保存的信息并将它们写入本地存储localStorage。结构要点classform-data整个表单的容器类后续 JS 用它绑定submit事件classregion-name与classapi-key两个必填输入框requiredJS 通过这两个类名取值并存入 localStorageautocompleteon允许浏览器自动填充改善首次配置体验classsearch-btn提交按钮。接着在表单下方添加结果区域原文档完整代码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 期间的加载提示errorsAPI 失败或数据无效时显示错误信息data保留原始数据用于开发调试result-container格式化展示碳数据其中my-region、carbon-usage、fossil-fuel三个 span 就是后续 JS 填充文本的目标节点clear-btnChange region允许用户更换区域、重新配置扩展。可以对照 solution 目录中的成品构建产物 验证这些类名正是后续 JS 的查询目标实现中通过document.querySelector(.form-data)、.region-name、.api-key、.errors、.loading、.result-container、.carbon-usage、.fossil-fuel、.my-region、.clear-btn分别取到上述节点把apiKey与region写入 localStorage随后以auth-token请求头调用 CO2 Signal 的/v1/latest接口取回carbonIntensity单位克 CO2/千瓦时与fossilFuelPercentage化石燃料占比后填入对应 span并用display样式在 loading / 表单 / 结果三种状态间切换。六、构建链npm install 与 Webpack 打包HTML 写好后回到终端完成本阶段的收尾——安装依赖并构建npm install该命令使用 Node 的包管理器 npm按 package.json 安装扩展构建流程所需的依赖。从仓库的 package.json 可以确认其具体内容{ name: carbon-trigger-extension, engines: { npm: 9.0.0, node: 18.0.0 }, scripts: { test: echo \Error: no test specified\ exit 1, watch: webpack --watch, build: webpack }, devDependencies: { webpack: ^5.105.0, webpack-cli: ^5.1.4 }, dependencies: { axios: ^1.15.0 } }webpackwebpack-cli是构建工具链Webpack 是一个bundler负责控制编译与打包axios是运行期依赖供后续课程发起 API 请求使用starter 的 main.js 目前为空文件构建后才会被填充——对照 solution 的构建产物 可以看到 axios 库已被完整打进 bundle这正是代码被捆绑bundled的直观证据engines声明了运行前提Node 18、npm 9环境不满足时npm install会直接报错scripts中除build: webpack外还提供watch: webpack --watch——开发时开启 watch 模式src/下的改动会被自动重新打包省去每次手动 build。构建完成后npm run build输出即/dist/main.js。此时若把该扩展作为开发者扩展部署到 Edge弹出窗口中表单就会以干净排版显示——本阶段第一部分到此完成后续课程将在此基础上加入交互逻辑。从源码结构看扩展图标能量点系统作为对整体架构的预告starter 的 background.js 展示了 MV3 service worker 如何与弹窗页面协作它监听chrome.runtime.onMessage事件当收到action updateIcon的消息时调用drawIcon函数用OffscreenCanvas画布绘制一个 100×100 的彩色圆点并getImageData后通过chrome.action.setIcon更新扩展栏图标颜色。solution 的构建产物中可以看到carbonIntensity会先按[0, 150, 600, 750, 800]分档取最近值再映射到#2AA364绿→#381D02深褐的色阶——这就是浏览器扩展栏上那枚碳强度指示点灵感来自 Energy Lollipop 扩展。理解这条popup 发消息 → service worker 改图标的调用链是理解后续课程背景脚本Part 3的钥匙。七、练习、挑战与自我提升课后挑战原文档 Challenge去浏览器扩展商店浏览挑选一个扩展安装到你的浏览器上然后设法拆解它的文件。你能发现什么——商店扩展的解包结构与本课程的manifest.json 打包 JS 结构如出一辙这是把课堂知识落到实处的最好方式。课后作业本课的正式作业是 Restyle your extension要求你在保持可用性的前提下为扩展设计配色、字体与布局用npm run build 重新加载的方式测试表单、加载、结果、错误各视觉状态并按评分表视觉设计 / 功能性 / 代码质量 / 可访问性四个维度自评。复习与自学习本课带我们回顾了一点浏览器历史。建议顺着这条线继续阅读 Web 浏览器发展史、万维网World Wide Web的历史以及 Sir Tim Berners-Lee 关于 Web 诞生 30 年的访谈理解万维网先驱们当初如何构想着它的用途——这会让你在后续设计扩展功能时更有历史纵深。可立即动手的清单结合原文档与仓库打开浏览器的扩展管理页如edge://extensions或chrome://extensions开启开发者模式清点你已安装的扩展在 DevTools 的 Network 面板里观察一次网页加载验证请求 → 响应 → 渲染的链路按本文第五、六节完成dist/index.html的表单与结果区填写跑通npm install、npm run build与 Load Unpacked 全流程对照 solution 的完整实现 与 starter 的起点代码逐行理解从脚手架到成品之间差了什么。【免费下载链接】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），仅供参考