我把浏览器插件开发做成了一个 Skill

AI 写出代码后，麻烦才刚开始

第一次让 AI 帮我做浏览器插件时，代码出来得很快。

真正费时间的是后面。

哪个文件夹才是能安装的版本？插件图标为什么点了没反应？自动检查已经通过，真实网页上怎么还是失效？改完界面以后，之前能用的设置为什么丢了？

等到准备发布，还要补图标、截图、权限说明和隐私材料。代码生成很快，产品交付仍然很慢。

对开发者来说，这些是熟悉的工程步骤。对没有编程经验的人来说，任何一步都可能让项目停在电脑里。

于是我把这些经验做成了一个 Agent Skill，叫 Browser Extension Launch，中文名是「浏览器插件一站式上线」。

Browser Extension Launch 已经开源，项目地址见文末〔1〕。

它的定位很直接。用户说需求，AI 推进到真实可用。

用户只需要走一条简单路径

使用这个 Skill，不需要先学 GitHub，也不用先选择开发框架。

可以直接告诉 AI。

使用 Browser Extension Launch，帮我做一个浏览器插件。 我经常需要回复客户，希望点一下就能找到并复制常用话术。 我不会编程，请先做一版给我自己用。

AI 会先把这句话整理成完整的产品使用过程。用户从哪里打开插件，第一次看到什么，按下按钮以后得到什么结果，第二次使用能不能找回之前的数据，出错以后怎样恢复，这些都会进入产品规格。

技术选择由 AI 处理。用户只负责体验和反馈。

反馈也不用翻译成技术语言。

• 界面反馈
  按钮太小了，提示文字看不懂。
• 行为反馈
  关掉浏览器以后，保存的内容还要在。
• 范围反馈
  这个网站不要自动处理，其他网站继续生效。

Skill 会沿着同一个项目继续工作。已经确认的选择、当前版本、验证结果和下一步都会保存在本机。下次只要说「继续这个文件夹里的插件」，AI 会先读取进度，不需要从头复述。

代码生成只是中间步骤

AI 开发工具很容易制造一种假完成。文件生成了，解释也很完整，真正放进浏览器却是另一回事。

Browser Extension Launch 把真实浏览器验收定为交付门槛。

插件需要从 Chrome 原生入口打开，走完核心操作，关闭后重新打开，再连续使用第二轮。涉及保存、复制、下载或网页修改时，还要检查最终结果。

这套验收会区分几种容易混淆的状态。

• 代码检查通过
  只能说明规则覆盖的静态问题没有出现。
• 本地真实可用
  当前版本已经在浏览器里完成核心操作。
• 材料准备完成
  安装包、截图、文案和权限说明已经齐全。
• 商店正式上线
  审核通过，其他用户可以从公开入口安装和使用。

生成 ZIP 不等于上线。如果环境缺少可加载插件的浏览器操作能力，任务会保持待验证状态。Skill 不会用静态检查替代真实使用，也不会因为用户没有报错就宣布完成。

这条规则有点较真，却能避免用户最后只拿到一份看不懂的源码。

同一个需求，用不用 Skill 有什么区别

为了看清 Browser Extension Launch 到底改变了什么，我用同一个需求分别跑了两次。两个会话使用的是同一个目标，差别只在于第二次显式调用了 Skill。

使用 Skill 前：更快拿到安装包

输入提示词是：

我需要你做一个浏览器插件， 这个插件是用来掘金跳转直达的。

这次任务先追问「掘金跳转直达」的具体含义。确认以后，约 5 分钟完成首版，交付零依赖 Manifest V3 扩展、ZIP、README、隐私说明和 7 项自动化测试。

使用 Skill 前：约 5 分钟完成代码、测试和 ZIP，但没有真实浏览器验收

这条路径很直接，优点是交付快，缺口是“测试通过”仍然停留在模拟和静态检查。最终回复直接写了「插件已完成」，但会话里没有安装扩展、点击原生入口和连续使用的证据。

使用 Skill 后：完成的定义更严格

输入提示词只多了一行：

使用 $browser-extension-launch。  我需要你做一个浏览器插件， 这个插件是用来掘金跳转直达的。

这次任务没有立刻堆文件，而是先确定产品闭环、权限边界和验收条件。随后使用 WXT 与 TypeScript 构建，补上可暂停和恢复的工具栏开关，并在编译失败和代码审查发现问题后进入修复与复验。

使用 Skill 后：约 15 分钟完成产品闭环、正式构建、审查与发布包检查

从任务记录看，约 15 分钟完成流程化交付。它增加了下面几道关：

• 产品闭环
  连续访问两条外链都能直达，并且可以暂停后恢复。
• 工程交付
  正式脚手架、类型检查、构建和可恢复的任务记录。
• 独立审查
  规范与需求两个维度分别检查，发现缺口后修复复验。
• 验收边界
  受控浏览器不可用时明确标记阻塞，没有把自动测试冒充真实安装结果。

所以这组对比的结论并不是「用了 Skill 就更快」。它让开发变慢了一些，却让“完成”有了更清楚的证据标准。

如果只想快速验证一个小想法，使用前的轻量路径已经能产出代码。准备把工具长期使用、交给别人安装或继续发布时，后者留下的规格、审查、状态和失败记录会更有价值。

三个开源插件，验证三类产品难题

为了确认这套流程能真正交付，我让三个独立的 Codex CLI 会话分别开发了一款 Chrome 插件。

它们测试的难点并不相同。

• 外链直达
  规则识别、安全边界和站点级开关。
• 网页取色
  连续交互、颜色转换和本地历史记录。
• 广告净化
  误伤保护、本站暂停和异常恢复。

三个项目都从根目录的 extension/ 安装到独立 Chrome 环境，完成真实操作、关闭重开和最终版本核对。源码、可加载成品、最终报告和开发会话都已经放进 GitHub。

外链直达

外链直达已经开源，项目地址见文末〔2〕。

在掘金、知乎和 CSDN 查资料时，文章里的站外链接经常先进入一个中转页，再点一次才能到目标网站。

这个插件要解决的就是这一步重复操作，但直达只处理已核实的链接。

下面的 GIF 来自隔离浏览器中的实际插件界面，开关状态会真实写入扩展存储。

总开关与分站开关都能独立控制，设置即时保存

它只处理已经核实的中转地址和参数。遇到未知参数、可疑目标、异常协议或循环跳转时，原来的中转页仍然保留。

最终验收覆盖掘金、知乎和 CSDN 的真实中转链接、动态出现的链接、关闭后恢复和弹窗重开。16 项行为检查通过。

网页取色

网页取色已经开源，项目地址见文末〔3〕。

做海报、写公众号或调整网页时，经常会看到一个喜欢的颜色。过去需要截图，再打开取色工具，把图片拖进去。

用户真正想要的很简单。网页取色可直接复制三种格式。

这段 GIF 完整记录了启动吸管、移动到红色色块和确认颜色的过程。

选中后同时给出 HEX、RGB 和 HSL，并写入近期颜色

插件打开后，鼠标旁边会出现放大预览。点击确认，界面同时给出 HEX、RGB 和 HSL。最近颜色保存在本机，重复取到的颜色会回到最前面。

最终版本还检查了页面滚动、125% 缩放、图片、渐变、取消操作、非法颜色输入、历史删除和扩展重载。网页截图不落盘，颜色记录留在本机。

这个案例验证了一件事。用户只说「取色并复制」，产品流程还要补上第二次怎样用、选错怎样退、历史怎样清。

广告净化

广告净化已经开源，项目地址见文末〔4〕。

「做一个去广告插件」听起来很明确，实际风险很高。判断过宽，正文、导航、登录框、验证码和付款提示都有可能消失。

因此，首版主动收紧范围。它使用 6 条自有的小规模广告网络规则，再对把握较高的广告区域做可撤销隐藏。广告净化不承诺全网无广告。它也不绕过付费墙、验证码和安全确认。

GIF 展示的是本站保护、暂停当前网站和恢复保护三个真实状态。

页面异常时可以只暂停当前网站，不必关闭整个插件

弹窗会显示当前页面隐藏了多少内容。网站表现异常时，可以只暂停本站。设置页还能查看允许清单，单独移除某个网站或全部清空。

验收时专门检查了正文、导航、登录、一次性验证码、CAPTCHA、支付、安全提醒、Cookie 选择和付费墙等保护对象。41 项自动检查通过。浏览器重开后，总开关和允许清单仍然保留。

这个案例补上了产品流程中很重要的一环。评价效果不能只看拦住多少，还要看有没有影响用户正在做的事。

先自己用，再决定是否发布

每个插件都不必立刻提交商店。

用户可以先停在本地可用版本，不需要购买域名，也不必提前注册 Chrome Web Store 开发者账号。等它真的解决问题，再告诉 AI「帮我准备公开发布」。

进入发布阶段后，Skill 会继续整理下面这些材料。

• 正式安装包
  检查文件结构、资源引用和版本号。
• 商店素材
  准备图标、真实截图和宣传图。
• 产品文案
  整理名称、简述、详细介绍和使用说明。
• 权限与隐私
  根据实际代码解释权限和数据处理方式。

登录、验证码、付款和身份声明仍然由用户本人在官方页面完成。商店审核结果由平台决定。Skill 不会承诺必然通过。

目前，Browser Extension Launch 和三个案例都已经开源。三个插件完成了本地成品、真实浏览器验收和代码审查，尚未提交 Chrome Web Store。

如何开始第一个项目

先打开文末〔1〕中的 Browser Extension Launch 仓库。熟悉 Git 的读者可以直接克隆到 Agent 的 Skills 目录；不熟悉 Git，也可以在 GitHub 页面下载 ZIP，再交给支持 Skills 的 AI 工具安装。

安装完成后，复制下面这段话。

使用 Browser Extension Launch，帮我做一个浏览器插件。 它需要解决：________。 我不会编程，请先做一版给我试用。

当前版本以 Chrome 和 Manifest V3 为基线。其他浏览器需要另外适配，真实验收也需要 Agent 环境具备可加载插件的浏览器操作能力。

一句需求就能开始。我每天在网页上重复做一件事，想把它变成一个按钮。

项目地址

完整源码、安装说明和开发记录都保存在下面四个仓库中。

〔1〕Browser Extension Launchhttps://github.com/xiehuan123/browser-extension-launch

〔2〕外链直达https://github.com/xiehuan123/direct-link

〔3〕网页取色https://github.com/xiehuan123/page-color-picker

〔4〕广告净化https://github.com/xiehuan123/quiet-web