前言

油猴脚本原生开发会有几个比较大阻力

1. 界面不好做：这主要源于油猴脚本完全基于JavaScript运行的，如果需要做界面，则需要使用js浏览器API对DOM进行操作以完成界面的开发
2. 调试很不方便：因油猴脚本注入是一次性的，完成注入后需要再次注入需要重新加载宿主页面，如果需要调试一段比较深层的功能那更是噩梦
3. 维护难度大：单项目的脚本一般都是单文件，“模块化”在油猴中为是把成熟库作为模块去使用，没法在项目内以业务为区分进行模块化开发，当一个脚本的功能做得稍微有点多的时候，单文件行数上来后的维护难度以及新功能开发难度就更大了

vite-plugin-monkey

vite-plugin-monkey的vite插件很好的解决了上面的问题，可以把油猴脚本进行工程化开发，cli提供了几个典型的工程模板，支持使用前端框架编写界面，安装运行后通过HMR热更新模块，使用vite编译发布等等
项目地址：https://github.com/lisonge/vite-plugin-monkey

参考项目的README创建vue3+ts的工程项目后，手动引入ElementPlus：

• shell

  npm i element-plus

• vite.config.ts

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  import monkey, { cdn, util } from 'vite-plugin-monkey';
  export default defineConfig({
  plugins: [
  vue(),
  monkey({
    entry: 'src/main.ts',
    userscript: {
      icon: 'https://www.google.com/s2/favicons?sz=64&domain=baidu.com',
      namespace: 'zzliux/TemperedHeroes-Plugin',
      match: ['https://www.baidu.com/*'],
    },
    build: {
      externalGlobals: {
        vue: cdn
          .npmmirror('Vue', 'dist/vue.global.prod.js')
          .concat(util.dataUrl(';window.Vue=Vue;')),
        'element-plus': cdn.npmmirror('ElementPlus', 'dist/index.full.min.js'),
      },
      externalResource: {
        'element-plus/dist/index.css': cdn.npmmirror(),
      },
    },
  }),
  ],
  });

• main.ts cdn只是配置了打包使用的require引入的三方库，能有效降低分发版本的体积，但开发时候仍需手动从依赖中引入

  import { createApp } from 'vue';
  import ElementPlus from 'element-plus';
  import 'element-plus/dist/index.css'
  import App from './App.vue';
  createApp(App)
  .use(ElementPlus)
  .mount(
  (() => {
  const app = document.createElement('div');
  document.body.append(app);
  return app;
  })(),
  );