记录油猴脚本的开发过程

  前几天我给煎蛋网 (jandan.net) 写了一个脚本：煎蛋吐槽记录器，主要是想练手，顺便用用我好久前 star 过的一个有趣的项目：vite-plugin-monkey。第一版比较粗糙，用 jQuery 写的，感觉像现代人去钻木取火一样，最后实在受不了了，换 vue 重写。然后把自动更新也做了，下面记录一下过程。

起项目

1. 参考 vite-plugin-monkey 的文档，起项目只需一行命令 pnpm create monkey。

2. 参考文档的 Config 部分，修改 vite.config.ts，这里决定编译后的脚本的元数据。

3. 写代码（此处省略一万字），测试。vite-plugin-monkey 的调试非常方便，只需要 npm run dev，浏览器安装测试脚本，后续就可以完美实现热更新，开发效率非常高！

发布到 Greasy Fork

  如果每次更新都手动去 Greasy Fork 发布，那就显得太繁琐了。好在 Greasy Fork 有个 webhook 同步功能，文档在 https://greasyfork.org/zh-CN/users/webhook-info。首先去 github 仓库配置 webhook，然后在脚本的管理页面设置同步下载的地址。 配置脚本自动更新   如上配置后，每次有新的 github release 发布，Greasy Fork 就会拉取最新的脚本内容以及脚本描述。

Github Actions 自动发布 release

  Greasy Fork 配置好了后，还需要让 Github 也智能一点：每次 push 新 tag 的时候，就编译出新的脚本，并发布 release。   对应的.github\workflows\main.yml 内容如下：

on:
  push:
    tags:
      - 'v*' # 触发条件为：推送tag，且tag开头是v，例如v1.0.0

permissions:
  contents: write # 授予actions发布release的权限

name: Create Release

jobs:
  build:
    name: Create Release
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      # 初始化node和pnpm环境
      - uses: pnpm/action-setup@v2 
        with:
          version: 6.10.0
      - uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'pnpm'
      # 安装依赖
      - run: pnpm install
      # 编译脚本
      - run: pnpm run build
      # 发布release
      - name: Release
        uses: softprops/action-gh-release@v1
        if: startsWith(github.ref, 'refs/tags/')
        with:
          files: dist/jandan-recorder.user.js

  以上全部配置完成后，每次写完代码，只需如下几步：

1. 更新 vite.config.ts 里的 version 字段，例如以前是 version: "1.0.2"，新版是 version: "1.1.0"。
2. 提交代码：

   git add vite.config.ts
   git commit -m "xxx"
   git push
   # 发布新tag，触发脚本编译
   git tag v1.1.0
   git push --tags

3. 等待 Greasy Fork 自动拉取。