Vite-userscript-plugin NPM

vite-userscript-plugin

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

Features

🔥 Reloading page 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 config

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"
    ]
  }
}

Using style modules

import style from './style.css?raw'

// inject style element
const styleElement = GM_addStyle(style)

// remove style element
styleElement.remove()

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.
   *
   * @see https://www.tampermonkey.net/documentation.php
   */
  header: HeaderConfig;

  /**
   * Server config.
   */
  server?: ServerConfig;
}