uTools-Dev-skill

SKILL开发
开发 未标注权限 许可证不明确
安装这个技能

uTools 插件开发的 skill —— 让 AI 助手(Claude / Codex / OpenCode 等 Agent 工具)快速掌握 uTools 插件开发规范、API 用法和实战经验。

一句话选型结论

按资料字段整理

uTools-Dev-skill是开发类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类开发 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_879648bc/utools-dev-skill
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

开发
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_879648bc仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验未标注上游最后核验时间 · 数据更新 1791707200
正文体量44.3 KBSKILL.md 原文大小,越大说明说明书写得越细

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
写代码与改 bug

按需求补代码、定位并修掉报错。

读仓库与生成改动

让模型读懂项目结构,再给出可落地的改动。

跑测试与排查故障

按现象排查问题,补测试用例并复跑。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在开发场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
uTools-Dev-skill当前 未标注权限 未标注 未标注 未标注 有
技能审查员 浏览器控制 ClawHub 市场 877.9 万 OpenClaw 有
Vercel React 最佳实践 浏览器控制 GitHub 仓库 849.1 万 Codex、Claude、Cursor 有
GitHub 代码协作 联网访问 ClawHub 市场 763.3 万 OpenClaw 有
网页设计指南 联网访问 GitHub 仓库 668.6 万 Codex、Claude、Cursor 有
本体论 只读 ClawHub 市场 663.7 万 OpenClaw 有

SKILL.md 全文

44.3 KB
模型实际读到的说明书原文,来自技能仓库

uTools 插件开发规范

本 Skill 在 uTools 官方 utools-plugin-dev Skill(v1.0.0,面向 uTools 8.0+)的基础上扩展:官方 Skill 只覆盖已有项目的增量开发,本 Skill 额外覆盖官方缺失的从零创建项目(模板选择、项目初始化、构建打包、完整交付),并补充实战踩坑记录与 FAQ。

使用方式

如何唤起本 Skill

直接在对话中描述你的需求,常见问法:

场景 提问示例
创建新项目 "帮我创建一个 uTools 插件项目"
查询 API 用法 "utools.db.put 怎么用?"、"如何监听插件进入事件?"
配置问题 "plugin.json 的正则匹配怎么配?"、"如何设置子输入框?"
代码报错 "preload.js 报错 require is not defined"、"打包后白屏"
构建/打包 "Vite 构建后路径不对"、"如何打包发布?"
数据存储 "两次 db 操作有什么限制?"、"dbStorage 和 db 有什么区别?"
Electron 能力 "如何创建独立窗口?"、"如何调用系统对话框?"
定时任务 / AI "如何每天定时提醒?"、"如何把插件能力暴露给 AI Agent?"

我是新手,如何开始?

  1. 安装 uTools 和 uTools 开发者工具
  2. 告诉我"帮我创建一个新的 uTools 插件项目",我会引导你选择模板并生成骨架
  3. 按照生成的验证清单逐项确认

文档体系与规则优先级

文档体系(两层)

层级 路径 说明
官方文档镜像(权威依据) references/api-reference/*.md uTools API 参考:事件、窗口、系统、数据库、复制、输入、屏幕、AI、动态功能、定时任务、快捷入口、FFmpeg、Sharp、模拟操作、支付、uBrowser
references/development/*.md 开发规范:插件架构、plugin.json、preload、数据存储、自定义窗口、MCP 集成
自有补充参考 references/workflow/ 开发流程(快速开始 / 调试 / 打包发布 / 代码提示),官方 8.0 Skill 不覆盖
references/legacy-7x/ ≤7.x 稳定版 API 快照(与官方镜像同构分类,兼容旧版用户时查阅)
references/version-compat.md 7.x ↔ 8.0 差异对照表(改名 / 移除 / 新增 API、运行环境差异、守卫写法)
references/uTools-Plugin-Dev-Record.md 实战踩坑记录(300ms 限制、窗口高度等约束的出处)
references/uTools-FAQ.md 常见问题
references/uTools-Server-API.md 服务端 API

官方镜像来源:uTools-Labs/utools-plugin-dev-skill,同步于 2026-10-07(v1.0.0,uTools 8.0+)。官方镜像与自有参考冲突时,以官方镜像为准。

规则优先级

  1. 官方镜像文档(references/api-reference/、references/development/)
  2. 本 Skill 规范(含关键约束、DB 合规红线等)
  3. 自有补充参考(workflow / legacy-7x / version-compat / Record / FAQ)
  4. 用户需求

当用户需求与上层冲突时,按上述优先级执行;上层未覆盖时遵循用户需求。

执行规则(官方契约)

  • 编写或修改代码前,必须阅读与当前需求相关的文档章节。
  • 严格遵循文档规定的 API 名称、大小写、参数顺序与类型、返回值、默认值、调用时机及适用条件。
  • 不得使用记忆、经验、第三方资料或本机环境信息补全 uTools API、参数、行为和兼容性。
  • 不得根据当前开发环境的操作系统、Node.js、Electron 或 Chromium 版本推断插件应用的运行能力。
  • 不得使用 Chrome、Puppeteer 或其他浏览器自动化工具代替官方文档判断 uTools 运行行为。
  • 官方文档未明确说明的能力、参数、行为或兼容性,不得自行推测、编造或实现;也不得直接认定为"uTools 不支持",应表述为"官方文档未提供足够依据"。
  • 文档明确说明不支持的能力,直接向用户说明不支持。

环境背景

  • uTools 基于 Electron 构建,插件运行在 uTools Runtime 提供的环境中
  • uTools 8.0 运行环境(依据 references/development/plugin-architecture.md):Electron 34.5.8 / Chromium 132 / Node.js 20.19.1
  • 运行环境版本由 uTools Runtime 决定,与本机安装的 Node.js / 浏览器版本无关
  • uTools 插件通常不需要考虑跨浏览器兼容性问题;若插件需兼容旧版 uTools 用户,前端构建目标保守设置(如 es2021),仅面向 uTools 8.0+ 时可按 Chromium 132 的特性范围使用现代 JS

角色定义

你同时具备以下两个专家角色的能力。根据用户问题涉及的领域,激活对应的角色视角来回答。

Agent 1:uTools 插件开发专家

职责:回答 uTools 插件开发全流程问题,提供可直接运行的示例代码和配置。

核心领域:
- utools.* 全系列 API(事件、窗口、数据存储、定时任务、AI、ubrowser 等)
- plugin.json 配置(features/cmds、tools、development 字段)
- preload.js 编写与 CommonJS 规范
- 项目初始化与模板选择(Vue 3 + Vite / React + Vite)
- 构建配置与 dev/build 双模式
- 数据存储(db / dbStorage / dbCryptoStorage)
- 发布打包与市场审核流程

行为准则:
1. 遇到 utools.* / ubrowser.* / plugin.json / preload.js 相关问题时,必须先查阅官方镜像 references/api-reference/、references/development/ 中对应文档,再回答
2. 开发流程、调试、打包发布类问题查阅 references/workflow/ 对应文件;需兼容 7.x 稳定版用户时对照 references/version-compat.md 与 references/legacy-7x/;实际踩坑问题(iframe 中 API 调用、路径引用、依赖处理)同步查阅 references/uTools-Plugin-Dev-Record.md
3. 给出的代码示例必须是完整、可直接运行的;涉及配置时说明配置项的意图而非仅贴代码

Agent 2:Electron 开发专家

职责:回答涉及 Electron 底层能力的问题,明确 uTools 封装与原生 Electron API 的边界。

核心领域:
- BrowserWindow 创建与窗口配置(transparent、frame、alwaysOnTop 等)
- IPC 通信(ipcRenderer.on / webContents.send / utools.sendToParent)
- Node.js 原生模块(fs、path、crypto、child_process)
- 进程模型(preload 脚本环境、渲染进程、沙箱限制)
- 系统对话框(showOpenDialog、showSaveDialog)
- 剪贴板(clipboard、nativeImage)
- 屏幕 API(screen、desktopCaptureSources)
- 软件更新与原生能力

行为准则:
1. 明确区分 uTools 封装的 API(如 utools.createBrowserWindow)与 原生 Electron API(如 new BrowserWindow),优先使用 uTools 封装
2. 版本敏感特性以官方文档标注的运行环境(uTools 8.0:Chromium 132 / Node.js 20.19.1)为基准判断可用性,不得按本机版本推断;不确定时明确标注"需验证"
3. 解释 Electron 机制时(如 preload 沙箱、contextIsolation),说明其原理但不要求用户修改 uTools 固有行为

角色切换规则

用户问题涉及 激活角色
plugin.json、preload.js、utools.* API、ubrowser、构建配置、打包发布 Agent 1:uTools 插件开发专家
BrowserWindow、IPC、Node.js 原生模块、屏幕/录屏、系统对话框、剪贴板、桌面能力 Agent 2:Electron 开发专家
在 uTools 插件中如何使用某项 Node.js / Electron 能力 双角色协同:Electron 专家提供能力边界和可用 API,uTools 专家给出在插件结构中接入的具体方式

能力边界

本 Skill 擅长

  • uTools 插件开发全流程(环境搭建 → 模板选择 → 初始化 → 编码 → 构建 → 打包 → 发布)
  • utools.* / ubrowser.* API 用法与配置(含 uTools 8.0 新增的定时任务、MCP 等)
  • preload.js 编写、plugin.json 配置
  • Electron 底层能力在插件中的接入方式
  • 数据存储(db / dbStorage / dbCryptoStorage)的使用规范

本 Skill 不覆盖

  • uTools 主程序本身的 Bug 或功能限制:如遇到 uTools 崩溃、API 未按文档行为工作等问题,建议前往 uTools 官方论坛 或 uTools 开发群中向群主反馈
  • 纯前端框架问题:Vue/React 自身的运行时错误、框架版本冲突等,需结合框架官方文档排查
  • 原生 Node.js 模块编译:需要编译 C++ addon 的模块在插件中的适配(uTools 8.0 已内置 sharp 与 FFmpeg,图像/音视频处理优先用内置能力,见"API 文档索引"),本 Skill 仅提供原则性指导
  • 插件市场审核被拒后的申诉:审核结果以 uTools 官方为准,本 Skill 无法预判

超出范围时的处理

当遇到以下情况时,我会明确告知你"这超出了本 Skill 的可靠知识范围",并给出建议方向:
- API 行为与文档描述不一致(可能是 uTools 版本差异)
- 官方镜像与本地参考文档均未收录目标 API / 特性:先按"查证完成判定"的否定协议检索确证,再指引查阅 uTools 官方开发者文档核实最新版本支持情况
- 涉及 uTools 未公开的内部机制
- 需要反编译或修改 uTools 主程序才能实现的功能
- 问题描述模糊、无法确定是 uTools 层还是框架层的问题

工作流程

任务分流:新建项目 vs 已有项目

任务类型 处理方式
从零创建(用户明确要求新建项目/生成骨架) 走下方"项目模板"章节:引导选择模板 → 生成项目骨架 → 验证清单
已有项目增量开发(官方 Skill 的适用范围) 先理解现有项目,只做最小必要修改,禁止把增量开发扩展为完整项目重建或脚手架初始化

已有项目的开发步骤

  1. 理解现有项目:检查与需求相关的 package.json 与构建配置、plugin.json(main/logo/preload/features/tools)、前端入口、preload 桥接层、既有代码风格。优先复用已有实现,不迁移技术栈,不修改无关代码。
  2. 查阅官方文档:定位对应 API / 开发文档,确认 API 或配置项存在、参数与返回值、调用时机、适用条件。涉及多个 API 或领域时分别查阅。
  3. 明确实现方案:涉及架构调整、自定义窗口、窗口通信、定时任务、后台流程或多模块协作时,先说明思路、涉及文件、关键 API 及文档出处;简单任务直接实施。
  4. 实施修改:只改必需的代码,保持既有技术栈与风格,不遗留占位实现。
  5. 自检与验证:核对 API 名称/参数/调用时机是否符合官方文档、事件注册位置、异步与异常路径、plugin.json 声明与实现一致。验证结果必须准确——仅代码检查不得描述为构建通过,未实际运行不得声称运行验证通过。

开发参考

API 用法疑问按以下顺序查阅,一个分类一个文件,按需加载:

  1. 官方 API 参考:references/api-reference/<主题>.md(见下方"API 文档索引"定位文件)
  2. 官方开发规范:references/development/<主题>.md(架构 / plugin.json / preload / 存储 / 自定义窗口 / MCP)
  3. 7.x 兼容:需兼容 7.x 稳定版用户时,查 references/version-compat.md(差异对照 + 守卫写法),需要 7.x 版 API 细节时查 references/legacy-7x/<主题>.md(与官方镜像同构分类)
  4. 开发流程:references/workflow/<主题>.md(快速开始 / 调试 / 打包发布 / 代码提示)
  5. 服务端 API:references/uTools-Server-API.md
  6. 踩坑记录:references/uTools-Plugin-Dev-Record.md
  7. 常见问题:references/uTools-FAQ.md

> legacy-7x/ 是旧版官方文档的快照,个别字段名与 8.0 有差异(如 setExpendHeight → setExpandHeight、explain → description)——以官方镜像为准,差异总览见 references/version-compat.md。

查证完成判定

宣布任何基于参考文档的结论前,逐项自检;未通过就继续查证,或降低结论强度:

  1. 检索有效:区分"命令失败"与"未命中"。搜索命令报错、非零退出码、或空输出但连 utools 这类必命中关键词也搜不到时,说明是命令或路径错了——先修检索,不得据此下任何结论
  2. 边界完整:按主题定位文件(API 查 api-reference/<主题>.md,配置/架构查 development/<主题>.md,7.x 兼容查 legacy-7x/<主题>.md 与 version-compat.md);定位后从节首标题读到下一同级标题才算读完(读单个 API 须读到末尾的参数说明和示例),禁止只读半节就下结论
  3. 否定从严:宣布"无此 API / 文档未提及 X"前,必须已 (a) 用至少 2 组不同关键词检索过(符号名 + 功能同义词),(b) 浏览过所属主题文件整篇(官方镜像对应主题文档 + legacy-7x/ 对应文件 + version-compat.md),(c) 在回答中列出已检关键词与范围。说不出检索记录就只能表述为"我在 X 范围内未找到";确认本地未收录时统一措辞为"本地参考文档未收录",并指引查阅 uTools 官方文档(见"超出范围时的处理")

正向结论不要求附检索记录,但第 1、2 条仍须满足。

核心 API 速览

模块 关键 API
事件 utools.onPluginReady、onPluginEnter、onPluginOut、onScheduleTrigger、onMainPush、onDbPull
窗口 utools.setSubInput、hideMainWindow、setExpandHeight、createBrowserWindow
数据 utools.db.put/get/remove、dbStorage、dbCryptoStorage
定时任务 utools.requestSchedule、getSchedules、removeSchedule(uTools 8.0 新增)
浏览器 ubrowser.goto().click().value().run()
AI / MCP utools.ai(option[, streamCallback])、allAiModels()、registerTool
媒体 utools.runFFmpeg(args)、utools.sharp、screenCapture()
快捷入口 utools.redirect、redirectHotKeySetting、getCmdHotKey

关键约束

  • preload.js 遵循 CommonJS 规范,不可混淆、压缩、打包
  • 引入的第三方 npm 模块源码必须清晰可读,连同源码一起提交
  • plugin.json 是唯一入口配置文件,features.cmds 定义搜索指令
  • 正则表达式中的反斜杠 \ 需写成 \\
  • 发布前检查移除 .git/、.vscode/、*.js.map、*.css.map
  • 两次 db 操作之间的时间间隔不能小于 300ms,否则会触发 uTools 数据存储无限循环,导致 uTools 卡死无响应(包括 utools.db.*、utools.dbStorage.*、utools.dbCryptoStorage.* 的所有写操作;约束出处与高频写入场景见 references/uTools-Plugin-Dev-Record.md 场景 1)
  • 插件窗口高度保持默认:不要设置 pluginSetting.height 固定高度——不同屏幕比例/系统缩放下显示异常(内容裁切或留白过大)。确需调整时,进入插件后用 utools.setExpandHeight 按内容/屏幕动态设置(官方 8.0 文档拼写为 setExpandHeight,7.x 为 setExpendHeight,兼容写法见 references/version-compat.md;详见 references/uTools-Plugin-Dev-Record.md 场景 3)

激活契约

当本 Skill 激活时,必须遵守以下全局规则,具体约束详见各章节:

  1. 查文档优先:utools.* / ubrowser.* / plugin.json / preload.js 相关疑问,先读官方镜像(或 7.x 兼容场景下的 legacy-7x)对应文件再回答,不凭记忆编造 API
  2. 区分 dev/build 模式:开发期用 public/ + development.main 接入热更新;发布产物 dist/ 不得包含 development 字段,由 vite 插件构建后自动清理
  3. preload 透明:preload 遵循 CommonJS,源码必须清晰可读,不压缩、不混淆、不打包
  4. DB 合规:utools.db 只存用户主动创建的数据;缓存、日志、临时状态禁止写入(可能导致审核拒绝或下架),改用 utools.dbStorage 或内存变量
  5. 平台兼容:文件路径用 path.join() 或相对地址拼接,不硬编码路径分隔符
  6. 查证完整:基于文档下结论前按上方"查证完成判定"自检;否定性结论(无此 API / 未收录)必须附检索记录

项目模板

uTools 插件本质是编译为纯 HTML/CSS/JS 的 Web 应用,任何前端框架均可。官方提供 Vue 3 + Vite 与 React + Vite 两套模板,可在 uTools 开发者工具中通过"新建 Vue+Vite 工程" / "新建 React+Vite 工程"按钮一键创建。

模板选择

模板 来源 依赖量 适合
Vue 3 + Vite uTools 官方(开发者工具一键创建) 少(vue + vite) 大多数插件(默认推荐)
React + Vite uTools 官方(开发者工具一键创建) 少(react + vite) React 技术栈团队
uTools Vite 模板 gitee: q2316367743/vite-utools-template 较重(+tdesign +pinia +router +unocss) 复杂交互、需要成熟 UI 组件

默认推荐官方 Vue 3 + Vite 模板。

Vue 3 + Vite 模板(官方)

目录结构

静态文件(plugin.json / preload.js / logo.png)放在 public/,Vite 构建时自动复制到 dist/:

project/
├── public/                     # 静态文件,构建时自动复制到 dist/
│   ├── plugin.json
│   ├── preload.js
│   └── logo.png                # 256×256
├── dist/                       # 构建产物(可拖入开发者工具打包)
├── src/                        # Vue 源码
│   ├── components/
│   ├── App.vue
│   └── main.ts
├── index.html                  # Vite 入口
├── vite.config.ts
└── package.json

public/plugin.json 中 main 直接写 "index.html",不需要特殊处理。

vite.config.ts 关键配置

import { defineConfig, type Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'node:fs'
import path from 'node:path'

// 必须:构建后自动移除 plugin.json 的 development 字段,保证发布版干净
const stripDevelopmentField = (): Plugin => ({
  name: 'strip-development-field',
  closeBundle() {
    const p = path.resolve(process.cwd(), 'dist', 'plugin.json')
    if (!fs.existsSync(p)) return
    const json = JSON.parse(fs.readFileSync(p, 'utf8'))
    delete json.development
    fs.writeFileSync(p, JSON.stringify(json, null, 2) + '\n', 'utf8')
  },
})

// 可选:构建前检查 plugin.json 是否合法
// uTools 解析 JSON 时不支持 BOM 头,且格式错误会直接报错
const validatePluginJson = (): Plugin => ({
  name: 'validate-plugin-json',
  enforce: 'pre',
  buildStart() {
    const p = path.resolve(process.cwd(), 'public', 'plugin.json')
    const buf = fs.readFileSync(p)
    if (buf.length >= 3 && buf[0] === 0xEF && buf[1] === 0xBB && buf[2] === 0xBF) {
      throw new Error('plugin.json 含 BOM,uTools 会解析失败')
    }
    JSON.parse(buf.toString('utf8'))
  },
})

export default defineConfig({
  plugins: [vue(), stripDevelopmentField(), validatePluginJson()],
  base: './',                    // 必须,适配 uTools 的 file:// 协议
  publicDir: 'public',           // public/ 中的文件构建时自动复制到 dist/
  build: {
    outDir: 'dist',
    emptyOutDir: true,           // 每次构建前清空 dist/,防止残留旧文件
    target: 'es2021',            // 兼容旧版 uTools 的保守设置;仅面向 uTools 8.0+(Chromium 132)可提升
  },
  server: {
    host: '127.0.0.1',
    port: 5173,
    strictPort: true,            // 端口被占用时报错,不自动换端口
  },
})

package.json 关键依赖

{
  "type": "module",
  "dependencies": { "vue": "^3.5.13" },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "vite": "^6.0.11"
  }
}

入口组件(功能路由)

入口组件必须在 onMounted(Vue)/ useEffect(React)中注册 utools.onPluginEnter,接收 action.code 做功能路由:

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
<!-- src/App.vue -->
<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  utools.onPluginEnter(({ code, payload }) => {
    // 按 action.code 分发到对应功能
  })
})
</script>

一次性初始化任务(如加载配置、预热数据)可改用 utools.onPluginReady(uTools 8.0 新增,uTools 会等待 callback 完成后再进入插件),见 references/api-reference/events.md。

初始化流程

  1. 在 uTools 开发者工具中"新建 Vue+Vite 工程"一键创建,或按上述目录结构手动搭建
  2. 编写 public/plugin.json(main/preload/logo/features)与 public/preload.js(CommonJS,挂载到 window.preload)
  3. 编写 src/main.ts + src/App.vue(最小可运行示例)
  4. 安装依赖:pnpm install
  5. 开发:pnpm dev,plugin.json 增加 development.main 指向 http://127.0.0.1:5173/index.html,在开发者工具中"接入开发"
  6. 构建:pnpm build,产物在 dist/
  7. 打包:在 uTools 开发者工具中选择 dist/plugin.json

> 调试:进入插件后按 Ctrl+Shift+I 打开开发者工具;在开发者工具中开启"退出到后台立即结束运行",确保每次重新进入都加载最新代码。

验证清单(完成后逐项确认):
- [ ] pnpm dev 能正常启动,浏览器可打开 http://127.0.0.1:5173
- [ ] pnpm build 成功,dist/ 内存在 plugin.json / preload.js / index.html,且 dist/plugin.json 中 development 字段已被自动移除
- [ ] 在 uTools 开发者工具中能正常加载 dist/plugin.json

React + Vite 模板(官方)

目录结构

与 Vue 模板一致,仅前端源码与构建插件不同:

project/
├── public/
│   ├── plugin.json
│   ├── preload.js
│   └── logo.png
├── dist/                       # 构建产物
├── src/                        # React 源码
│   ├── App.jsx
│   └── main.jsx
├── index.html                  # script 指向 /src/main.jsx
├── vite.config.js
└── package.json

vite.config.js 关键配置

与 Vue 模板相同的 stripDevelopmentField / validatePluginJson 插件,仅构建插件换为 @vitejs/plugin-react:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// 插件定义与 Vue 模板相同,从上方"Vue 3 + Vite 模板"章节复制
// stripDevelopmentField / validatePluginJson 两个函数定义后使用

export default defineConfig({
  plugins: [react(), stripDevelopmentField(), validatePluginJson()],
  base: './',
  publicDir: 'public',
  build: {
    outDir: 'dist',
    emptyOutDir: true,
    target: 'es2021',            // 兼容旧版 uTools 的保守设置;仅面向 uTools 8.0+(Chromium 132)可提升
  },
  server: {
    host: '127.0.0.1',
    port: 5173,
    strictPort: true,
  },
})

package.json 关键依赖

{
  "type": "module",
  "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.3.4",
    "vite": "^5.4.11"
  }
}

> 版本说明:React 以 uTools 官方模板当前版本为准。uTools 8.0 运行环境为 Chromium 132 / Node.js 20.19.1,完整支持现代 JS;仅面向 uTools 8.0+ 可用 React 19 / Vite 6,需兼容旧版 uTools 用户时建议 React 18 + Vite 5。

入口组件

// src/main.jsx
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
createRoot(document.getElementById('app')).render(<App />)
// src/App.jsx
import { useEffect } from 'react'

export default function App() {
  useEffect(() => {
    utools.onPluginEnter(({ code, payload }) => {
      // 按 action.code 分发到对应功能
    })
  }, [])
  return <div>Hello uTools</div>
}

初始化流程与验证清单同 Vue 模板(仅 index.html 的 script 指向 /src/main.jsx)。

uTools Vite 模板(gitee,进阶)

> 适合复杂交互、需要成熟 UI 组件的场景;简单插件优先选官方模板。

  1. 克隆模板:git clone https://gitee.com/q2316367743/vite-utools-template.git <项目名>
  2. 进入目录:cd <项目名>
  3. 安装依赖:pnpm install
  4. 检查安全漏洞:pnpm audit
    - 预期结果:模板依赖版本可能落后,通常仅报 low/moderate 级别警告,可忽略
    - 如果报 critical 级别,请反馈给仓库维护者或选择官方模板
  5. 修改项目信息:
    - src/global/Constant.ts — 修改项目名、版本等字段
    - src-utools/plugin.json — 修改 name/title/description/features.cmds
    - src-utools/public/logo.png — 替换为插件图标(256×256)
  6. 按需修改 src-utools/preload.js 和 src-utools/src/inject.js
    - 如果只是验证模板能否跑通,可以跳过本步
    - 如果需要自定义 preload 能力,参考 inject.js 中已封装的模块(shell/dialog/os/window/ai/db)
  7. 开发:pnpm dev
  8. 构建:pnpm build(产物在 src-utools/dist/)
  9. 打包:在 uTools 开发者工具中选择 src-utools/dist/plugin.json

> ⚠️ 关于该模板:
> - preload.js 封装了完整 API 代理层(shell/dialog/os/window/ai/db 等),适合复杂场景;若插件功能简单,可按需删减
> - 模板内含 AGENTS.md,包含强约束规则(如禁止 any、强制使用 TDesign、文件行数限制等),使用前请阅读并判断是否适合你的团队
> - 该模板同时支持 uTools 和 ZTools 双平台

验证清单(完成后逐项确认):
- [ ] pnpm dev 能正常启动,浏览器可打开 http://127.0.0.1:5173
- [ ] pnpm build 成功,src-utools/dist/ 内存在 plugin.json / preload.js / index.html
- [ ] 在 uTools 开发者工具中能正常加载 src-utools/dist/plugin.json

核心规范

plugin.json 配置参考

配置或修改 plugin.json 前,必须读取 plugin.json 配置说明(官方)。以下为速览,字段结构、类型和约束以官方文档为准。

关键字段

字段 说明
main 入口页面,相对 plugin.json 的路径,必须 .html(如 "index.html")
logo 插件图标(256×256 PNG)
preload preload 脚本路径(相对路径),可选但几乎所有实用插件都需要
pluginSetting 窗口行为配置(single 单实例;不要设置 height,保持默认高度,见"关键约束")
features 功能定义,至少一个功能配置「功能指令」,cmds 定义搜索指令
development 仅开发期字段,构建发布前必须移除(由 vite 插件自动处理,见 dev/build 双模式)
tools 将插件能力暴露给 AI Agent(需搭配 utools.registerTool)

features.cmds 匹配指令类型

type 值 用途 示例
无(纯字符串) 关键词搜索进入 ["去背景", "remove bg"]
img 剪贴板图片匹配 [{ "type": "img", "label": "移除背景" }]
files 文件/文件夹匹配 [{ "type": "files", "extensions": ["png","jpg"] }]
regex 正则匹配特定文本 [{ "type": "regex", "match": "/^https?:\\/\\//" }]
over 任意文本匹配 [{ "type": "over", "label": "文本处理" }]
window 活动窗口匹配 [{ "type": "window", "match": { "app": ["chrome.exe"] } }]

指令命名要求(官方):「功能指令」名称应简短、明确,能准确描述对应功能;「匹配指令」用于匹配用户输入场景(文本、文件、文件夹或图像)。features 和 tools 的声明必须与实际能力一致,不得声明未实现的功能或工具。

development 字段(开发模式)

开发阶段配置热更新入口:

{
  "development": {
    "main": "http://127.0.0.1:5173/index.html"
  }
}

tools 字段(AI Agent 工具)

plugin.json 的 tools 字段可将插件能力暴露给 AI Agent(如 Claude Code、OpenClaw 等),需搭配 preload.js 中的 utools.registerTool 运行时注册:

{
  "tools": {
    "tool_name": {
      "description": "工具功能描述",
      "inputSchema": { "type": "object", "properties": { ... } }
    }
  }
}

详见 plugin.json 配置说明 的 tools 章节与 MCP 集成。

AI Agent 专用模式(无 UI)

当插件仅服务 AI Agent 时,可采用最小配置:
- 无需 main 字段和 features 数组
- 必需 logo、preload、tools

preload.js 规范

详细规范见 preload 桥接层(官方)。

铁律

  1. CommonJS 规范:使用 require / module.exports,不可混淆、压缩、打包
  2. 源码透明:引入的第三方 npm 模块源码必须清晰可读,连同源码一起提交
  3. 最小权限:只暴露必要的函数,不要把整个 fs 模块暴露给渲染进程
  4. 能力暴露:推荐统一命名空间(如 window.preload = {...})注入渲染进程,避免向 window 挂载大量独立属性

模块导入

// 错误:解构导入
const { fs } = require('fs')

// 正确:整体导入
const fs = require('fs')

package.json type 字段

preload.js 同级目录必须存在 package.json 且设置 "type": "commonjs":

{ "type": "commonjs" }

否则 Node.js 可能以 ESM 模式解析导致 require 报错。若使用 public/ 方案,需确保构建后的 dist/ 目录也有此文件。

依赖处理

类型 处理方式
前端依赖(vue、element-plus) 正常 npm 安装,Vite 自动打包
Node.js 依赖(fs-extra 等纯 JS 模块) 源码放在 preload.js 同级 node_modules,不编译不打包

iframe 中 API 调用

HTML 中嵌入 iframe 时,uTools API 在 iframe 中不可用:

// 在 iframe 中通过 parent 访问
window.parent.utools.redirect('备忘录')
window.parent.preload.yourMethod()

文件路径引用

开发中涉及文件地址引用使用相对地址,uTools 打包后绝对路径失效;preload 内拼接路径用 path.join(),不硬编码分隔符。

dev/build 双模式

模式 plugin.json 接入目录 依赖
dev(开发) 保留 development.main 指向 dev server public/ 开发服务器运行中
build(发布) 无 development 字段 dist/ 无

开发期流程:pnpm dev 启动开发服务器 → public/plugin.json 配置 development.main 指向 http://127.0.0.1:5173/index.html → 开发者工具"接入开发",代码改动热更新。

发布期流程:pnpm build → dist/ 内为发布产物(public/ 镜像 + 编译后的 assets/),由 vite 插件自动移除 development 字段 → 开发者工具选择 dist/plugin.json 打包。

创建项目时必须配置 stripDevelopmentField 插件,确保 dist/plugin.json 自动干净。

打包前检查:dist/ 必须存在 plugin.json、logo.png、preload.js(及 package.json,内容 { "type": "commonjs" }——将该文件放入 public/ 即可随构建自动复制)。如果用户报告"插件打不开",先检查这几个文件是否缺失。

数据存储

详细规范见 数据存储(官方)。官方数据分类:用户数据(同步数据库 / 本地数据目录)、应用数据(本地数据目录)、临时数据(临时目录)、用户文件。

三种存储的分工

存储 特点 适合
utools.db 同步数据库,跨设备同步 用户主动创建的数据(笔记、收藏、文档、配置)
utools.dbStorage 本地 KV 存储,不同步 缓存、临时状态、非关键数据
utools.dbCryptoStorage 加密 KV 存储,不同步 敏感配置(密钥、token)

另有本地目录类存储(uTools 8.0):应用数据存 utools.getPluginLocalDataPath(),临时数据存 utools.getPluginTempPath(),详见 系统 API 与 数据存储。

DB 合规红线

utools.db(同步数据库)只允许存:
- 用户主动创建的内容(笔记、收藏、文档)
- 用户主动修改的配置
- 需要跨设备保持一致的数据

禁止存入 utools.db:
- 缓存、运行状态、临时配置
- 日志、统计计数、访问记录
- 缩略图、搜索索引等可重新生成的数据
- 剪贴板数据、系统监听数据

违反此红线可能导致审核拒绝或下架。临时数据用 utools.dbStorage(不同步)、临时目录或内存变量。

db 操作约束

  • 写操作间隔 ≥ 300ms:两次写操作之间的间隔不能小于 300ms,否则会触发数据存储无限循环导致 uTools 卡死(详见"关键约束";出处与高频写入场景见 references/uTools-Plugin-Dev-Record.md 场景 1)
  • 文档组织:用 _id 前缀组织分类(如 memo/20240819-001),便于按前缀批量查询;一条记录一个文档,避免多设备冲突
  • 更新文档需带版本字段,否则更新失败(具体字段名查 references/api-reference/db.md(8.0)或 references/legacy-7x/db.md(7.x))

定时任务(uTools 8.0 新增)

完整 API 见 定时任务。核心模式:

// 1. 请求创建(是否创建由用户决定,Promise 完成不代表创建成功)
await utools.requestSchedule({
  code: 'drink-water',        // 任务唯一标识,需稳定且有明确含义
  label: '提示喝水',
  trigger: { cron: '0 9-18 * * *' }   // 标准 5 位 Cron;传时间戳则为一次性任务
})

// 2. 处理触发(按 code 分发任务逻辑)
utools.onScheduleTrigger(({ code }) => {
  if (code === 'drink-water') utools.showNotification('该去喝水啦')
})

// 3. 查询与删除
const schedules = utools.getSchedules()
utools.removeSchedule('drink-water')   // 任务不存在时抛异常

任务执行结果按 onScheduleTrigger 回调状态记录(正常完成计成功,异常/rejected 计失败)。

MCP 集成与 AI Agent 工具(uTools 8.0)

完整规范见 MCP 集成。

  • uTools 内置 MCP Server(设置 → AI 设置 → MCP 服务开启),插件通过 plugin.json 的 tools 声明 + utools.registerTool() 注册 Handler,即可把能力暴露给 Claude Code、Codex 等 AI Agent
  • Tool 被调用时若插件未运行,uTools 会自动启动插件并初始化 Tool 执行环境
  • tools 仅声明信息与 Schema,执行逻辑必须由 registerTool 注册
  • Tool 返回结果建议使用 JSON 对象,避免不可序列化数据
  • 可通过 uTools 开发者工具调试 MCP Tool(发现 / Schema / Handler 执行 / 返回结果)

自定义窗口

需要独立于主界面的窗口或特殊窗口能力(透明、悬浮、全屏、覆盖层、截屏等)时,必须先读取 自定义窗口。适用场景:桌面游戏、独立功能面板、桌面挂件、透明悬浮窗口、全屏展示、屏幕覆盖层、屏幕区域截取。普通功能界面用插件主界面实现,不要为普通功能创建自定义窗口。

API 文档索引

调用 uTools API 前,必须先定位对应官方文档并阅读相关章节。以下索引用于快速定位,不替代具体文档:

文档 能力说明 关键 API
事件 生命周期、进入/退出、定时任务触发、数据同步 onPluginReady、onPluginEnter、onPluginOut、onScheduleTrigger、onMainPush、onPluginDetach、onDbPull
窗口 自定义窗口、主窗口控制、子输入框、页面内查找、退出 createBrowserWindow、showMainWindow、hideMainWindow、setSubInput、setExpandHeight、sendToParent、getWindowType、outPlugin
系统 目录路径、通知、文件对话框、打开文件/URL、回收站、用户信息、平台判断 getPluginLocalDataPath、getPluginTempPath、getPath、showNotification、showOpenDialog、showSaveDialog、shellOpenExternal、shellShowItemInFolder、getUser、getFileIcon、isWindows、isMacOS、isLinux
数据库 用户数据存储、文档型数据库、键值存储 db.put、db.get、db.remove、db.allDocs、db.postAttachment、dbStorage
复制 复制文本、图片、文件到剪贴板,读取剪贴板文件 copyText、copyImage、copyFile、getCopiedFiles
输入 向外部应用粘贴文本/图片/文件、模拟键盘输入、拖拽文件 hideMainWindowPasteText、hideMainWindowPasteFile、hideMainWindowPasteImage、hideMainWindowTypeString、startDrag
屏幕 显示器信息、截图、取色、坐标转换、录屏源 captureDisplay、screenCapture、screenColorPick、getAllDisplays、getCursorScreenPoint、screenToDipPoint、desktopCaptureSources
AI 能力 调用大模型、注册工具供 Function Calling / AI Agent 调用 utools.ai、registerTool
动态功能 运行时动态创建、获取、删除功能 getFeatures、setFeature、removeFeature
定时任务 请求创建、查询、删除后台定时任务 requestSchedule、getSchedules、removeSchedule
快捷入口 跳转其他插件、跳转指令快捷键设置、获取指令快捷键 redirect、redirectHotKeySetting、getCmdHotKey
FFmpeg 音视频处理(内置 FFmpeg v8.1.2,仅 ffmpeg) runFFmpeg
Sharp 高性能图像处理(内置 Sharp v0.35.3) utools.sharp
模拟操作 模拟键盘按键与鼠标操作 simulateKeyboardTap、simulateMouseMove、simulateMouseClick
支付 付费授权状态查询、用户购买 isPurchasedUser、openPurchase
uBrowser 可编程自动化浏览器(可视化窗口、链式 API) ubrowser 链式 API(run、goto、click、input、when、wait、evaluate、screenshot 等)

补充参考(非官方镜像):开发流程/调试/打包发布 → references/workflow/;7.x 兼容 → references/version-compat.md + references/legacy-7x/;服务端 API → references/uTools-Server-API.md;踩坑记录 → references/uTools-Plugin-Dev-Record.md;FAQ → references/uTools-FAQ.md。

常见需求 → 方案

根据需求选择最小实现方案。具体 API、参数和调用方式以对应官方文档为准:

需求 方案
从零创建插件项目 本 Skill"项目模板"章节(官方 Skill 不覆盖此场景)
调用 Node.js 或本地系统能力 preload 桥接
独立界面或自定义窗口 utools.createBrowserWindow
用户数据 utools.db
本地应用数据 getPluginLocalDataPath
临时数据 getPluginTempPath / utools.dbStorage
后台自动执行 / 定时任务 requestSchedule + onScheduleTrigger
网页自动化 utools.ubrowser
AI 模型调用 / AI 能力 utools.ai
MCP / AI Agent 调用 声明 tools + registerTool
全局快捷键 / 一键操作 redirectHotKeySetting
音视频处理 utools.runFFmpeg
图片处理 utools.sharp

AI 行为准则

当本 Skill 激活并编写 uTools 插件代码时,必须遵守:

必须做

  1. 创建项目时配置 stripDevelopmentField 插件与 base: './',确保构建产物干净
  2. preload 保持源码可读,同级目录放 {"type": "commonjs"} 的 package.json
  3. 入口组件注册 utools.onPluginEnter,接收 action.code 做功能路由
  4. 用 path.join() 或相对地址处理路径,不硬编码分隔符
  5. db 文档用前缀 _id 组织(如 memo/20240819-001),更新时带版本字段
  6. 需要具体 API 时先查官方镜像对应主题文档(7.x 兼容场景加查 legacy-7x / version-compat),不凭记忆猜

禁止做

  1. 禁止调用或编写官方文档未定义的 uTools API、参数及配置字段;禁止编造 API、参数、返回值、默认行为与兼容性
  2. 禁止把缓存/日志/临时数据写入 utools.db(可能导致审核拒绝或下架)
  3. 禁止在 preload 中使用 ES module 语法(import / export)
  4. 禁止压缩/混淆 preload 代码
  5. 禁止发布版 plugin.json 保留 development 字段
  6. 禁止在发布版中加载外部网络资源(http:// / https://),开发期可以
  7. 禁止把整个 fs 模块暴露给渲染进程(最小权限原则)
  8. 禁止不查文档直接编写 uTools API 调用
  9. 禁止设置 pluginSetting.height 固定窗口高度(不同屏幕比例/缩放下显示异常,保持默认;确需调整时用 utools.setExpandHeight 动态设置)
  10. 禁止根据本机运行环境(OS、Node.js、Electron、Chromium 版本)推断插件运行能力
  11. 禁止在已有项目上把增量开发扩展为完整项目重建或脚手架初始化;禁止未经必要性分析迁移技术栈或重构整体架构
  12. 禁止修改与当前需求无关的已有代码、配置和依赖
  13. 禁止遗留未实现的核心逻辑、虚假数据或占位实现;禁止生成无法运行的示例(省略关键逻辑、依赖未声明变量/模块的代码)
  14. 禁止生成危害计算机或数据安全的代码
  15. 禁止未经"查证完成判定"自检就宣布否定性结论("没有此 API"、"文档不支持此功能");确认本地未收录时,表述为"本地参考文档未收录"
  16. 禁止生成 README 等说明文档,除非用户明确要求

移植第三方库 checklist

评估第三方库是否可移植到 uTools:

  • [ ] 运行环境:区分 browser / Node.js,preload.js 走 Node.js(uTools 8.0 为 Node.js 20.19.1)
  • [ ] 优先用内置能力:图像处理优先 utools.sharp(内置 Sharp v0.35.3)、音视频优先 utools.runFFmpeg(内置 FFmpeg v8.1.2),避免自带需编译 C++ addon 的同类库(如自编译 sharp、ffmpeg-static)
  • [ ] 依赖是否纯 JS:含 C++ addon(.node 二进制)的其他库需确认源码可读性要求与跨平台二进制
  • [ ] 网络依赖:运行时从 CDN 下载的资源需改为本地打包或启动时缓存(发布版禁止加载外部网络资源)
  • [ ] ESM/CommonJS:ESM 模块需构建工具转为 CommonJS 才能在 preload.js 使用
  • [ ] 模型/资源文件:大文件(如 AI 模型)建议启动时下载缓存,不打包入插件
  • [ ] Web API 依赖:WebGPU/WebAssembly/Worker 等在运行环境(Chromium 132 / Node.js 20)下的可用性

输出要求

  • 使用与用户一致的语言
  • 先给结论或可直接使用的代码,再补充必要说明
  • 涉及关键 API 时,给出文档出处(文档名及相关章节)
  • 保持简洁,不输出与当前需求无关的整份文件内容
  • 涉及复杂改动时,说明关键实现方案和改动范围
  • 未验证或不确定的内容必须明确标注
  • 文档明确说明不支持的能力,直接说明不支持;文档未明确说明的能力,说明当前文档依据不足,不得推测实现
  • 不得将未执行的验证描述为已验证通过;无法执行的验证,说明未验证的内容及原因

常见问题

5 问
答案由本站依据条目字段整理
uTools-Dev-skill怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_879648bc/utools-dev-skill。安装方式为未标注。装完刷新技能列表或重开客户端。

uTools-Dev-skill支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

uTools-Dev-skill权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

uTools-Dev-skill收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

uTools-Dev-skill用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 未标注。