官方示例扩展：两种技术路线的参考实现

官方在示例仓库里放了两个风格迥异的扩展，恰好对应两条开发路线。动手写之前先读懂它们，能少走弯路。

路线一：复杂需求 → Node 项目 + cheerio 解析

示例名 github-contributor-avatars-sample：

• 形态：依赖 node.js 的完整项目，用 webpack 打包；
• 做什么：解析 GitHub 贡献者头像页的 DOM，把头像图片列表变成可下载资源；
• 适合：需要解析网页 DOM、处理复杂页面结构的场景——爬页面找直链类扩展的标准写法。

路线二：简单需求 → 纯 JS 零依赖

示例名 github-release-sample：

• 形态：纯 JavaScript 单文件，无任何依赖；
• 做什么：调用 GitHub 接口（fetch 实现）拿到 release 附件列表，返回下载文件清单；
• 适合：目标站点有现成接口、不需要解析 HTML 的场景——大多数 API 型扩展用这条路线就够了。

两个示例共同的结构

都包含 manifest.json（清单）+ 入口脚本两件套：清单里声明 onResolve 事件与 URL 匹配规则，脚本里把解析出的文件列表写回上下文。这套骨架的逐字段讲解在manifest.json 清单详解。

怎么跑起来看效果

把示例仓库的地址（子目录扩展记得加井号子目录名）粘进扩展页面安装，然后创建一个匹配的链接试试解析结果——先当用户用一遍，再读源码，效率最高，见扩展怎么装。

相关阅读

• 开发环境起步：脚手架创建扩展项目。