Personal Userscript Store

· 1 min read

Personal userscript hosting platform with Vue 3 SPA and auto-generated script index

github | demo

tags: webapp, userscript, spa, tampermonkey

stack: vue3, vite, typescript, tailwindcss, shiki, fuse.js, playwright

What

Personal userscript store — a Vue 3 SPA that hosts, catalogs, and serves .user.js files for Tampermonkey/Violentmonkey.

Scripts organized by category (general, github), with fuzzy search, syntax highlighting, dark mode, and an external bookmarks section.

Auto-generates scripts-index.json from script metadata at build time. Deployed to GitHub Pages.

Why

Centralizes personal userscripts in one browsable, installable place instead of scattered Gists or local files.

Provides one-click install URLs, version tracking via @updateURL/@downloadURL, and a clean UI to discover and manage scripts.

Notes

  • Build script parses @metadata blocks from .user.js files → generates scripts-index.json
  • Fuzzy search via Fuse.js with keyboard shortcuts (Ctrl+K)
  • Shiki syntax highlighting for script source viewing
  • Bookmarks section from BOOKMARKS.md for curating external userscripts
  • Hash routing (/#/) for GitHub Pages compatibility
  • Composables pattern: useScripts, useBookmarks, useSearch, useDarkMode
  • E2E tests with Playwright
  • 4 userscripts across 2 categories (general, github):
    • Markdown Viewer — render local/raw markdown files with full GFM support
    • GIFHub — insert GIFs into GitHub comments, PRs, issues, discussions
    • PR Merge Control — auto-disable regular/squash merge on target branch
    • Change Translate Attribute — flip translate="no" to translate="yes" on any page