vite-userscript-plugin

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

Table of contents

• Features
• Install
• Setup config
• Using style modules
• Plugin configuration

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'importUserscriptfrom'vite-userscript-plugin'import{name,version}from'./package.json'exportdefaultdefineConfig((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

importstylefrom'./style.css?raw'// inject style elementconststyleElement=GM_addStyle(style)// remove style elementstyleElement.remove()

Plugin configuration

interfaceServerConfig{/** * {@link https://github.com/sindresorhus/get-port} */port?: number;/** * @default false */open?: boolean;}interfaceUserscriptPluginConfig{/** * 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