npm - ghost-bridge - Versions diffs - 0.2.0 - Mend

ghost-bridge 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/extension/icon-128.png ADDED Viewed

Binary file

package/extension/icon-16.png ADDED Viewed

Binary file

package/extension/icon-32.png ADDED Viewed

Binary file

package/extension/icon-48.png ADDED Viewed

Binary file

package/extension/manifest.json ADDED Viewed

@@ -0,0 +1,37 @@
+{
+  "manifest_version": 3,
+  "name": "Ghost Bridge",
+  "version": "0.2.0",
+  "description": "Zero-restart Chrome debugger bridge for Claude MCP, optimized for no-sourcemap production debugging.",
+  "permissions": [
+    "debugger",
+    "activeTab",
+    "scripting",
+    "storage",
+    "tabs",
+    "offscreen"
+  ],
+  "host_permissions": [
+    "ws://localhost/*",
+    "ws://127.0.0.1/*"
+  ],
+  "action": {
+    "default_title": "Ghost Bridge",
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "icon-16.png",
+      "32": "icon-32.png",
+      "48": "icon-48.png",
+      "128": "icon-128.png"
+    }
+  },
+  "icons": {
+    "16": "icon-16.png",
+    "32": "icon-32.png",
+    "48": "icon-48.png",
+    "128": "icon-128.png"
+  },
+  "background": {
+    "service_worker": "background.js"
+  }
+}

package/extension/offscreen.html ADDED Viewed

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Ghost Bridge Offscreen</title>
+</head>
+<body>
+  <script src="offscreen.js"></script>
+</body>
+</html>

package/extension/offscreen.js ADDED Viewed

@@ -0,0 +1,175 @@
+// Offscreen document 用于维持 WebSocket 长连接
+// 不受 MV3 service worker 暂停的影响
+let ws = null
+let reconnectTimer = null
+let config = {
+  basePort: 33333,
+  token: '',
+  maxPortRetries: 10,
+}
+function log(msg) {
+  console.log(`[ghost-bridge offscreen] ${msg}`)
+  // 转发日志到 service worker
+  chrome.runtime.sendMessage({ type: 'log', msg }).catch(() => {})
+}
+function getMonthlyToken() {
+  const now = new Date()
+  const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0, 0)
+  return String(firstDayOfMonth.getTime())
+}
+// 连接到服务器
+function connect(portIndex = 0, isNewRound = false) {
+  if (portIndex >= config.maxPortRetries) {
+    log(`扫描完毕，未找到服务，2秒后重试...`)
+    reconnectTimer = setTimeout(() => connect(0, true), 2000)
+    chrome.runtime.sendMessage({ type: 'status', status: 'not_found' }).catch(() => {})
+    return
+  }
+  const port = config.basePort + portIndex
+  const url = new URL(`ws://localhost:${port}`)
+  url.searchParams.set('token', config.token)
+  if (portIndex === 0 && isNewRound) {
+    log(`开始扫描端口 ${config.basePort}-${config.basePort + config.maxPortRetries - 1}`)
+  }
+  log(`尝试连接端口 ${port}...`)
+  chrome.runtime.sendMessage({
+    type: 'status',
+    status: 'scanning',
+    currentPort: port,
+  }).catch(() => {})
+  ws = new WebSocket(url.toString())
+  ws.binaryType = 'blob' // 明确设置
+  const connectionTimeout = setTimeout(() => {
+    if (ws && ws.readyState === WebSocket.CONNECTING) {
+      ws.close()
+    }
+  }, 2000) // 增加到 2 秒
+  let identityVerified = false
+  ws.onopen = () => {
+    clearTimeout(connectionTimeout)
+    log(`WebSocket 已连接端口 ${port}，等待身份验证...`)
+  }
+  ws.onmessage = async (event) => {
+    try {
+      // 处理 Blob 类型的消息
+      let data = event.data
+      if (data instanceof Blob) {
+        data = await data.text()
+      }
+      const msg = JSON.parse(data)
+      if (msg.type === 'identity') {
+        if (msg.service === 'ghost-bridge' && msg.token === config.token) {
+          identityVerified = true
+          log(`✅ 已连接到 ghost-bridge 服务 (端口 ${port})`)
+          chrome.runtime.sendMessage({
+            type: 'status',
+            status: 'connected',
+            port: port,
+          }).catch(() => {})
+        } else {
+          log(`身份验证失败，尝试下一个端口...`)
+          ws.close()
+          setTimeout(() => connect(portIndex + 1), 50)
+        }
+        return
+      }
+      // 转发命令到 service worker
+      if (identityVerified && msg.id) {
+        chrome.runtime.sendMessage({ type: 'command', data: msg }).catch(() => {})
+      }
+    } catch (e) {
+      log(`解析消息失败：${e.message}`)
+    }
+  }
+  ws.onclose = (event) => {
+    clearTimeout(connectionTimeout)
+    if (!identityVerified) {
+      // 连接失败，尝试下一个端口
+      setTimeout(() => connect(portIndex + 1), 50)
+      return
+    }
+    // 连接断开，重试
+    log('连接断开，尝试重连...')
+    chrome.runtime.sendMessage({ type: 'status', status: 'disconnected' }).catch(() => {})
+    reconnectTimer = setTimeout(() => connect(0, true), 1000)
+  }
+  ws.onerror = () => {
+    clearTimeout(connectionTimeout)
+  }
+}
+// 发送消息到服务器
+function sendToServer(data) {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(data))
+    return true
+  }
+  return false
+}
+// 断开连接
+function disconnect() {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = null
+  }
+  if (ws) {
+    ws.close()
+    ws = null
+  }
+  log('已断开连接')
+}
+// 监听来自 service worker 的消息
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'connect') {
+    config.basePort = message.basePort || 33333
+    config.token = message.token || getMonthlyToken()
+    config.maxPortRetries = message.maxPortRetries || 10
+    disconnect()
+    connect(0, true)
+    sendResponse({ ok: true })
+    return true
+  }
+  if (message.type === 'disconnect') {
+    disconnect()
+    sendResponse({ ok: true })
+    return true
+  }
+  if (message.type === 'send') {
+    const ok = sendToServer(message.data)
+    sendResponse({ ok })
+    return true
+  }
+  if (message.type === 'getStatus') {
+    sendResponse({
+      connected: ws && ws.readyState === WebSocket.OPEN,
+    })
+    return true
+  }
+  return false
+})
+log('Offscreen document 已加载')

package/extension/popup.html ADDED Viewed

@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      width: 280px;
+      padding: 16px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #1a1a2e;
+      color: #eee;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 16px;
+    }
+    .header img {
+      width: 32px;
+      height: 32px;
+    }
+    .header h1 {
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .status-card {
+      background: #16213e;
+      border-radius: 8px;
+      padding: 14px;
+      margin-bottom: 12px;
+    }
+    .status-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .status-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .status-dot.connected { background: #34c759; box-shadow: 0 0 8px #34c759; }
+    .status-dot.connecting { background: #ff9f0a; animation: pulse 1s infinite; }
+    .status-dot.disconnected { background: #666; }
+    .status-dot.error { background: #ff3b30; }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.4; }
+    }
+    .status-text {
+      font-size: 14px;
+      font-weight: 500;
+    }
+    .status-detail {
+      font-size: 12px;
+      color: #888;
+      margin-top: 8px;
+      padding-left: 20px;
+    }
+    .config-section {
+      background: #16213e;
+      border-radius: 8px;
+      padding: 14px;
+      margin-bottom: 12px;
+    }
+    .config-label {
+      font-size: 12px;
+      color: #888;
+      margin-bottom: 6px;
+    }
+    .config-input {
+      width: 100%;
+      padding: 8px 10px;
+      border: 1px solid #333;
+      border-radius: 6px;
+      background: #0f0f23;
+      color: #eee;
+      font-size: 13px;
+      outline: none;
+    }
+    .config-input:focus {
+      border-color: #4a9eff;
+    }
+    .btn-row {
+      display: flex;
+      gap: 8px;
+    }
+    .btn {
+      flex: 1;
+      padding: 10px;
+      border: none;
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .btn-primary {
+      background: #4a9eff;
+      color: #fff;
+    }
+    .btn-primary:hover {
+      background: #3a8eef;
+    }
+    .btn-primary:disabled {
+      background: #333;
+      cursor: not-allowed;
+    }
+    .btn-secondary {
+      background: #333;
+      color: #ccc;
+    }
+    .btn-secondary:hover {
+      background: #444;
+    }
+    .scan-info {
+      font-size: 11px;
+      color: #666;
+      text-align: center;
+      margin-top: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <img src="icon-32.png" alt="Ghost Bridge">
+    <h1>Ghost Bridge</h1>
+  </div>
+  <div class="status-card">
+    <div class="status-row">
+      <div class="status-dot disconnected" id="statusDot"></div>
+      <span class="status-text" id="statusText">检查连接状态...</span>
+    </div>
+    <div class="status-detail" id="statusDetail"></div>
+  </div>
+  <div class="btn-row">
+    <button class="btn btn-primary" id="connectBtn">连接</button>
+    <button class="btn btn-secondary" id="disconnectBtn">断开</button>
+  </div>
+  <div class="scan-info" id="scanInfo"></div>
+  <script src="popup.js"></script>
+</body>
+</html>

package/extension/popup.js ADDED Viewed

@@ -0,0 +1,165 @@
+// popup.js - Ghost Bridge 弹窗逻辑
+const statusDot = document.getElementById('statusDot')
+const statusText = document.getElementById('statusText')
+const statusDetail = document.getElementById('statusDetail')
+const connectBtn = document.getElementById('connectBtn')
+const disconnectBtn = document.getElementById('disconnectBtn')
+const scanInfo = document.getElementById('scanInfo')
+// 状态稳定性控制：防止闪烁
+let lastStableStatus = null
+let pendingStatus = null
+let statusChangeTimer = null
+const STATUS_DEBOUNCE_MS = 300 // 状态变化需要持续 300ms 才生效
+// 状态映射
+const STATUS_MAP = {
+  connected: {
+    dotClass: 'connected',
+    text: '✅ 已连接',
+  },
+  connecting: {
+    dotClass: 'connecting',
+    text: '🔍 正在扫描...',
+  },
+  verifying: {
+    dotClass: 'connecting',
+    text: '🔐 验证身份...',
+  },
+  scanning: {
+    dotClass: 'connecting',
+    text: '📡 搜索服务...',
+  },
+  not_found: {
+    dotClass: 'disconnected',
+    text: '🔴 未找到服务',
+  },
+  disconnected: {
+    dotClass: 'disconnected',
+    text: '未连接',
+  },
+  error: {
+    dotClass: 'error',
+    text: '连接失败',
+  },
+}
+// 实际执行 UI 更新
+function renderUI(state) {
+  const { status, port, scanRound, enabled, currentPort, basePort } = state
+  const config = STATUS_MAP[status] || STATUS_MAP.disconnected
+  statusDot.className = `status-dot ${config.dotClass}`
+  statusText.textContent = config.text
+  // 状态详情
+  if (status === 'connected' && port) {
+    statusDetail.textContent = `端口 ${port} · WebSocket 已建立`
+  } else if ((status === 'connecting' || status === 'verifying' || status === 'scanning') && currentPort) {
+    const roundText = scanRound > 0 ? `（第 ${scanRound + 1} 轮）` : ''
+    statusDetail.textContent = `正在扫描 ${basePort}-${basePort + 9}${roundText}`
+  } else if (status === 'not_found') {
+    statusDetail.textContent = '请确保 Claude Code 已启动'
+  } else {
+    statusDetail.textContent = ''
+  }
+  // 按钮状态
+  connectBtn.textContent = enabled ? '重新连接' : '连接'
+  connectBtn.disabled = false
+  // 扫描轮次提示
+  if ((status === 'connecting' || status === 'scanning') && scanRound > 2) {
+    scanInfo.textContent = `已扫描 ${scanRound} 轮，请确保 Claude Code 已启动`
+    scanInfo.style.color = '#ff9f0a'
+  } else {
+    scanInfo.textContent = ''
+  }
+}
+// 更新 UI 状态（带防抖，防止闪烁）
+function updateUI(state) {
+  const newStatus = state.status
+  // 如果是首次加载或状态相同，直接更新
+  if (lastStableStatus === null || newStatus === lastStableStatus) {
+    lastStableStatus = newStatus
+    pendingStatus = null
+    if (statusChangeTimer) {
+      clearTimeout(statusChangeTimer)
+      statusChangeTimer = null
+    }
+    renderUI(state)
+    return
+  }
+  // 状态变化：从 connected 变为其他状态时需要防抖
+  // 防止短暂的状态波动导致 UI 闪烁
+  if (lastStableStatus === 'connected' && newStatus !== 'connected') {
+    // 需要持续一段时间才确认断开
+    if (pendingStatus !== newStatus) {
+      pendingStatus = newStatus
+      if (statusChangeTimer) clearTimeout(statusChangeTimer)
+      statusChangeTimer = setTimeout(() => {
+        lastStableStatus = pendingStatus
+        pendingStatus = null
+        statusChangeTimer = null
+        renderUI(state)
+      }, STATUS_DEBOUNCE_MS)
+    }
+    // 暂不更新 UI，等待确认
+    return
+  }
+  // 其他状态变化（如从 scanning 到 connected）立即更新
+  lastStableStatus = newStatus
+  pendingStatus = null
+  if (statusChangeTimer) {
+    clearTimeout(statusChangeTimer)
+    statusChangeTimer = null
+  }
+  renderUI(state)
+}
+// 从 background 获取状态
+async function fetchStatus() {
+  try {
+    const response = await chrome.runtime.sendMessage({ type: 'getStatus' })
+    if (response) {
+      updateUI(response)
+    }
+  } catch (e) {
+    console.error('获取状态失败:', e)
+  }
+}
+// 启用连接（自动扫描端口）
+connectBtn.addEventListener('click', async () => {
+  try {
+    await chrome.runtime.sendMessage({ type: 'connect' })
+    setTimeout(fetchStatus, 100)
+  } catch (e) {
+    console.error('连接失败:', e)
+  }
+})
+// 断开连接
+disconnectBtn.addEventListener('click', async () => {
+  try {
+    await chrome.runtime.sendMessage({ type: 'disconnect' })
+    setTimeout(fetchStatus, 100)
+  } catch (e) {
+    console.error('断开失败:', e)
+  }
+})
+// 初始加载
+fetchStatus()
+// 监听 background 主动推送的状态变化
+chrome.runtime.onMessage.addListener((message) => {
+  if (message.type === 'statusUpdate') {
+    updateUI(message.state)
+  }
+})

package/package.json ADDED Viewed

@@ -0,0 +1,29 @@
+{
+  "name": "ghost-bridge",
+  "version": "0.2.0",
+  "private": false,
+  "type": "module",
+  "description": "Ghost Bridge: Zero-restart Chrome debugger bridge for Claude MCP. Includes CLI for easy setup.",
+  "bin": {
+    "ghost-bridge": "./dist/cli.js"
+  },
+  "main": "./dist/server.js",
+  "files": [
+    "dist/",
+    "extension/"
+  ],
+  "scripts": {
+    "start": "node dist/server.js",
+    "build": "node scripts/build.js",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@modelcontextprotocol/sdk": "^1.5.0",
+    "chalk": "^5.3.0",
+    "commander": "^11.0.0",
+    "esbuild": "^0.27.3",
+    "fs-extra": "^11.1.1",
+    "js-beautify": "^1.14.11",
+    "ws": "^8.14.2"
+  }
+}