ClawHub Skill Multi-Installer

在 ClawHub Skill 页面添加全主流包管理器的安装命令 (npx, pnpm, bun, yarn, global)，支持点击复制。
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         ClawHub Skill Multi-Installer
// @description  在 ClawHub Skill 页面添加全主流包管理器的安装命令 (npx, pnpm, bun, yarn, global)，支持点击复制。
// @name:en      ClawHub Skill Multi-Installer
// @description:en  Add installation commands for all mainstream package managers (npx, pnpm, bun, yarn, global) on the ClawHub Skill page, with support for copying by clicking.
// @namespace    https://clawhub.ai/
// @version      1.2
// @author       Gemini
// @match        *://clawhub.ai/*/*
// @grant        none
// @license           MIT
// ==/UserScript==

(function() {
    'use strict';

    function getSkillSlug() {
        const parts = window.location.pathname.split('/').filter(Boolean);
        return parts.length >= 2 ? parts[1] : null;
    }

    function createCmdRow(label, command) {
        const row = document.createElement('div');
        row.style.marginBottom = '8px';

        const labelEl = document.createElement('div');
        labelEl.textContent = label;
        labelEl.style.fontSize = '11px';
        labelEl.style.textTransform = 'uppercase';
        labelEl.style.color = '#9ca3af';
        labelEl.style.fontWeight = '700';
        labelEl.style.marginBottom = '2px';

        const input = document.createElement('input');
        input.value = command;
        input.readOnly = true;
        input.style.width = '100%';
        input.style.padding = '6px 10px';
        input.style.fontSize = '12px';
        input.style.fontFamily = 'monospace';
        input.style.border = '1px solid #e5e7eb';
        input.style.borderRadius = '4px';
        input.style.backgroundColor = '#ffffff';
        input.style.cursor = 'copy';
        input.style.color = '#374151';
        input.style.outline = 'none';

        input.onclick = () => {
            navigator.clipboard.writeText(command);
            const originalBg = input.style.backgroundColor;
            input.style.backgroundColor = '#ecfdf5';
            input.style.borderColor = '#10b981';
            setTimeout(() => {
                input.style.backgroundColor = originalBg;
                input.style.borderColor = '#e5e7eb';
            }, 500);
        };

        row.appendChild(labelEl);
        row.appendChild(input);
        return row;
    }

    function inject() {
        const slug = getSkillSlug();
        if (!slug || document.getElementById('clawhub-multi-installer')) return;

        const downloadBtn = Array.from(document.querySelectorAll('a, button'))
            .find(el => el.textContent.toLowerCase().includes('download zip'));

        if (downloadBtn) {
            const container = document.createElement('div');
            container.id = 'clawhub-multi-installer';
            container.style.marginTop = '20px';
            container.style.padding = '16px';
            container.style.backgroundColor = '#f9fafb';
            container.style.borderRadius = '10px';
            container.style.border = '1px solid #f3f4f6';

            const title = document.createElement('h4');
            title.textContent = '🚀 快速安装 (点击命令复制)';
            title.style.fontSize = '14px';
            title.style.margin = '0 0 12px 0';
            title.style.color = '#111827';

            container.appendChild(title);

            // 定义所有支持的命令
            const commands = [
                { label: 'npx (推荐)', cmd: `npx clawhub@latest install ${slug}` },
                { label: 'pnpm dlx', cmd: `pnpm dlx clawhub@latest install ${slug}` },
                { label: 'bun x', cmd: `bun x clawhub@latest install ${slug}` },
                { label: 'global (npm)', cmd: `clawhub install ${slug}` }
            ];

            commands.forEach(c => {
                container.appendChild(createCmdRow(c.label, c.cmd));
            });

            downloadBtn.parentNode.insertBefore(container, downloadBtn.nextSibling);
        }
    }

    // 适配 SPA 导航
    const observer = new MutationObserver(() => inject());
    observer.observe(document.body, { childList: true, subtree: true });
    inject();
})();