【工具】uTools 自定义插件开发正好需要一个临时文本编辑的小功能，纯粹进行简单的临时文本编辑（有时候需要临时放一下，

正好需要一个临时文本编辑的小功能，纯粹进行简单的临时文本编辑（有时候需要临时放一下，替换或者修改下复制的内容），每次都打开 sublime 编辑操作太重（虽然也有快捷键）

顺便看一下 uTools 插件开发的流程和方式，正好当个 HelloWorld

1. 食用佐料

uTools 官方开发文档
uTools 开发用插件：uTools开发者工具
ChatGPT（用来开发一些小工具确实好用）
开发语言：js（越来越觉得对于很多非大型项目，前端效果不可缺，后端能力凑合够用就行，难怪很多项目都是直接 js 全栈）

2. 食用流程

2.1. 前置准备

下载插件：uTools开发者工具
准备好插件开发文件目录
- 例如：~/data/develop/utools/plugins/tempText
- 插件核心文件，放插件开发目录下
  - plugin.json：插件描述，用于 uTools 对接，遵循 uTools 的配置规范
  - index.html：插件展示效果，实际上插件就是一个沙盒运行的网页
  - logo.png：插件的 logo

2.2. plugin.json

基本描述信息
- pluginName, version, description, author
- logo：指定 logo 文件名
- main：指定 index 文件名
features：插件功能，复杂功能插件主要就是区别在这一块
- code：每个 feature 的唯一标识
- cmds：响应的方式（唤醒插件的方式），这里主要是关键词唤醒和任意文本唤醒（type 为 over）

{
    "pluginName": "临时编辑",
    "version": "0.0.1",
    "description": "纯粹的，临时编辑",
    "author": "shiqi",
    "logo": "logo.png",
    "main": "index.html",
    "features": [
        {
            "code": "open_temp_text",
            "explain": "开启临时文本剪辑窗",
            "cmds": [
                "临时编辑",
                "lsbj",
                {
                    "type": "over",
                    "label": "临时编辑",
                    "minLength": 1
                }
            ]
        }
    ],
    "platform": [
        "win32",
        "darwin",
        "linux"
    ],
    "development": {}
}

2.3. index.html

插件功能的实现，其实就是个网页
- 这里直接用 gpt 生成了，稍微 fix 了下 bug
uTools 事件监听：uTools API | uTools
- 为了方便使用，需要读取唤醒时的输入框内容，在原内容里补充了下 api 的对接，监听下插件进入事件：utools.onPluginEnter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>临时文本剪辑窗</title>
    <style>
        body, html {
          height: 100%;
          width: 100%;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: black; /* 设置背景为黑色 */
          color: white; /* 设置文字颜色为白色 */
          font-size: 16px; /* 设置字体大小为 16px */
          font-family: Arial, sans-serif; /* 设置字体 */
        }

        textarea {
          width: 95%;
          height: 95%;
          background-color: #222; /* 设置编辑框背景为深灰色 */
          border: none; /* 去除边框 */
          padding: 10px; /* 设置内边距 */
          color: white; /* 设置文字颜色为白色 */
          font-size: 18px; /* 设置字体大小为 16px */
          font-family: Arial, sans-serif; /* 设置字体 */
          resize: none; /* 禁止用户调整大小 */
          outline: none; /* 去除输入框焦点时的边框 */
        }
    </style>
</head>
<body>
    <textarea id="textArea" placeholder="在此编辑文本..."></textarea>
    <script>
        utools.onPluginEnter(({ code, type, payload }) => {
          console.log('用户进入插件应用', code, type, payload)
          if (payload) {
            console.log('set value')
            document.getElementById('textArea').value = payload;
          }
        });
        document.getElementById('textArea').addEventListener('keyup', function() {
          // 这里可以添加一些响应键盘事件的代码，比如实时保存文本到localStorage等
        });
    </script>
</body>
</html>

2.3. logo.png

也顺手直接让 gpt 生成了，还怪好看的

2.4. 在 uTools 里加载

打开：uTools 开发者工具
新建项目
导入 plugin.json
直接运行测试
打包插件为离线插件文件：临时编辑-0.0.1.upx
复制打包完的文件，打开 uTools 进行安装
插件设置里开启 自动分离为独立窗口，这样编辑时还能同时用其他插件，也不会丢失

3. 效果

10. Tags

uTools、效率工具、Mac、插件、自定义、文本编辑、plugin