记录油猴脚本的开发过程

  前几天我给煎蛋网(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自动拉取。