使用vite 插件开发油猴脚本

关于如何使用vite-plugin-monkey (opens new window)开发油猴脚本

根据文档使用pnpm来进行安装

pnpm create monkey

然后你能从以下模板选择

JavaScript	TypeScript
empty (opens new window) (only js)	empty-ts (opens new window) (only ts)
vanilla (opens new window) (js + css)	vanilla-ts (opens new window) (ts + css)
vue (opens new window)	vue-ts (opens new window)
react (opens new window)	react-ts (opens new window)
preact (opens new window)	preact-ts (opens new window)
svelte (opens new window)	svelte-ts (opens new window)
solid (opens new window)	solid-ts (opens new window)

这里我使用的是react + js，然后我又安装了一个antd和dayjs

然后就可以开发了，需要注意的是

`unsafeWindow` 是用于在用户脚本（如 Greasemonkey、Tampermonkey 等）中访问页面原生的 `window` 对象。通常情况下，由于安全考虑，用户脚本运行在沙盒环境中，与页面脚本是隔离的，它们各自有独立的全局对象（`window`）。`unsafeWindow` 允许用户脚本获取对页面原生 `window` 对象的访问权限，从而直接操作页面的 JavaScript 环境。

### 使用场景

有时你需要访问页面的原生 JavaScript 对象、函数或变量，或者希望与页面中的代码进行更深层次的交互，这时候 `unsafeWindow` 就显得非常有用。例如，你想调用页面脚本中定义的函数或者修改页面脚本中的变量。

### grant `unsafeWindow`

在用户脚本中，`@grant` 元数据指令用于声明所需的特殊权限。`@grant unsafeWindow` 允许用户脚本访问和操作页面的原生 `window` 对象。

开发完成脚本后，构建需要修改一下配置

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import monkey, { cdn } from 'vite-plugin-monkey';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    monkey({
      entry: 'src/main.jsx', // 入口
      userscript: {
        icon: 'https://www.google.com/s2/favicons?sz=64&domain=hifini.com', // 图标
        name: 'hifini音乐播放管理', // 脚本名称 
        namespace: 'http://tampermonkey.net/',
        description: '在HiFiNi网站自动播放歌曲，可以自定义播放列表', // 脚本描述
        match: ['https://www.hifini.com/*'], // 作用于的网址
        author: 'zs', // 作者
        version: '1.0.2', // 版本号
        require: [
          'https://cdn.jsdelivr.net/npm/dayjs@1.11.11/dayjs.min.js' // antd需要用到的dayjs也需要引入
        ],
        grant: ['unsafeWindow'], // 使用window对象
      },
      build: {
        externalGlobals: {
          react: cdn.jsdelivr('React', 'umd/react.production.min.js'),
          'react-dom': cdn.jsdelivr(
            'ReactDOM',
            'umd/react-dom.production.min.js',
          ),
          antd: cdn.jsdelivr('antd', 'dist/antd.min.js'), // antd用cdn引入
        },
        autoGrant: false,
      },
    }),
  ],
});