vite-userscript-plugin
⚡️ Tampermonkey userscript developing and build plugin based on Vite.
Features
-
🔥 Hot reloading after changing any files. -
🔧 Configure Tampermonkey's Userscript header. -
💨 Import allgrant
by default in development mode. -
📝 Automatically add usedgrant
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
vite.config.ts
Setup 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: '*://example.com'
},
server: {
port: 3000
}
})
]
}
})
Setup scripts
// package.json
{
"scripts": {
"dev": "vite build --watch --mode development",
"build": "vite build"
}
}
Setup TypeScript
// 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.