在 ClawHub Skill 页面添加全主流包管理器的安装命令 (npx, pnpm, bun, yarn, global)，支持点击复制。
// ==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();
})();