Personal Userscript Store

· 1 phút đọc

Nền tảng lưu trữ userscript cá nhân với Vue 3 SPA và tự động sinh index script

github | demo

thẻ: webapp, userscript, spa, tampermonkey

công nghệ: vue3, vite, typescript, tailwindcss, shiki, fuse.js, playwright

What

Kho userscript cá nhân — SPA Vue 3 dùng để lưu trữ, phân loại và phục vụ các file .user.js cho Tampermonkey/Violentmonkey.

Script được tổ chức theo danh mục (general, github), có tìm kiếm, highlight cú pháp, dark mode và mục bookmark bên ngoài.

Tự động sinh scripts-index.json từ metadata của script khi build. Deploy lên GitHub Pages.

Why

Tập trung các userscript cá nhân vào một nơi dễ duyệt, dễ cài đặt thay vì rải rác ở Gist hay file local.

Cung cấp URL cài đặt một click, theo dõi phiên bản qua @updateURL/@downloadURL, và giao diện gọn gàng để khám phá và quản lý script.

Notes

  • Build script phân tích block @metadata từ file .user.js → sinh scripts-index.json
  • Tìm kiếm qua Fuse.js với phím tắt (Ctrl+K)
  • Highlight cú pháp bằng Shiki khi xem source script
  • Mục Bookmarks từ BOOKMARKS.md để tuyển chọn userscript bên ngoài
  • Hash routing (/#/) tương thích GitHub Pages
  • Composables pattern: useScripts, useBookmarks, useSearch, useDarkMode
  • E2E tests với Playwright
  • 4 userscript chia 2 danh mục (general, github):
    • Markdown Viewer — render file markdown local/raw URL với GFM đầy đủ
    • GIFHub — chèn GIF vào comment, PR, issue, discussion trên GitHub
    • PR Merge Control — tự động disable regular/squash merge trên target branch
    • Change Translate Attribute — đổi translate="no" thành translate="yes" trên mọi trang