【教程】给 PinK 写自定义插件,用模型标价当例子

PinK 的插件就是 VS Code 扩展。这份教程用一个能跑的例子说明两件事:普通插件怎么装进 PinK,以及菜单这种扩展 API 碰不到的界面,要怎么安全地补上一小段脚本。

例子会在模型名后面标出每百万 tokens 的输入 / 输出价格。输出价不超过 $2 是绿色,中间价是灰色,$10 及以上是黄色。完整源码在文末的压缩包里。

插件放哪

在用户目录建这个文件夹,名字必须带版本号:

%USERPROFILE%\.pink\extensions\local.pink-model-price-0.1.0\

里面至少有 package.json 和 extension.js。PinK 启动时会扫描 .pink\extensions,不要手改旁边的 extensions.json。

改完要重新打开 PinK。只点右上角的叉不一定退出,任务栏里还有图标时,旧界面还在。

两种做法

命令、设置、webview,用 vscode API 就够了,不要去改安装目录。

模型菜单没有对外的装饰 API。这个 demo 的做法是:扩展启动时确认自己跑在 PinK 里,再往 workbench 页面加一个脚本。脚本只在菜单打开时,给模型名后面插一个价格标签。

不要改错软件

先读 resources/app/product.json。nameShort 或 applicationName 不是 PinK 就停。这套补丁只允许打在 PinK 上。

要改的文件:

  • resources/app/out/vs/code/electron-browser/workbench/workbench.html
  • 同目录下放 pink-model-price.js
  • 校验项在 product.json 的 checksums 里,键名是 vs/code/electron-browser/workbench/workbench.html

路径是 electron-browser,不是 electron-sandbox。

HTML 里这样挂脚本。CSP 只允许 'self',内联脚本不会跑:

<script src="./workbench.js" type="module"></script>
<!-- pink-model-price -->
<script src="./pink-model-price.js"></script>

第一次改之前,把原来的 workbench.html 另存一份。用注释当标记,避免每次启动都插一遍。

改完 HTML 要重算校验,不然 PinK 会提示安装损坏:对文件做 SHA-256,再转成标准 base64,去掉末尾的 =,写回上面那个键。不要把整个 product.json 重新排版。

PinK 更新会盖掉 workbench.html。所以扩展每次启动都检查标记还在不在,不在就再打一次,并提示重新加载。

移除命令做相反的事:用备份还原 HTML,删掉注入的 js,再按还原后的文件重算校验。

菜单上的名字在哪

模型菜单是编辑器自带的 action 列表。

  • 打开菜单后,搜索框有 class chat-model-picker-filter-input。它所在的 .action-widget 就是这张菜单。
  • 每一行的名字在 .action > span.title,例如 Deepseek-V4.1-Flash。
  • 输入框上当前选中的模型是 span.chat-input-picker-label。Agent、Max 也用这个 class,对不上价格表就不要标。

列表刷新时会重写 span.title 的文本。价格标签要放在标题后面,作为兄弟节点,不要放进标题里面。列表会复用行,所以每次都按当前标题更新或删掉标签。

用 MutationObserver 听页面变化,再加一个不到一秒的轮询,避免只改文字时漏掉。

匹配时去掉大小写和符号再整段比较。GLM-5.3 和 GLM-5.3-Flash 是两个价格,不能用前缀去撞。

这个 demo 的价格

单位是美元 / 百万 tokens,显示成「入 $0.30 出 $1.20」。

  • Deepseek-V4.1-Flash:入 $0.30,出 $1.20
  • Deepseek-V4-Pro:入 $1.32,出 $3.96
  • Doubao-Seed-Evolving:入 $0.90,出 $4.48(火山引擎 ¥6 / ¥30 按汇率折算)
  • GLM-5.3:入 $1.40,出 $4.40
  • GLM-5.3-Flash:入 $0.15,出 $0.50
  • Kimi-K3:入 $3,出 $15
  • Qwen3.8-Flash:入 $0.15,出 $0.47
  • Qwen3.8-Max:入 $2,出 $6

DeepSeek V4.1 Flash、GLM、Kimi 用的是公开标价。DeepSeek V4 Pro、Doubao、Qwen 目前没有写进同一份价目表,用的是厂商 API 标价。改价编辑扩展里的 media/catalog.json,再运行「重新应用价格标签」。

自己写的时候

  1. 能用 vscode API 解决的,就停在扩展里。
  2. 必须改界面时,只注入一个同目录脚本,留备份、留移除命令、更新校验。
  3. 用 product.json 确认目标是 PinK。
  4. 选择器写窄一点,只动模型菜单,别去改命令面板里别的 action 列表。

Demo 压缩包

解压后把 local.pink-model-price-0.1.0 整个文件夹放到 %USERPROFILE%\.pink\extensions\ 里,重新打开 PinK。

pink-model-price-0.1.0.zip

2赞

跟上一条。价格标签那条是菜单够不到扩展 API,才改了 workbench。波形不用,普通自定义编辑器就行。

PinK 打开 mp3、wav、ogg、flac、m4a 时,默认只当二进制。这个 demo 用 custom editor 接过来:点开就是波形,能播放,点波形或拖动可以定位。

安装

把压缩包解开,整个文件夹放到:

%USERPROFILE%\.pink\extensions\local.pink-audio-preview-0.1.0\

重新打开 PinK。以前用文本打开过的文件,标签右键「重新打开方式」,选「音频波形」。

空格播放或暂停。左右方向键跳 5 秒,按住 Shift 跳 1 秒。

怎么接上

package.json 里声明 customEditors,priority 用 default。点开这些后缀就会进波形,不用改安装目录。

后缀:mp3、wav、ogg、flac、m4a、aac、opus、aiff、caf。

扩展里 registerCustomEditorProvider。webview 用 AudioContext.decodeAudioData 解出采样,按宽度分成很多列,每列取最小和最大,画成一条波形。播放用 audio 元素,播放头跟着 currentTime。

源码都在压缩包里:extension.js、media/preview.js、media/peaks.js、media/preview.css。直接拿去改就行。

源码

pink-audio-preview-0.1.0.zip

2赞

好教程,方便

没有图的教程不习惯 :grinning:

希望可以接力起来

不习惯就对了 放开手, 让agent来学