vite-userscript-plugin

⚡️ A plugin for developing and building a Tampermonkey userscript based on Vite.

Features

• 🔥 Hot reloading after changing any files.
• 🔧 Configure Tampermonkey's Userscript header.
• 💨 Import all grant's to the header by default in development mode.
• 📝 Automatic addition of used grant's in the code 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: [
            'https://example.com',
            'https://example.org',
            'https://example.edu'
          ]
        },
        server: {
          port: 3000
        }
      })
    ]
  }
})

Setup NPM scripts

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

Setup TypeScript types

// 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