jpskill.com
🛠️ 開発・MCP コミュニティ

develop-userscripts

Use when building, debugging, packaging, or publishing browser userscripts for Tampermonkey or ScriptCat, including GM APIs, metadata blocks, permission issues, @match/@grant/@connect setup, ScriptCat background or scheduled scripts, UserConfig blocks, or subscription workflows.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o develop-userscripts.zip https://jpskill.com/download/21183.zip && unzip -o develop-userscripts.zip && rm develop-userscripts.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/21183.zip -OutFile "$d\develop-userscripts.zip"; Expand-Archive "$d\develop-userscripts.zip" -DestinationPath $d -Force; ri "$d\develop-userscripts.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して develop-userscripts.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → develop-userscripts フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
3

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[スキル名] develop-userscripts ユーザースクリプトの作業は通常、ページロジックではなく、ランタイムとメタデータの境界で中断します。まずランタイムを選択し、最小限の権限を事前に宣言してから、スクリプトが実際に実行される環境でデバッグしてください。

使用する場面

このスキルは、以下の目的で使用します。

  • Tampermonkey または ScriptCat ユーザースクリプトの作成または修正
  • 注入タイミング、権限の不足、CSP の回避策、更新チェック、または GM_* の動作のデバッグ
  • ポータブルなフォアグラウンドスクリプトと ScriptCat 専用の @background または @crontab のどちらにするかの決定
  • ==UserConfig== を使用した設定 UI の追加
  • ScriptCat の ==UserSubscribe== バンドルのパッケージ化、または CloudCat 互換スクリプトの準備

このスキルは、完全なブラウザ拡張機能の開発や、ユーザースクリプトマネージャー以外の一般的なブラウザ自動化には使用しないでください。

ランタイムの選択

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"];
}

事前準備

  • マネージャーとブラウザを確認してください。Manifest V3 ブラウザでは、スクリプトを実行する前に ScriptCat で Allow User Scripts またはブラウザ開発者モードが必要になる場合があります。
  • コードを記述する前に、ページスクリプトとバックグラウンドスクリプトのどちらにするかを決定してください。ScriptCat のバックグラウンドスクリプトは DOM にアクセスできません。
  • 実装ではなく、メタデータから始めてください: @match@grant@connect@run-at、およびすべての更新 URL。
  • 通常のページスクリプトには、ポータブルな ==UserScript== パターンを推奨します。要求される動作が実際に必要とする場合にのみ、ScriptCat 専用のヘッダーに切り替えてください。

ワークフロー

  1. まずランタイムとメタデータを選択します。
  2. タスクに適合する最小限の権限サーフェスを宣言します。
  3. 選択したランタイムに対して実装します。
  4. コードが実際に実行される場所でデバッグします。
    • フォアグラウンドスクリプト: ページコンソールとマネージャーログ。
    • ScriptCat バックグラウンドスクリプト: まず実行ログ、次に background.html で実環境デバッグ。
  5. 適切な更新モデルで公開します。
    • 通常のスクリプト: @version を正確に保ち、必要な場合にのみ @updateURL または @downloadURL を追加します。
    • サブスクリプションバンドル: ==UserSubscribe==、HTTPS URL、およびサブスクリプションレベルの @connect を使用します。

クイックリファレンス

目的 デフォルトの選択 注意点
ページ UI、DOM スクレイピング、ページパッチ ポータブルな ==UserScript== @match@grant@run-at、CSP に敏感な注入
クロスオリジン API アクセス 明示的な @connect を使用した GM_xmlhttpRequest ホストの不足、Cookie 動作の違い、ユーザー認証
長時間実行されるワーカー ScriptCat @background DOM なし、非同期作業には Promise を返す必要があります
スケジュールされたタスク ScriptCat @crontab 最初の @crontab のみがカウントされます、5 フィールドの cron を推奨、間隔の重複を避ける
ユーザー編集可能な設定 ==UserConfig==GM_getValue ブロックの配置と group.key の命名
サイレントバンドルのインストールと更新 ==UserSubscribe== HTTPS、user.sub.js、サブスクリプション connect が子スクリプトを上書きします

よくある間違い

  • スクリプトが実際に使用する API の @grant が不足している。
  • GM_xmlhttpRequest または GM_cookie で使用されるホストの @connect が不足している。
  • 通常のホストターゲット設定において、@include@match よりも優れたデフォルトとして扱っている。
  • ScriptCat のバックグラウンドスクリプトまたは cron スクリプト内で DOM API を使用している。
  • 非同期の GM 作業が完全に終了する前に ScriptCat のバックグラウンドスクリプトから戻っている。
  • ==UserScript====UserSubscribe== のパッケージング概念を混同している。
  • ==UserConfig== を間違った場所に配置したり、group.key 名なしで設定キーを読み取ったりしている。
  • Tampermonkey と ScriptCat のストレージ、通知、またはリクエストの動作が同じであると仮定している。

参考文献

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

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

Intent Default choice Watch for
Page UI, DOM scraping, page patching Portable ==UserScript== @match, @grant, @run-at, CSP-sensitive injection
Cross-origin API access GM_xmlhttpRequest with explicit @connect Missing hosts, cookie behavior differences, user authorization
Long-running worker ScriptCat @background No DOM, must return Promise for async work
Scheduled task ScriptCat @crontab Only first @crontab counts, prefer 5-field cron, avoid interval overlap
User-editable settings ==UserConfig== plus GM_getValue Block 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

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。