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
`

$3

`js
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
}
})
]
}
})
`

$3

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

$3

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

Plugin Configuration

`ts
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