一键安装和配置 Claude Code
// ==UserScript==
// @name Claude Code 安装助手
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 一键安装和配置 Claude Code
// @author 北枫枫
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 创建安装按钮容器
function createInstallButton() {
// 检查域名是否匹配 - 只允许 api.ikuncode.cc 和 h.ikuncode.cc
const hostname = window.location.hostname;
const allowedHosts = ['api.ikuncode.cc', 'hk.ikuncode.cc'];
if (!allowedHosts.includes(hostname)) {
console.log('不在允许的域名下，跳过按钮创建');
return;
}
// 创建容器
const container = document.createElement('div');
container.id = 'claude-installer-container';
container.style.cssText = `
position: fixed;
top: 13%;
right: 20px;
transform: translateY(-50%);
z-index: 10000;
display: flex;
align-items: stretch;
background: #007bff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,123,255,0.3);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
`;
// 创建主按钮
const button = document.createElement('button');
button.id = 'claude-installer-btn';
button.textContent = '安装 Claude Code';
button.style.cssText = `
padding: 12px 20px;
background: transparent;
color: white;
border: none;
cursor: pointer;
font-size: 15px;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
overflow: hidden;
max-width: 200px;
opacity: 1;
`;
// 创建分隔线
const divider = document.createElement('div');
divider.id = 'claude-divider';
divider.style.cssText = `
width: 1px;
background: rgba(255, 255, 255, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
`;
// 创建折叠按钮
const collapseBtn = document.createElement('button');
collapseBtn.id = 'claude-collapse-btn';
collapseBtn.innerHTML = '◄';
collapseBtn.style.cssText = `
width: 45px;
padding: 0;
background: transparent;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
`;
// 悬停效果
button.addEventListener('mouseenter', () => {
button.style.background = 'rgba(255, 255, 255, 0.1)';
});
button.addEventListener('mouseleave', () => {
button.style.background = 'transparent';
});
collapseBtn.addEventListener('mouseenter', () => {
collapseBtn.style.background = 'rgba(255, 255, 255, 0.1)';
});
collapseBtn.addEventListener('mouseleave', () => {
collapseBtn.style.background = 'transparent';
});
// 添加点击事件
button.addEventListener('click', showInstallDialog);
collapseBtn.addEventListener('click', toggleCollapse);
// 组装容器
container.appendChild(button);
container.appendChild(divider);
container.appendChild(collapseBtn);
document.body.appendChild(container);
}
// 折叠/展开功能
function toggleCollapse() {
const button = document.getElementById('claude-installer-btn');
const collapseBtn = document.getElementById('claude-collapse-btn');
const divider = document.getElementById('claude-divider');
if (button.style.maxWidth === '0px') {
// 展开
button.style.maxWidth = '200px';
button.style.padding = '12px 20px';
button.style.opacity = '1';
divider.style.width = '1px';
divider.style.opacity = '1';
collapseBtn.innerHTML = '◄';
collapseBtn.title = '折叠';
} else {
// 折叠
button.style.maxWidth = '0px';
button.style.padding = '12px 0';
button.style.opacity = '0';
divider.style.width = '0px';
divider.style.opacity = '0';
collapseBtn.innerHTML = '►';
collapseBtn.title = '展开 Claude Code 安装助手';
}
}
// 获取用户ID的辅助函数
function getUserIdFromPage() {
let userId = null;
// 直接从localStorage中的user对象获取ID
try {
const userStr = localStorage.getItem('user');
if (userStr) {
const user = JSON.parse(userStr);
if (user && user.id) {
userId = user.id.toString();
console.log('从localStorage[user]获取到用户ID:', userId);
}
}
} catch (e) {
console.log('解析localStorage[user]失败:', e);
}
return userId;
}
// 获取用户的API密钥
async function fetchUserApiKeys() {
try {
// 检查是否在 ikuncode.cc 域名下
if (!window.location.hostname.includes('ikuncode.cc')) {
console.log('不在 ikuncode.cc 域名下，跳过自动获取');
return null;
}
console.log('正在获取API密钥...');
// 获取用户ID
let userId = getUserIdFromPage();
if (!userId) {
console.log('未找到用户ID，无法获取API密钥');
return null;
}
const headers = {
'accept': 'application/json, text/plain, */*',
'cache-control': 'no-store',
'sec-fetch-dest': 'empty',
'sec-fetch-mode': 'cors',
'sec-fetch-site': 'same-origin',
'veloera-user': userId
};
console.log('使用用户ID:', userId);
const response = await fetch('/api/token/?p=0&size=10', {
method: 'GET',
headers: headers,
credentials: 'include'
});
console.log('API响应状态:', response.status);
if (response.ok) {
const data = await response.json();
console.log('获取到的API数据:', data);
return data;
} else {
const errorText = await response.text();
console.log('API请求失败:', response.status, response.statusText, errorText);
return null;
}
} catch (error) {
console.log('获取API密钥失败:', error);
return null;
}
}
// 显示API密钥选择器
function showApiKeySelector(apiKeys) {
if (!apiKeys || !apiKeys.data || apiKeys.data.length === 0) {
return false;
}
const selector = document.createElement('select');
selector.id = 'apiKeySelect';
selector.style.cssText = `
width: 100%;
padding: 8px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
`;
// 添加默认选项
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = '选择API密钥';
selector.appendChild(defaultOption);
// 添加API密钥选项
apiKeys.data.forEach(key => {
const option = document.createElement('option');
// 确保获取完整的token值
const tokenValue = key.token || key.key || key.name || key.id;
option.value = tokenValue;
// 显示友好的名称和部分token
const displayName = key.name || key.title || '未命名密钥';
const displayToken = key.token ? key.token.substring(0, 20) + '...' : `ID: ${key.id}`;
option.textContent = `${displayName} (${displayToken})`;
// 添加调试信息
console.log('添加API密钥选项:', {
name: displayName,
value: tokenValue,
fullKey: key
});
selector.appendChild(option);
});
return selector;
}
// 显示安装对话框
async function showInstallDialog() {
// 先显示加载中的对话框
const dialog = document.createElement('div');
dialog.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10001;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
max-width: 500px;
width: 90%;
`;
// 添加背景遮罩
const overlay = document.createElement('div');
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 10000;
`;
document.body.appendChild(overlay);
document.body.appendChild(dialog);
// 显示加载状态
dialog.innerHTML = `
<h3>Claude Code 安装助手</h3>
<p>正在获取API密钥...</p>
`;
// 尝试获取用户的API密钥
const apiKeys = await fetchUserApiKeys();
const hasApiKeys = apiKeys && apiKeys.data && apiKeys.data.length > 0;
console.log('hasApiKeys:', hasApiKeys);
if (hasApiKeys) {
console.log('API密钥数量:', apiKeys.data.length);
}
// 更新对话框内容
dialog.innerHTML = `
<h3>Claude Code 安装助手</h3>
<p>此脚本将生成安装命令和配置文件</p>
${hasApiKeys ?
'<label for="apiKeySelect">选择API密钥:</label>' +
'<div id="apiKeySelectContainer"></div>' +
'<p style="font-size: 12px; color: #666; margin: 5px 0;">或者手动输入:</p>'
: ''
}
<label for="apiKey">API 令牌:</label>
<input type="text" id="apiKey" placeholder="输入您的 ANTHROPIC_API_KEY" style="width: 100%; padding: 8px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;">
<label for="baseUrl">API 渠道:</label>
<select id="baseUrl" style="width: 100%; padding: 8px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;">
<option value="https://api.ikuncode.cc">https://api.ikuncode.cc</option>
<option value="https://hk.ikuncode.cc">https://hk.ikuncode.cc</option>
</select>
<div style="margin: 15px 0;">
<button id="generateScript" style="padding: 10px 15px; background: #28a745; color: white; border: none; border-radius: 4px; margin-right: 10px;">生成脚本</button>
<button id="downloadConfig" style="padding: 10px 15px; background: #17a2b8; color: white; border: none; border-radius: 4px; margin-right: 10px;">下载配置</button>
<button id="closeDialog" style="padding: 10px 15px; background: #6c757d; color: white; border: none; border-radius: 4px;">关闭</button>
</div>
<div id="output" style="margin-top: 15px; padding: 10px; background: #f8f9fa; border-radius: 4px; display: none;">
<h4>安装步骤:</h4>
<ol id="stepList"></ol>
</div>
`;
// 如果有API密钥，添加选择器
if (hasApiKeys) {
const selector = showApiKeySelector(apiKeys);
if (selector) {
const container = dialog.querySelector('#apiKeySelectContainer');
container.appendChild(selector);
// 监听选择器变化
selector.addEventListener('change', function() {
const apiKeyInput = document.getElementById('apiKey');
if (this.value) {
console.log('选择的API密钥值:', this.value);
apiKeyInput.value = this.value;
console.log('已填入输入框:', apiKeyInput.value);
// 视觉提示用户已自动填入
apiKeyInput.style.backgroundColor = '#e8f5e8';
setTimeout(() => {
apiKeyInput.style.backgroundColor = '';
}, 1000);
} else {
// 清空输入框
apiKeyInput.value = '';
console.log('已清空输入框');
}
});
}
}
// 事件监听
dialog.querySelector('#generateScript').addEventListener('click', generateInstallScript);
dialog.querySelector('#downloadConfig').addEventListener('click', downloadConfigFiles);
dialog.querySelector('#closeDialog').addEventListener('click', () => {
document.body.removeChild(overlay);
document.body.removeChild(dialog);
});
}
// 生成安装脚本
function generateInstallScript() {
const apiKey = document.getElementById('apiKey').value;
const baseUrl = document.getElementById('baseUrl').value;
console.log('生成脚本时使用的API密钥:', apiKey);
console.log('生成脚本时使用的Base URL:', baseUrl);
if (!apiKey) {
alert('请输入 API 令牌');
return;
}
const output = document.getElementById('output');
const stepList = document.getElementById('stepList');
stepList.innerHTML = `
<li>运行: <code>npm install -g @anthropic-ai/claude-code</code></li>
<li>创建目录: <code>mkdir -p ~/.claude</code></li>
<li>脚本自动创建配置文件并写入API密钥</li>
<li>运行: <code>claude</code></li>
`;
output.style.display = 'block';
// 生成完整的安装脚本并下载
const scriptContent = generateBashScript(apiKey, baseUrl);
console.log('生成的脚本内容包含API密钥:', scriptContent.includes(apiKey));
downloadFile('setup-claude.sh', scriptContent, 'text/plain');
// 提示用户
setTimeout(() => {
alert(`脚本已生成并下载！
使用的API密钥: ${apiKey.substring(0, 20)}...
使用的API渠道: ${baseUrl}
运行步骤：
1. chmod +x setup-claude.sh
2. ./setup-claude.sh`);
}, 500);
}
// 生成 Bash 脚本内容
function generateBashScript(apiKey, baseUrl) {
return `#!/bin/bash
# IKunCode Claude Code 安装脚本
set -e
echo "======================================"
echo " IKunCode Claude Code Setup"
echo "======================================"
echo
# 使用预设的 API 令牌
ANTHROPIC_API_KEY="${apiKey}"
ANTHROPIC_BASE_URL="${baseUrl}"
if [ -z "$ANTHROPIC_API_KEY" ]; then
echo "错误：API 令牌不能为空"
exit 1
fi
# 首先检查 claude 命令是否存在
if ! command -v claude &> /dev/null; then
echo "Claude Code 未安装。"
# 检查 npm 是否存在
if ! command -v npm &> /dev/null; then
echo "错误：npm 未安装。"
echo "请先安装 Node.js。"
exit 1
fi
echo "发现 npm: $(npm -v)"
echo "正在安装 Claude Code..."
npm install -g @anthropic-ai/claude-code
if ! command -v claude &> /dev/null; then
echo "Claude Code 安装失败"
exit 1
fi
echo "✓ Claude Code 安装成功"
else
echo "✓ Claude Code 已安装"
fi
# 创建 .claude 目录
CLAUDE_DIR="$HOME/.claude"
if [ ! -d "$CLAUDE_DIR" ]; then
mkdir -p "$CLAUDE_DIR"
echo "创建目录: ~/.claude"
fi
# 创建或更新 settings.json
SETTINGS_FILE="$CLAUDE_DIR/settings.json"
if [ -f "$SETTINGS_FILE" ]; then
echo "正在更新 settings.json..."
# 备份现有文件
cp "$SETTINGS_FILE" "$SETTINGS_FILE.bak"
fi
cat > "$SETTINGS_FILE" << EOF
{
"env": {
"DISABLE_TELEMETRY": "1",
"ANTHROPIC_AUTH_TOKEN": "$ANTHROPIC_API_KEY",
"ANTHROPIC_BASE_URL": "$ANTHROPIC_BASE_URL"
}
}
EOF
echo "✓ settings.json 配置完成"
# 创建 .claude.json
CLAUDE_JSON_FILE="$HOME/.claude.json"
if [ -f "$CLAUDE_JSON_FILE" ]; then
echo "正在更新 .claude.json..."
# 备份现有文件
cp "$CLAUDE_JSON_FILE" "$CLAUDE_JSON_FILE.bak"
fi
echo "✓ .claude.json 创建完成"
# 验证配置
if [ -f "$SETTINGS_FILE" ] && [ -f "$CLAUDE_JSON_FILE" ]; then
echo
echo "======================================"
echo " 安装完成！"
echo "======================================"
echo
echo "使用的API渠道: $ANTHROPIC_BASE_URL"
echo
echo "现在可以使用以下命令启动 Claude Code："
echo " claude"
echo
else
echo "配置不完整"
[ ! -f "$SETTINGS_FILE" ] && echo " 缺失文件: ~/.claude/settings.json"
[ ! -f "$CLAUDE_JSON_FILE" ] && echo " 缺失文件: ~/.claude.json"
exit 1
fi
`;
}
// 下载配置文件
function downloadConfigFiles() {
const apiKey = document.getElementById('apiKey').value;
const baseUrl = document.getElementById('baseUrl').value;
if (!apiKey) {
alert('请输入 API 令牌');
return;
}
// settings.json
const settingsConfig = {
"env": {
"DISABLE_TELEMETRY": "1",
"ANTHROPIC_AUTH_TOKEN": apiKey,
"ANTHROPIC_BASE_URL": baseUrl
}
};
downloadFile('settings.json', JSON.stringify(settingsConfig, null, 2), 'application/json');
// 显示移动指令
setTimeout(() => {
alert(`配置文件已下载！
使用的API渠道: ${baseUrl}
请按以下步骤操作：
1. 创建 Claude 配置目录:
mkdir -p ~/.claude
2. 将下载的 settings.json 文件移动到配置目录:
mv ~/Downloads/settings.json ~/.claude/
3. 验证配置:
ls -la ~/.claude/
4. 运行 Claude Code:
claude`);
}, 100);
}
// 下载文件函数
function downloadFile(filename, content, mimeType) {
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
// 页面加载完成后创建按钮
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', createInstallButton);
} else {
createInstallButton();
}
})();