[VibeCoding/浏览器插件] 自动化网页目录导航插件(Automated Web Catalog)的开发过程 | 记录一次基于Vibe Coding软件开发模式下，开发Edge/Chrome浏览器扩展插件的经典过程
0 序
-
Vibe Coding也有三年多了，而这次全新开发一个软件小程序的过程，比较经典，索性记录、总结下。
-
这个开发、调试过程，特别像 AI Agent (ReAct及其衍生模式) 的工作流程。
-
本浏览器插件URL: Automated Web Catalog
开发浏览器插件的契机
-
昨天晚上在PC电脑Web端撰写【知识星球】的Markdown文章时，意识到它没有【目录导航】的功能。这个功能，对于我个人的阅读习惯而言，是非常重要的。
-
那我是不是可以把这个诉求通过Vibe Coding的方式开发出来呢？毕竟平时我浏览各个网站的技术博客、文章时都有这个诉求——把它做得更通用化、不仅仅支持【知识星球】一个网站。
-
这个插件功能（Web网页的目录导航），这既帮助个人提高阅读效率、也可帮助广大网友们。
-
那么，说干就干。
插件效果
- 进入任意网页浏览时，都会自带这个【目录导航】，大幅度提升阅读效率、阅读质量。
插件信息
- 插件主页: 尚在微软Edge扩展商店的审核中。
- 安装步骤 & 使用步骤：
- 打开浏览器的扩展管理页：
- Chrome：地址栏输入
chrome://extensions/- Edge：地址栏输入
edge://extensions/- 点击右上角「获取 Microsoft Edge 扩展」链接，选择【扩展】页签。
https://microsoftedge.microsoft.com/addons/microsoft-edge-extensions?hl=zh-CN
- 点击「加载已解压的扩展程序 / 加载解压缩的扩展」，选择本插件根目录（即包含
manifest.json的文件夹）。- 加载成功后，打开任意Web页面（如技术博客、知识星球文章），均会自动出现悬浮【结构化的目录页签】。
易用性，还是比较高的。
1 开发过程
- AI Agent工具： 豆包 Desktop（专业版，Work模式）
开发流程 (必读)
flowchart TD
A[Step1 撰写:需求描述文档] --> B(Step2 指挥:AI Agent开发软件程序)
B --> C(Step3 等待:AI Agent的自主开发与最终交付)
C --> D{Step4 验证:软件成品及功能-是否符合预期、可用、易用；程序源码:是否规范、无偏差、无看不懂的代码段}
D -->|若判断结果:符合预期| E[Step5.1 结束:程序开发<br>（可能含:人工收尾工作）]
D -->|若判断结果:不符合预期| F(Step5.2 反馈:给AI Agent一一指出有问题、待修改的具体要求，并适时更新需求描述文档)
F -->|反馈、更新| A
E --> G(Step6 构建:程序的编译/构建/打包)
G --> H(Step7 发布:将已构建成果的软件制品发布到企业的制品仓库或外部的软件商店/软件仓库<br>（含:填写各商店/仓库的系列资料）)
H --> I(Over)
- 按照数据闭环、AI数据飞轮的理念，最终的沉淀物/交付物：
- 有形资产：文档资产、可用的软件制品
- 无形资产：开发者的经验
- 推荐文献
Step1 撰写:需求描述文档
- README.md/需求描述文档 + 设计文档
因为这个插件复杂度不高，需求 + 设计就一份文档搞定了。
Step2 指挥:AI Agent基于需求文档和我的附加指令，开发软件程序
Step3 等待:AI Agent的自主开发与最终交付
Step4 验证:AI Agent的交付成果 | 软件成品及功能-是否符合预期、可用、易用；程序源码:是否规范、无偏差、无看不懂的代码段
- 以 Edge 扩展插件的验证为例
- 验证过程中，需要打开 Edge 浏览器扩展插件(
edge://extensions/)的开发者模式，然后选中目标插件所在文件夹即可加载。
Step5 决策下一步的走向
IF 符合预期 | Step5.1 结束:程序开发（可能含:人工收尾工作）
IF 不符预期 | Step5.2 反馈:给AI Agent一一指出有问题、待修改的具体要求，并适时更新需求描述文档
Step6 构建:程序的编译/构建/打包
Step7 发布:将已构建成果的软件制品发布到企业的制品仓库或外部的软件商店/软件仓库（含:填写各商店/仓库的系列资料） | 上架【Edge 扩展】为例
注册 Microsoft 开发者账号
- 在 Microsoft 伙伴中心(Partner) 注册账号
- 查看对外简介/Profile:
进入 Microsoft 扩展商店，发布扩展插件
- Microsoft 扩展商店
- 注册完成后，即可点击跳转到: Dashboard
/Home/Edge=>Create new extension/ 创建扩展插件
https://partner.microsoft.com/en-us/dashboard/microsoftedge/overview
- 并上传插件包(
.zip):
https://partner.microsoft.com/en-us/dashboard/microsoftedge/{Product ID}/packages
- 配置扩展插件: 【可获得性】
- 配置扩展插件:【插件属性】
- catagory = 生产力工具 （可自选）
- Website = https://xxx/ （可自填）
- 联系信息 = xxx@xxx.com （可自选）
- 成人内容 = 无(无需勾选) （可自选）
- 配置扩展插件:【隐私与数据】
- 配置扩展插件:【商店列表】
以配置【中文】的详情页为例:
支持的所有语言详情页，都配置完成后:
- 发布
发布时如果涉及账号/密码问题，需要单独提供出来，便于 Microsoft 的测试人员在审查时登录、使用
成功提交后，即等待 Microsoft 的审核人员审核通过。
Over/End
- 插件效果展示
Y 推荐文献
- Microsoft
- Automated Web Catalog | Browser Plugin
浙公网安备 33010602011771号