devlab-web-extension-bootstraplisted
Install: claude install-skill seed-forge/harness-ai-kit
# DevLab Web Extension Bootstrap
## 用途
从零构建一个浏览器扩展（WebExtension / Manifest V3）的团队标准工作流，尤其适用于"**从某个已有 Web 应用里提取、下载或增强内容**"这类扩展。
核心原则：**这类扩展的成败取决于检测层（detection layer），而不是 UI。** 按钮谁都会写；难的是在多种页面形态（应用页 / SSR 分享页 / 未登录页）和登录态下都能稳定定位到目标资产。所以**先逆向、验证能拿到资产，再写 UI**。
把扩展当作有生命周期的产品来做：可行性 → 逆向工程 → 技术选型 → 架构 → 测试。代码验证通过后，开源与发布交给 `devlab-github-oss-ops`。
## 适用场景
- 新建浏览器扩展（Chrome/Edge/Firefox，MV3）
- 需要从特定 Web 应用读取 / 下载 / 增强内容的扩展
- 必须兼容多种页面类型（应用页、SSR 分享页、登出态）的扩展
- 把"网站能加载但不给我保存"变成一个可用工具
**不适用**：
- 纯 Web 应用或无需打包的 userscript
- 一次性的 DevTools console 片段
- 开源打包 / GitHub 发布阶段（用 `devlab-github-oss-ops`）
## 输入
| 输入项 | 是否必须 | 来源 |
|--------|----------|------|
| 目标 Web 应用 URL + 要提取的内容 | 是 | 用户描述 |
| 需覆盖的页面类型清单 | 是 | 逆向阶段枚举（应用页/分享页/登出页） |
| 目标浏览器 | 交互确认 | 默认 Chrome MV3 |
## 输出
- 一个可加载的 MV3 扩展（content script + background + popup）
- 一个纯函数、可注入、可单测的检测层
- 单元测试 + 真实浏览器 e2e 闭环
- 交接给 `devlab-github-oss-ops` 的就绪代码
## 工作流
调用本技能时的标准顺序：
1. 判定是否真的需要扩展（§1）
2. 逆向目标站点的数据通道（§2）—— 成败关键
3. 选型并脚手架（§3）
4. 搭建三面架构（§4）
5. 单测 + 真实浏览器 e2e 证明（§5）
6. 过验收门禁，交接 `devlab-github-oss-ops` 做开源与发布
配合 `brainstorming`（§1 前，新点子）、`writing-plans`（§4 前，多步实现）、`test-driven-development`（§5）、`verification-before-completion`（宣称就绪前）。
### §1 可行性与范围
动手前确认：
- 你要的内容在你浏览查看时**已经**被加载进浏览器（扩展只能保存页���在你会话下已能访问的内容）
- 你提取的是**你自己的**内容、走平台**自己的**端点（不破解/绕过付费墙——这既是合规红线也是维护陷阱）
- 目标有可识别的数据通道（见 §2），而非纯 canvas/WebGL 不可解析渲染
- **提前枚举必须支持的页面类型**：应用/��辑器页、公开分享页、登出页。每种暴露数据的方式可能不同。
产出：一句话问题陈述 + 需覆盖的页面类型清单。
### §2 逆向目标站点（关键阶段）
目标：找出页面暴露资产 URL / 标识符的**所有**途