背景：写Android的时候总是要找依赖库，然后还要改成 libs.version.toml 合适的格式，感觉这个过程很无聊，于是就想着能不能写个插件，搜索依赖库+生成所需要的格式，要是能将自己的常用到依赖集合起来就更好了；

于是就把目光放到的 Utools 这个经常用到的工具上，然后就开始写插件了

为了方便开发，采用的是 vue3 + ts + ElementUI-Plus + vite（我也就只会这些了）

但是官方文档给出的信息有点少：快速上手 | uTools - 新一代效率工具平台

里面提到 window.utools 对象会在运行时挂载上去，但是用 ts 开发就很难受了，因为没有类型不全，而且还爆红（强迫症患者难受坏了）

  • 官方提供了ts类型文件 https://github.com/uTools-Labs/utools-api-types

  • 按照上面的配置就行了，尽管类型有提示了，但是还是爆红（算了算了，把用到api封装一遍到单个文件，就不用到处爆红了）

项目地址

https://github.com/YeMengLiChou/utools-maven-artifact-search

Vue3项目开发

vite

正常的 vue3 项目开发即可，

但是使用 vite.config.ts 需要配置 base 字段为 ./ 

export default defineConfig({
    base: './',
}

跨域问题

同时 Utools 中不需要配置跨域，也就是说直接访问对应的api即可

在自己写的插件中，数据来源全部来自于 https://mvnrepository.com/ 这个网站

将拿到的网页内容进行解析并展示到网页上，可以在这个过程中执行一些自定义操作；

Plugin.json

这个文件是用于声明插件的配置文件，通过配置命令，可以在 Utools 面板中搜索到该命令，并跳转

这个 plugin.json 文件需要放在 public 目录下，保证打包的时候这个文件要在 dist 目录下;

同时 utools.onPluginEnter 钩子函数也支持在进入插件时回调，并带有一些参数

  • code 命令唯一标识符，通过该命令可以判断执行的是哪些执行，并结合路由跳转到对应的页面即可

  • type 命令匹配的类型，比如文本、文件、图片这些，当utools面板中输入这些类型时，就会显示匹配类型的命令

  • payload 进入插件时携带的内容，如果type是文本，那么就能够拿到进入插件时面板输入的文本。

通过该回调，我可以拿到 payload 直接搜索输入的内容，减少操作；

export type PluginEnterConfig = {
    code: string
    type: string
    payload: any
    option: any
}

/**
 * 当插件进入时回调
 * */
export const onPluginEnter = (callback: (config: PluginEnterConfig) => void) => {
    window.utools.onPluginEnter(callback)
}

preload.js

据官方文档说，这个文件可以读取到 nodejs 环境、commonJs 等内容，挺强大的，但是我不用（因为不会）

因此这里就不介绍了，如果以后用上了再补充

Utool开发者工具

这个插件是 Utools 官方提供的工具，使用该工具可以将我们写好的项目（打包好的）打包成 upx 格式文件，然后就能通过该文件安装插件了

同时这个插件也支持开发时预览，具体看文档