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
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: [
'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"
}
}
types
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.
*
* @see https://www.tampermonkey.net/documentation.php
*/
header: HeaderConfig;
/**
* Server config.
*/
server?: ServerConfig;
}
Examples
See the examples folder.