一款基于 Chrome Side Panel 的浏览器扩展，利用大语言模型（LLM）帮助用户在京东、淘宝等电商平台一键批量生成评价草稿，并支持自动填入文本、自动打星、可选一键发表。

起因：

大家平时网购肯定都有个烦恼：买的东西太多，待评价列表积了一层灰。虽然知道认真评价能拿京豆、淘金币，但挨个点开写评价真的太废键盘了。网上随便复制一段万能好评又显得很敷衍，有时候甚至文不对题。

既然现在大模型（LLM）这么火，连代码都能写，写个带图文的电商评价还不是手到擒来？

但如果只是把订单信息复制到 ChatGPT 里，再把生成的评价复制回淘宝/京东，这中间的“复制粘贴”步骤还是太繁琐了。作为一个懒得彻底的程序员，我决定一步到位：写个 Chrome 浏览器插件，把抓取订单、调用大模型生成文案、自动打星、自动填入表单的流程全给自动化了。

于是，就有了这个开源项目：AI 一键评价助手 (Review Draft Assistant)。

最终效果是怎样的？

项目做完后，日常评价流程变成了这样：

1. 打开京东或淘宝的待评价页面。
2. 呼出浏览器的侧边栏（Side Panel），插件会自动把当前页面的待评价商品抓取过来。
3. 勾选几个订单，选好想要的语气（比如“口语化”、“只夸物流”），点击“批量生成”。
4. 插件后台静默调用你配置的大模型（比如 DeepSeek、Kimi 等），几秒钟后返回不同字数（短/中/长）的评价草稿。
5. 点击“填入并发表”，插件会自动帮你把文案填进网页里的输入框，并顺手把所有评分项（商品、物流、服务）点满 5 颗星，最后自动提交。

全程不用敲一个字，强迫症看着待评价列表瞬间清空，极度舒适。

技术选型：现代化的 Chrome 插件开发

以前写 Chrome 插件，对着原生的 HTML/JS 配合乱七八糟的 DOM 操作，没有热更新，改一行代码就得去扩展管理页点一下刷新，体验极其折磨。

这次我直接上了现代化的前端开发套装：

• UI 框架：React 19 + TypeScript + Tailwind CSS
• 构建工具：Vite + @crxjs/vite-plugin
• 插件标准：Manifest V3

特别提一下 @crxjs/vite-plugin 这个库，简直是 Chrome 插件开发的救星。它完美桥接了 Vite 的 HMR（模块热替换），不管是改 Content Script 还是 Side Panel 的 UI，保存后浏览器里立刻就能看到效果，开发体验和写普通的单页应用（SPA）一模一样。

架构设计与踩坑日常

在这个项目的开发过程中，还是遇到了几个有意思的点，和大家分享一下。

1. 放弃 Popup，拥抱 Side Panel API

以前的插件大多喜欢用 Popup（点击扩展图标弹出的那个小窗口）。但 Popup 有个致命缺点：失去焦点就会销毁。你在生成评价的过程中，如果不小心点了一下网页的其他地方，弹窗关了，大模型的请求状态和生成的数据直接灰飞烟灭。

所以这次我果断使用了 Chrome 最新的 Side Panel API。侧边栏不仅空间大，更重要的是它的生命周期更长，你可以在侧边栏里边生成文案，边在主视口里逛网页，体验好太多了。

2. 优雅接入各家大模型（Provider 设计）

现在的模型厂商太多了，国内的 DeepSeek、智谱、通义千问、Kimi，国外的 OpenAI、Claude，还有 OpenRouter 这种聚合平台。为了让用户能随便白嫖各家的 API，我抽象了一个 ProviderAdapter 层。

export type ProviderAdapter = {
  defaultBaseUrl: string
  recommendedModels: string[]
  buildRequest: (config: ProviderConfig, prompt: string) => ProviderRequest
  parseText: (respJson: any) => string
}

所有的模型请求统一在 Background Service Worker 中发起，这样完美避开了直接在网页环境中发起 Fetch 请求常遇到的跨域（CORS）问题。

不管你用的是 OpenAI 的标准接口，还是 Claude 的特有格式，只要实现这个 Adapter 就能无缝接入。目前插件已经内置了 7 家主流厂商的适配。

3. DOM 注入与自动化操作

评价页面的自动化填表是在 Content Script 里完成的。由于京东和淘宝的页面结构完全不同，有些输入框是 textarea，有些嵌在复杂的 iframe 里，还有的绑定了 React/Vue 的合成事件。

单纯的 element.value = "xxx" 是没用的，前端框架根本察觉不到数据变了。必须得模拟真实的输入事件：

// 触发框架的底层 onChange 侦听器
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
nativeInputValueSetter.call(textArea, "生成的评价内容");

const event = new Event("input", { bubbles: true });
textArea.dispatchEvent(event);

配合模拟点击事件（Click）去点亮网页上的星星图标，终于实现了“一键发表”的丝滑体验。

最后

这个项目原本只是写来自己清待评价列表的，但越写觉得越有意思，就把 UI 优化了一下，并开源了出来。如果你手里也有各种大模型的 API Key 不知道怎么消耗，或者单纯想看看 Manifest V3 下如何用 React 优雅地开发复杂插件，欢迎来看看源码。

开源地址：
👉 https://github.com/xiexikang/review-draft-assistant

代码完全开源，如果觉得好用或者对你有启发，求个 Star ⭐️ ！也欢迎大家提 PR 支持更多电商平台。