Package Exports

vite-userscript-plugin
vite-userscript-plugin/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vite-userscript-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vite-userscript-plugin

npm license

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.

Install

npm install vite-userscript-plugin -D

yarn add vite-userscript-plugin -D

pnpm add vite-userscript-plugin -D

Usage

`vite.config.ts`

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

export default defineConfig({
  plugins: [
    UserscriptPlugin({
      entry: resolve(__dirname, 'src/index.ts'),
      metadata: {
        name,
        version,
        match: [
          'https://example.com',
          'https://example.org',
          'https://example.edu'
        ]
      }
    })
  ]
})

`package.json`

{
  "scripts": {
    "dev": "vite build --watch",
    "build": "vite build"
  }
}

Plugin Configuration

export interface UserscriptPluginConfig {
  /**
   * Path of userscript entry.
   */
  entry: string

  /**
   * Userscript header config.
   */
  metadata: MetadataConfig

  /**
   * Import all `@grant` in development mode.
   * @default true
   */
  autoGrants?: boolean

  /**
   * Server config (used in development mode for hot reloading).
   */
  server?: ServerConfig
}

Example

See the example folder.