ARTICLE · 1274066

我做了个浏览器插件:22 个购物网站,右键就能试衣服

发布时间：2026-10-29 13:59:44 最近访问：2026-10-29 13:59:45

SIDE PROJECT · 独立开发2026.10

买之前，看不见自己穿

退了 4 件衣服

然后我写了个东西

一个右键 · 在自己身上看效果 · 不经过服务器

ai-tryon

浏览器扩展纯本地

📦 3 Parts + Conclusion

👉 滑动

PART 01

那种感觉

为什么想动手

PART 02

不是又一个 App

寄生式按钮

PART 03

能做什么

五个真实能力

PART ///

写在最后

怎么开始用

去年双十一，我退了 4 件衣服

不是尺码买错，是买之前根本看不见自己穿

这两年我一直在想同一件事：明明图片有了，模型也有了，为什么买衣服之前还是看不到自己穿上的样子。

缺的其实不是技术，是把这两样东西接起来的那一步。于是我自己写了一个，叫 ai-tryon。

PART

先说清楚那种感觉

WHY · 模特穿和我穿是两件事

模特 165 穿 S，我 172 得拿 L，可 L 的肩宽又是另一个数。直播间打的是顶光，家里的灯是黄的。页面写着「显瘦版型」，我不知道它对我这种肩窄胯宽的人算不算显瘦。

于是我有一套很笨的办法：截图、发给朋友、问「你觉得我穿这个行吗」。朋友隔着屏幕也说不好。最后还是下单，到货试穿，不行再退。

一年下来，运费险赔的钱够买两件衣服

这不是什么了不得的痛点。它只是每次买衣服都要重复一遍的小摩擦：多花十分钟，多一次退换，多一句「算了就这样吧」。

PART

我想要的不是又一个试衣 App

CONCEPT · 寄生，而不是搬家

市面上不缺试衣工具。缺的是「不用改变购物习惯」的那一个。

大多数方案的逻辑是：你来我的平台，上传照片，选衣服，看效果。问题是，我本来就在逛淘宝，为什么要跳出去？

所以这个插件只做一个动作：在你已经看中的那张商品图上，点右键，选用这张图试穿。

右键菜单里会多出这一项，和「图片另存为」「复制图片」那些系统项排在一起。选中它，剩下的交给侧边栏。

不用截图，不用复制链接，不用把图存来存去。左边还是你正在逛的页面，右边侧边栏里就是穿上身的效果。

— 左边还是淘宝，右边侧边栏里是试穿结果


以前	现在
截图发给朋友问	右键，等十几秒
在几个 App 之间来回切	不离开当前页面
买回来试，不行再退	下单前就知道大概什么样
两个颜色只能赌一个	两版都生成，摆一起比

PART

它具体能做到什么程度

FEATURES · 不是概念演示

现在能用的部分，是这五个：

22 个购物网站

淘宝、京东、拼多多、唯品会、小红书、抖音商城都内置好了，其他网站可以自己加。

一次试多件

人像 1 张加衣服 4 件，上衣、裤子、外套能一起穿上，合计最多 5 张图。

自动认上下装

按商品名判断这是上衣还是裤子，猜错了点一下标签就能改。

出图还带建议

会写一段穿搭建议，说版型合不合、颜色衬不衬、跟鞋子配不配。

三种界面语言

中文、维吾尔语、英文，维语是右到左排版，字体也单独做了适配。

我最常用的是买外套。看长度到哪、肩线落在哪，生成的图基本能判断。买裤子看裤型和鞋子搭不搭，也很准。

— 效果图，和两条自动写出来的穿搭建议

不适合的场景也说清楚：贴身内衣、真丝这种要看面料垂坠感的、讲究版型结构的西装，生成结果只能当参考。AI 猜得再准，也不如你摸一下面料。

PART

中间踩的坑，值得说两个

PITFALLS · 第一版只能跑一个站

第一版装上去，我以为做完了。后来数了一遍，22 个网站里真正能用的只有 1 个。

原因很蠢。判断「这一页是不是商品页」的函数里，我写了几个关键词：taobao、tmall、detail。URL 里没这几个词，插件就当这页和衣服无关，按钮都不出现。

我把「支持所有平台」理解成了「支持淘宝的所有页面」。真正该承认的是：我不知道用户会在哪个网站上买东西。

后来改成一份站点注册表，每个平台记域名、商品页规则、主图和标题的取法。填完 22 个才发现，每家的页面结构都不一样：有的主图藏在 data-src 里，有的写在背景样式里。

！第二个坑更贵 🕳

国内这些图片接口，看着都叫「OpenAI 兼容」，真接起来是六套写法。有的是同步返回，有的是先提交拿任务号再轮询查结果，任务成功的字段名三家还不一样。

这些还算体力活。真正难的是模型自己会变：新版本不认老版本上的某个参数，接口直接报错。我加了一层兜底，报错时把不认识的参数删掉，重试一次。

不是所有报错都是用户的错

还有一个至今记得的 bug：我在消息里用 type 表示衣类，而消息本身的信封也有 type。两个撞在一起，后一个把前一个覆盖，处理函数找不到，调用方又写了空 catch。

表现就是点了没反应，控制台干净得像什么都没发生。从那天起我立了条规矩：任何 catch 都不许空着。

PART

从只能跑淘宝，到现在

PROGRESS · 五个版本，两次重构


	第一版	现在
支持网站	1 个	22 个，可自定义
一次最多几张图	2 张	5 张
接口协议	1 套	6 套，13 个出图预设
界面语言	中文	中文、维语、英文
自动化测试	0 项	73 项

整个扩展 28 个文件、360 KB。砍掉过功能，也重构过两次。

中途给维吾尔语做适配时，界面上一个「上装／下装」的切换按钮坏了：它靠显示的文字反查位置，文字一翻译成维语就对不上。改成把真实值藏在数据属性里、只让显示层翻译，逻辑才和语言分开。

这件事让我明白一个道理，做多语言不是翻译文案，是把逻辑从界面里拆出来。

PART

有一件事我主动放弃了

TRADEOFF · 没有服务器

这个插件没有服务器。不是省事，也不是做不到。是我不想让图片经过任何第三方的机器。

代价很实在。人像照片和 API Key 只存在你自己的电脑里，Key 用 AES-GCM 加密，图片进浏览器的本地数据库，卸载扩展就全没了。但也意味着你得自己去模型平台注册、申请 Key、充值。这一步确实劝退人。

我做不了统一账号，做不了会员，出了问题也只能给你报错，不能替你兜。

把 Key 交给用户，等于把方便也让了出去

合规上也是同一条逻辑。据中央网信办等四部门官方发布的《人工智能生成合成内容标识办法》（2025 年 9 月 1 日施行），服务提供者要对生成的图片加标识、写元数据。这条义务落在提供服务的一方。插件只做客户端、直连你自己的 Key，就不在这个身份里。

第一次上传人像时会出现人脸信息单独同意，那是因为《个人信息保护法》要求敏感个人信息单独授权。同意记录在本地，随时能撤回。

PART

从源码到能用的扩展

BUILD · 克隆、构建、打包，三步

源码在 GitCode，仓库地址 gitcode.com/ezemeti/ai-tryon，文末「阅读原文」直接跳过去。不想自己编译的，发行版里挂了打包好的 zip，下载解压就能装。

克隆：想自己跑一遍，先把仓库拉下来：

...bash

git clone https://gitcode.com/ezemeti/ai-tryon.git

cd ai-tryon

扩展本身是原生 JS，没有 npm 依赖，不需要 npm install。构建脚本只做一件事：把运行必需的文件收进固定目录。

构建：

...bash

node scripts/build.js

产物在 dist/ai-tryon/。

目录名不带版本号，这是刻意的：Chrome 用目录路径算扩展 ID，路径一改，等于换了个新扩展，之前存的模型配置全丢。

打包：要分发给别人，再压成 zip：

...bash

python scripts/pack.py

产物在 dist/ai-tryon-0.5.0.zip，版本号从 manifest.json 自动读，改版本不用改脚本。

打包脚本里有两道自检：manifest.json 必须在 zip 根部，路径里不能出现反斜杠。第二条不是洁癖，PowerShell 5.1 的 Compress-Archive 会把分隔符写成反斜杠，Chrome 直接解析失败。所以这里用的是 Python 的 zipfile。

三步走完，打开 chrome://extensions，开启右上角的开发者模式，点「加载已解压的扩展程序」，选 dist/ai-tryon 这个目录。

别选 zip。Chrome 会把 zip 解压到临时目录再从那儿加载，service worker 经常注册失败，表现是装上了但按钮永远不出现。

环境门槛只有三个：Chrome 116 以上（manifest.json 里写死了这个值）、Node 18 以上、Python 3。

据 Chrome 官方文档，侧边栏（Side Panel）接口是 114 版本引入的，这里锁 116 是为了避开早期版本在 iframe 与 service worker 通信上的几个已知问题。

PART

配模型，和要花多少钱

COST · 插件不收钱，模型按张

打开设置页填自己的 Key。出图模型和建议模型可以共用一个 Key，填一次就够。

— 模型配置页：出图模型和建议模型各一条

不想花钱先试，就选魔搭社区的免费额度，填个访问令牌就能跑。

模型按张计费，插件本身不收钱。价格按各平台控制台 2026 年 10 月的口径：


模型	价格	适合
魔搭 Qwen-Image-2.1	免费额度	先跑通，不花钱
豆包 Seedream 5.0	约 ¥0.12 一张	快，日常首选
百炼 Qwen-Image 2.1	约 ¥0.25 一张	中文和汉字最准
百炼 Qwen-Image 3.0 Pro	约 ¥0.50 一张	多图参考最强