develop-userscripts

作者: xixu-me

在構建、除錯、打包或發佈用於 Tampermonkey 或 ScriptCat 的瀏覽器使用者腳本時使用,包括 GM API、元數據區塊、權限問題、@match/@grant/@connect 設定、ScriptCat 背景或排程腳本、UserConfig 區塊或訂閱工作流程。

npx skills add https://github.com/xixu-me/skills --skill develop-userscripts

Userscript work usually breaks at the runtime and metadata boundary, not in the page logic. Choose the runtime first, declare the minimum permissions up front, then debug in the environment where the script actually runs.

When to Use

Use this skill for:

  • writing or fixing a Tampermonkey or ScriptCat userscript
  • debugging injection timing, missing permissions, CSP workarounds, update checks, or GM_* behavior
  • deciding between a portable foreground script and ScriptCat-only @background or @crontab
  • adding config UI with ==UserConfig==
  • packaging a ScriptCat ==UserSubscribe== bundle or preparing a CloudCat-compatible script

Do not use this skill for full browser extension development or general browser automation outside userscript managers.

Runtime Selection

digraph userscript_runtime {
    "Need page DOM or page context?" [shape=diamond];
    "Need persistent or scheduled work?" [shape=diamond];
    "Need to install many scripts as one package?" [shape=diamond];
    "Portable foreground script" [shape=box];
    "ScriptCat background or crontab script" [shape=box];
    "ScriptCat subscription package" [shape=box];

    "Need page DOM or page context?" -> "Portable foreground script" [label="yes"];
    "Need page DOM or page context?" -> "Need persistent or scheduled work?" [label="no"];
    "Need persistent or scheduled work?" -> "ScriptCat background or crontab script" [label="yes"];
    "Need persistent or scheduled work?" -> "Need to install many scripts as one package?" [label="no"];
    "Need to install many scripts as one package?" -> "ScriptCat subscription package" [label="yes"];
    "Need to install many scripts as one package?" -> "Portable foreground script" [label="no"];
}

Preflight

  • Confirm the manager and browser. On Manifest V3 browsers, ScriptCat may require Allow User Scripts or browser developer mode before scripts run.
  • Decide page script versus background script before writing code. ScriptCat background scripts cannot touch the DOM.
  • Start with metadata, not implementation: @match, @grant, @connect, @run-at, and any update URLs.
  • Prefer portable ==UserScript== patterns for ordinary page scripts. Only switch to ScriptCat-only headers when the requested behavior actually needs them.

Workflow

  1. Choose the runtime and metadata first.
  2. Declare the smallest permission surface that fits the task.
  3. Implement against the runtime you chose.
  4. Debug where the code really runs.
    • Foreground scripts: page console plus manager logs.
    • ScriptCat background scripts: run log first, then background.html for real-environment debugging.
  5. Publish with the right update model.
    • Normal scripts: keep @version accurate and add @updateURL or @downloadURL only when needed.
    • Subscription bundles: use ==UserSubscribe==, HTTPS URLs, and subscription-level @connect.

Quick Reference

IntentDefault choiceWatch for
Page UI, DOM scraping, page patchingPortable ==UserScript==@match, @grant, @run-at, CSP-sensitive injection
Cross-origin API accessGM_xmlhttpRequest with explicit @connectMissing hosts, cookie behavior differences, user authorization
Long-running workerScriptCat @backgroundNo DOM, must return Promise for async work
Scheduled taskScriptCat @crontabOnly first @crontab counts, prefer 5-field cron, avoid interval overlap
User-editable settings==UserConfig== plus GM_getValueBlock placement and group.key naming
Silent bundle install and updates==UserSubscribe==HTTPS, user.sub.js, subscription connect overrides child scripts

Common Mistakes

  • Missing @grant for APIs the script actually uses.
  • Missing @connect for hosts used by GM_xmlhttpRequest or GM_cookie.
  • Treating @include as a better default than @match for ordinary host targeting.
  • Using DOM APIs inside ScriptCat background or cron scripts.
  • Returning from a ScriptCat background script before async GM work is truly finished.
  • Mixing ==UserScript== and ==UserSubscribe== packaging concepts.
  • Putting ==UserConfig== in the wrong place or reading config keys without the group.key name.
  • Assuming Tampermonkey and ScriptCat storage, notification, or request behavior is identical.

References

來自 xixu-me 的更多技能

github-actions-docs
xixu-me
當使用者詢問如何撰寫、解釋、自訂、遷移、保護或疑難排解 GitHub Actions 工作流程、工作流程語法、觸發器、矩陣、執行器、可重複使用工作流程、成品、快取、密碼、OIDC、部署、自訂動作或 Actions Runner Controller 時使用,特別是當他們需要官方 GitHub 文件、精確連結或基於文件的 YAML 指引時。
developmentdevopsdocument
use-my-browser
xixu-me
當工作依賴於用戶的即時瀏覽器工作階段或可見的渲染狀態,而非靜態擷取時使用,特別適用於瀏覽器除錯情境、開發者工具選取的元素或請求、已登入的儀表板或CMS流程、本地主機應用程式、表單、上傳、下載、媒體檢查、DOM或iframe檢查、Shadow DOM,以及看似軟性404、驗證牆、反機器人檢查或速率限制的瀏覽器故障。
browser-automationweb-scrapingtesting
readme-i18n
xixu-me
當使用者想要翻譯儲存庫的README、讓儲存庫支援多語言、在地化文件、加入語言切換器、國際化README,或是在GitHub風格的儲存庫中更新已在地化的README版本時使用。
documentdevelopmentapi
openclaw-secure-linux-cloud
xixu-me
在雲端伺服器上自行託管 OpenClaw 時使用,用於強化遠端 OpenClaw 閘道、選擇 SSH 隧道、Tailscale 或反向代理暴露方式,或審查 Podman、配對、沙箱、令牌驗證及工具權限預設值,以確保安全的個人部署。
devopssecurity
secure-linux-web-hosting
xixu-me
在設定、強化或檢視用於自架站的雲端伺服器時使用,包括 DNS、SSH、防火牆、Nginx、靜態網站託管、應用程式的反向代理、使用 Let's Encrypt 或 ACME 用戶端的 HTTPS、安全的 HTTP 到 HTTPS 重新導向,或可選的啟動後網路調校(如 BBR)。
devopssecurityaws
opensource-guide-coach
xixu-me
當使用者希望獲得關於啟動、貢獻、發展、治理、資助、保護或維持開源專案的指導,或詢問貢獻者入門、社群健康、維護者倦怠、行為準則、指標、法律基礎或開源專案採用的相關問題時使用。
developmentresearch
running-claude-code-via-litellm-copilot
xixu-me
在透過本地 LiteLLM 代理將 Claude Code 路由至 GitHub Copilot 時使用,以減少直接 Anthropic 花費、設定 ANTHROPIC_BASE_URL 或 ANTHROPIC_MODEL 覆寫,或疑難排解 Copilot 代理設定失敗,例如模型未找到、無 localhost 流量或 GitHub 401/403 驗證錯誤。
developmentapidevops
skills-cli
xixu-me
Use when users ask to discover, install, list, check, update, remove, back up, restore, sync, or initialize Agent Skills, mention `bunx skills`, `npx skills`, `skills.sh`, or `skills-lock.json`, ask "find a skill for X", or want help extending agent capabilities with installable skills.
developmentapiproductivity