JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 123
  • Score
    100M100P100Q83250F

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 template

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

Table of contents

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;
}

Examples

See the examples folder.

License

MIT © crashmax