Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/greasify/vite-userscript-plugin
⚡️ A Vite plugin to build userscripts for Tampermonkey, Greasemonkey and Violentmonkey.
https://github.com/greasify/vite-userscript-plugin
greasemonkey hacktoberfest plugin tampermonkey typescript userscript violentmonkey vite vite-plugin
Last synced: 3 days ago
JSON representation
⚡️ A Vite plugin to build userscripts for Tampermonkey, Greasemonkey and Violentmonkey.
- Host: GitHub
- URL: https://github.com/greasify/vite-userscript-plugin
- Owner: greasify
- License: mit
- Created: 2022-08-15T01:06:31.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-17T13:15:31.000Z (16 days ago)
- Last Synced: 2024-09-25T15:55:16.086Z (8 days ago)
- Topics: greasemonkey, hacktoberfest, plugin, tampermonkey, typescript, userscript, violentmonkey, vite, vite-plugin
- Language: TypeScript
- Homepage: https://npmjs.com/vite-userscript-plugin
- Size: 341 KB
- Stars: 42
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vite-userscript-plugin
[](https://npmjs.com/vite-userscript-plugin)
[](./LICENCE)
[](https://github.com/crashmax-dev/vite-userscript-template)
> ⚡️ A plugin for developing and building a Tampermonkey userscript based on [Vite](https://vitejs.dev).
## Table of contents
- [Features](#features)
- [Install](#install)
- [Setup config](#setup-config)
- [Using style modules](#using-style-modules)
- [Plugin configuration](#plugin-configuration)
## Features
- 🔥 Reloading page after changing any files.
- 🔧 Configure Tampermonkey's Userscript header.
- 💨 Import all [`grant`](https://www.tampermonkey.net/documentation.php#_grant)'s to the header by default in development mode.
- 📝 Automatic addition of used [`grant`](https://www.tampermonkey.net/documentation.php#_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
```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
}
})
]
}
})
```
### Setup NPM scripts
```json
// package.json
{
"scripts": {
"dev": "vite build --watch --mode development",
"build": "vite build"
}
}
```
### Setup TypeScript [types](https://www.typescriptlang.org/tsconfig#types)
```json
// tsconfig.json
{
"compilerOptions": {
"types": [
"vite-userscript-plugin/types/tampermonkey"
]
}
}
```
### Using style modules
```js
import style from './style.css?raw'
// inject style element
const styleElement = GM_addStyle(style)
// remove style element
styleElement.remove()
```
## 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](https://github.com/crashmax-dev/vite-userscript-plugin/tree/master/examples) folder.
## License
[MIT](./LICENCE) © [crashmax](https://github.com/crashmax-dev)