GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - vaaski/userscript-template: Opinionated, slim and fast boilerplate for creating userscripts

BranchesTags
Open more actions menu

Latest commit

 

History

33 Commits
33 Commits

Folders and files

NameName
Last commit message
Last commit date
.github/workflows
.github/workflows
 
 
.vscode
.vscode
 
 
build
build
 
 
styles
styles
 
 
userscript
userscript
 
 
.gitignore
.gitignore
 
 
bun.lock
bun.lock
 
 
eslint.config.mjs
eslint.config.mjs
 
 
license.md
license.md
 
 
package.json
package.json
 
 
readme.md
readme.md
 
 
tsconfig.json
tsconfig.json
 
 

Repository files navigation

Userscript Template

Opinionated, slim and fast boilerplate for creating userscripts

Features

  • Bundles everything into a single user.index.js

  • Preloaded with Violentmonkey types

  • Serve userscript over HTTP for development

  • Inline styles with loadStyle compiler macro and injectStyle runtime <style> tag creator

    // transforms this
    injectStyle(loadStyle("styles/main.css"))
    
    // into this
    injectStyle("*{color:red!important}")
  • Interactive customizer for setup

    ❯ bun run customize
    
      ┌ userscript-template setup wizard
      │
      ◇ What should the userscript be called?
      │ epic-userscript
      │
      ◇ Describe it.
      │ makes the web more usable
      │
    
      [...]
  • Automatic userscript metablock generation from package.json fields

  • No dependencies, fully utilizing bun's fast toolchain (apart from customizer prompts)

  • Opinionated ESLint + ESLint-Stylistic configuration

  • Builds quickly on every GitHub push and releases as artifact

Installing

  • Install bun
  • Clone this repo or generate from template
  • Run bun install
  • Run bun run customize

Usage

The build script takes two optional flags:

  • --minify, -m to minify the output
  • --watch, -w to watch for changes and rebuild

Development

  • Run bun run dev
  • Open http://localhost:3000 in your browser
  • Click the userscript link. It should automatically open your userscript manager.

Production

  • Run bun run build
  • Output should be at out/index.user.js

Examples

  • Toggle injected styles with userscript menu item

    import { loadStyle } from "~~/build/styles" with { type: "macro" }
    import { injectStyle } from "~~/userscript/util/inject-style"
    
    const style = loadStyle("styles/main.css")
    let removeInjection: (() => void) | undefined = injectStyle(style)
    
    GM.registerMenuCommand(
      "Toggle CSS injection",
      () => {
        if (removeInjection) {
          removeInjection()
          removeInjection = undefined
        } else {
          removeInjection = injectStyle(style)
        }
      },
      {
        icon: "https://www.google.com/s2/favicons?sz=64&domain=google.com",
        autoClose: false,
        title: "Example menu command",
      },
    )

See also

  • Spawncamp - my userscript utility toolbox
  • Violentmonkey
  • Violentmonkey API Documentation

License

GNU GPLv3


Brainmade.org Logo

About

Opinionated, slim and fast boilerplate for creating userscripts

Resources

Readme
GPL-3.0 license
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.