⚡️📦 A Vite plugin to build Userscript for Tampermonkey, Greasemonkey and Violentmonkey.

Overview

vite-userscript-plugin

npm license template

⚡️ Tampermonkey userscript developing and build plugin based on Vite.

Features

  • 🔥 Hot reloading after changing any files.
  • 🔧 Configure Tampermonkey's Userscript header.
  • 💨 Import all grant by default in development mode.
  • 📝 Automatically add used grant 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 vite.config.ts

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.

License

MIT © crashmax

You might also like...

Collaborative /r/place 2022 template userscript

Collaborative /r/place 2022 template userscript

[inactive] /r/Place 2022 collaborative minimap userscript Help /r/MyLittlePony get a pony on /r/place! Help /r/ainbowroad build a rainbow road on /r/p

Apr 6, 2022

UserScript de l'overlay de la KCorp pour le /r/place 2022

reddit-place-kcorp original authors : oralekin, LittleEndu, ekgame, Wieku, DeadRote Instructions FR ▶️ - Installer l'extension Tampermonkey sur chrome

Jan 3, 2023

Useful userscript, allowing you to steal NFTs from Twitter even easier than before!

Adds missing feature that even Twitter Blue doesn't have: click on hexagonal avatar to open it in a new tab and save yourself a couple of clicks while stealing it!

Jan 21, 2022

SponsorBlock in a bookmarklet/ userscript

SponsorBlock in a bookmarklet/ userscript

SB.js SponsorBlock for restrictive environments. Usage Userscripts: With Loader (sb-loader.user.js) The loader loads the script every time on startup

Dec 24, 2022

Userscript that adds a search bar to tabnews.com.br

Userscript that adds a search bar to tabnews.com.br

TabBusca Userscript that adds a search bar to tabnews.com.br Download This is a userscript. To use it you'll first need one of the following browser e

Mar 5, 2023

A magical vite plugin that helps you to generate and manage documentation website.

vite-plugin-book A magical vite plugin that helps you to generate and manage documentation website. ⚠️ This project is still WIP. It's a MVP now. A bu

Dec 20, 2022

Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support.

vite-plugin-virtual-mpa Out-of-the-box MPA plugin for Vite, with html template engine and virtual files support, generate multiple files using only on

Dec 16, 2022

Vite plugin for more convenient Relay experience.

vite-plugin-relay Vite plugin for more convenient Relay experience. What this plugin does for you: Generates artifacts on code changes Transform codes

Nov 7, 2022

Vite plugin to client bundle i18next locales composited from one to many json/yaml files from one to many libraries. Zero config HMR support included.

vite-plugin-i18next-loader yarn add -D vite-plugin-i18next-loader Vite plugin to client bundle i18next locales composited from one to many json/yaml f

Nov 30, 2022
Comments
  • Implement hot reload (HMR)

    Implement hot reload (HMR)

    Inject hot reload script in to proxy script https://vitejs.dev/guide/api-plugin.html#vite-specific-hooks

    if (import.meta.hot) {
      import.meta.hot.on('special-update', (data) => {
        // perform custom update
      })
    }
    
    enhancement 
    opened by crashmax-dev 0
  • Inject css (sometimes it doesn't work)

    Inject css (sometimes it doesn't work)

    https://github.com/vitejs/vite/issues/1579#issuecomment-1013481987

    ~https://github.com/vitejs/vite/issues/1579#issuecomment-1167091265~

    import fs from 'fs'
    import { resolve } from 'path'
    import type { ResolvedConfig, PluginOption } from 'vite'
    
    const fileRegex = /\.(css)$/
    
    const injectCode = (code: string) =>
      `function styleInject(css,ref){if(ref===void 0){ref={}}var insertAt=ref.insertAt;if(!css||typeof document==="undefined"){return}var head=document.head||document.getElementsByTagName("head")[0];var style=document.createElement("style");style.type="text/css";if(insertAt==="top"){if(head.firstChild){head.insertBefore(style,head.firstChild)}else{head.appendChild(style)}}else{head.appendChild(style)}if(style.styleSheet){style.styleSheet.cssText=css}else{style.appendChild(document.createTextNode(css))}};styleInject(\`${code}\`)`
    const template = `console.warn("__INJECT__")`
    
    let viteConfig: ResolvedConfig
    const css: string[] = []
    
    export default function injectCss(): PluginOption {
      return {
        name: 'inject-css',
        apply: 'build',
        configResolved(resolvedConfig) {
          viteConfig = resolvedConfig
        },
        transform(code, id) {
          if (fileRegex.test(id)) {
            css.push(code)
            return {
              code: ''
            }
          }
    
          if (id.includes(viteConfig.build.lib.entry)) {
            return {
              code: code + template
            }
          }
    
          return null
        },
        async writeBundle(options, bundle) {
          for (const file of Object.entries(bundle)) {
            const { root } = viteConfig
            const outDir = viteConfig.build.outDir || 'dist'
            const fileName = file[0]
            const filePath = resolve(root, outDir, fileName)
    
            try {
              let data = fs.readFileSync(filePath, {
                encoding: 'utf8'
              })
    
              if (data.includes(template)) {
                data = data.replace(template, injectCode(css.join('\n')))
              }
    
              fs.writeFileSync(filePath, data)
            } catch (e) {
              console.error(e)
            }
          }
        }
      }
    }
    
    bug enhancement 
    opened by crashmax-dev 0
Releases(1.6.6)
  • 1.6.6(Nov 28, 2022)

  • 1.6.5(Nov 28, 2022)

    What's Changed

    • chore: bump dependencies
    • chore(types): update violentmonkey

    Full Changelog: https://github.com/crashmax-dev/vite-userscript-plugin/compare/1.6.4...1.6.5

    Source code(tar.gz)
    Source code(zip)
  • 1.6.4(Nov 13, 2022)

  • 1.6.3(Nov 13, 2022)

  • 1.6.2(Nov 13, 2022)

    What's Changed

    • fix: minify with iife format to remove style modules constants

    Full Changelog: https://github.com/crashmax-dev/vite-userscript-plugin/compare/1.6.1...1.6.2

    Source code(tar.gz)
    Source code(zip)
  • 1.6.1(Oct 8, 2022)

  • 1.6.0(Sep 29, 2022)

  • 1.5.0(Sep 19, 2022)

    What's Changed

    • feat: added more built-in GM_* APIs by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/16

    Full Changelog: https://github.com/crashmax-dev/vite-userscript-plugin/compare/1.4.0...1.5.0

    Source code(tar.gz)
    Source code(zip)
  • 1.4.0(Sep 17, 2022)

    What's Changed

    • feat: added Tampermonkey's type difinition by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/15

    Full Changelog: https://github.com/crashmax-dev/vite-userscript-plugin/compare/1.3.0...1.4.0

    Source code(tar.gz)
    Source code(zip)
  • 1.3.0(Sep 17, 2022)

    What's Changed

    • feat: GM dot alias, GM promised by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/14

    Full Changelog: https://github.com/crashmax-dev/vite-userscript-plugin/compare/1.2.2...1.3.0

    Source code(tar.gz)
    Source code(zip)
  • 1.2.2(Sep 15, 2022)

  • 1.2.1(Sep 15, 2022)

  • 1.2.0(Sep 6, 2022)

    What's Changed

    • feat: add meta header for update and download userscript by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/13

    Full Changelog: https://github.com/crashmax-dev/vite-userscript-plugin/compare/1.1.2...1.2.0

    Source code(tar.gz)
    Source code(zip)
  • 1.1.2(Sep 5, 2022)

  • 1.1.1(Aug 29, 2022)

  • 1.1.0(Aug 28, 2022)

    What's Changed

    • feat: server options, serve static by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/12

    Full Changelog: https://github.com/crashmax-dev/vite-userscript-plugin/compare/1.0.0...1.1.0

    Source code(tar.gz)
    Source code(zip)
  • 1.0.0(Aug 26, 2022)

    What's Changed

    • feat: inject css in to bundle by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/3
    • feat: hmr by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/9
    • feat: auto grants, fix inject css by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/10
    • feat: init tests by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/11
    • chore: create LICENCE by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/7
    • ref: banner by @crashmax-dev in https://github.com/crashmax-dev/vite-userscript-plugin/pull/4

    New Contributors

    • @crashmax-dev made their first contribution in https://github.com/crashmax-dev/vite-userscript-plugin/pull/3

    Full Changelog: https://github.com/crashmax-dev/vite-userscript-plugin/commits/1.0.0

    Source code(tar.gz)
    Source code(zip)
Owner
Vitalij Ryndin
🦄 Frontend Developer
Vitalij Ryndin
A Tempermonky / Greasemonkey plugin which can help you export your class schedule to the calendar on your phone / pad / PC / Mac.

WHU Class Schedule Export as iCS Languages: English | 簡體中文 | 繁體中文 Changelog v0.90.1 - Sep 18, 2022 Fix bugs: Fix an error when a class have multiple s

Ostrich_B 6 Sep 7, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A tampermonkey script that adds functionality to the midjourney.com website to make it easier to do things.

MidJourneyTools A tampermonkey script that adds functionality to the midjourney.com website to make it easier to do things. Setup Instructions Make su

Nikolas 42 Dec 24, 2022
Tampermonkey script which adds the ability to add a user-defined label/tag/flair on a user, shown throughout Hacker News.

Hacker News User Tags Hacker News User Tags is a Tampermonkey userscript which allows the user to associate a custom coloured label/tag on usernames t

Lachlan McDonald 2 Oct 7, 2022
Fuck Twitter NFTs - Userscript to delete or block all occurances of NFT Users on Twitter

FuckTwitterNFTs Fuck Twitter NFTs - Userscript to delete or block all occurances of NFT Users on Twitter Userscript will by default, attempt to delete

Blumlaut 1 Jan 20, 2022
A userscript to spice your GitHub sidebar with an easy-to-use Table of Contents!

GitHub Sidebar ToC "... finally using that wasted sidebar space" – radiantly Installation You will need a userscript manager like Violentmonkey. Insta

Joshua T. 3 Mar 12, 2022
Reddit Place Tracer is a browser based userscript for the 2022 Reddit /r/Place project

Reddit Place Tracer is a browser based userscript for the 2022 Reddit /r/Place project which adds a transparent image on top of the canvas to aid communities with drawing the same image. It shows how the canvas should look, where each pixel goes, and what color. The user must manually click on these spots. It is not an automated bot and does not break any rules.

null 3 Apr 3, 2022
Collaborative /r/place 2022 template userscript

[inactive] /r/Place 2022 collaborative minimap userscript Help /r/MyLittlePony get a pony on /r/place! Help /r/ainbowroad build a rainbow road on /r/p

r/ainbowroad 15 Aug 26, 2022