vite-userscript-plugin

⚡️ Tampermonkey userscript developing and build plugin based on Vite.

Features

• 🔥 Hot reloading after changing any files.
• 🔧 Configure Tampermonkey's Userscript header.
• 💨 Import all grant by default in development mode.
• 📝 Automatically add used grant when building for production.
• 📦 Built-in Tampermonkey's TypeScript type definition.

Install

npm install vite-userscript-plugin -D

yarn add vite-userscript-plugin -D

pnpm add vite-userscript-plugin -D

Setup vite.config.ts

import { defineConfig } from 'vite'
import Userscript from 'vite-userscript-plugin'
import { name, version } from './package.json'

export default defineConfig((config) => {
  return {
    plugins: [
      Userscript({
        entry: 'src/index.ts',
        header: {
          name,
          version,
          match: '*://example.com'
        },
        server: {
          port: 3000
        }
      })
    ]
  }
})

Setup scripts

// package.json
{
  "scripts": {
    "dev": "vite build --watch --mode development",
    "build": "vite build"
  }
}

Setup TypeScript

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "vite-userscript-plugin/types/tampermonkey"
    ]
  }
}

Plugin Configuration

interface ServerConfig {
    /**
     * {@link https://github.com/sindresorhus/get-port}
     */
    port?: number;
    /**
     * @default false
     */
    open?: boolean;
}

interface UserscriptPluginConfig {
    /**
     * Path of userscript entry.
     */
    entry: string;
    /**
     * Userscript header config.
     */
    header: HeaderConfig;
    /**
     * Server config.
     */
    server?: ServerConfig;
}

Examples

See the examples folder.

License

MIT © crashmax