chrome-ai-bridge 2.3.9 → 2.3.10

package/build/extension/debug-logger.mjs

@@ -0,0 +1,148 @@
+/**
+ * DebugLogger - Chrome拡張機能デバッグ用ログ管理クラス
+ *
+ * カテゴリ:
+ * - ws: WebSocket接続関連
+ * - cdp: Chrome DevTools Protocol関連
+ * - tab: タブ操作関連
+ * - relay: リレーサーバー関連
+ * - error: エラー
+ */
+
+class DebugLogger {
+  constructor() {
+    this.logs = [];
+    this.maxLogs = 500;
+    this.enabled = true;
+  }
+
+  /**
+   * ログエントリを追加
+   * @param {string} category - ログカテゴリ ('ws', 'cdp', 'tab', 'relay', 'error')
+   * @param {string} message - ログメッセージ
+   * @param {any} data - 追加データ（オプション）
+   */
+  log(category, message, data = null) {
+    if (!this.enabled) return;
+
+    const entry = {
+      ts: new Date().toISOString(),
+      category,
+      message,
+      data: data !== null ? this._safeStringify(data) : null
+    };
+
+    this.logs.push(entry);
+
+    // 最大件数を超えたら古いログを削除
+    if (this.logs.length > this.maxLogs) {
+      this.logs.shift();
+    }
+
+    // コンソールにも出力
+    const prefix = `[${category.toUpperCase()}]`;
+    if (data !== null) {
+      console.log(prefix, message, data);
+    } else {
+      console.log(prefix, message);
+    }
+  }
+
+  /**
+   * エラーログを追加（ショートカット）
+   * @param {string} message - エラーメッセージ
+   * @param {any} error - エラーオブジェクト
+   */
+  error(message, error = null) {
+    const errorData = error instanceof Error
+      ? { name: error.name, message: error.message, stack: error.stack }
+      : error;
+    this.log('error', message, errorData);
+  }
+
+  /**
+   * ログを取得
+   * @param {string|null} filter - カテゴリでフィルタ（nullで全件）
+   * @param {number} limit - 取得件数（デフォルト: 100）
+   * @returns {Array} ログエントリの配列
+   */
+  getLogs(filter = null, limit = 100) {
+    let result = filter
+      ? this.logs.filter(l => l.category === filter)
+      : this.logs;
+
+    // 最新のログから返す
+    return result.slice(-limit);
+  }
+
+  /**
+   * ログをクリア
+   */
+  clear() {
+    this.logs = [];
+    console.log('[DEBUG] Logs cleared');
+  }
+
+  /**
+   * ログを有効/無効にする
+   * @param {boolean} enabled
+   */
+  setEnabled(enabled) {
+    this.enabled = enabled;
+    console.log('[DEBUG] Logger', enabled ? 'enabled' : 'disabled');
+  }
+
+  /**
+   * 安全なJSON変換（循環参照対策）
+   * @param {any} obj
+   * @returns {any}
+   */
+  _safeStringify(obj) {
+    if (obj === null || obj === undefined) return obj;
+    if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean') {
+      return obj;
+    }
+
+    try {
+      const seen = new WeakSet();
+      return JSON.parse(JSON.stringify(obj, (key, value) => {
+        if (typeof value === 'object' && value !== null) {
+          if (seen.has(value)) {
+            return '[Circular]';
+          }
+          seen.add(value);
+        }
+        // WebSocketなど大きなオブジェクトは省略
+        if (value instanceof WebSocket) {
+          return `[WebSocket: ${value.readyState}]`;
+        }
+        return value;
+      }));
+    } catch (e) {
+      return String(obj);
+    }
+  }
+
+  /**
+   * 統計情報を取得
+   * @returns {Object}
+   */
+  getStats() {
+    const stats = {
+      total: this.logs.length,
+      byCategory: {}
+    };
+
+    for (const log of this.logs) {
+      stats.byCategory[log.category] = (stats.byCategory[log.category] || 0) + 1;
+    }
+
+    return stats;
+  }
+}
+
+// シングルトンインスタンスをエクスポート
+export const debugLogger = new DebugLogger();
+
+// デフォルトエクスポート
+export default debugLogger;

package/build/extension/icons/icon.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4285F4"/>
+      <stop offset="100%" style="stop-color:#7C3AED"/>
+    </linearGradient>
+  </defs>
+  <!-- Background circle -->
+  <circle cx="64" cy="64" r="60" fill="url(#grad)"/>
+  <!-- Bridge shape - two nodes connected -->
+  <circle cx="36" cy="64" r="16" fill="white" opacity="0.95"/>
+  <circle cx="92" cy="64" r="16" fill="white" opacity="0.95"/>
+  <!-- Connection line -->
+  <rect x="36" y="58" width="56" height="12" fill="white" opacity="0.95" rx="6"/>
+  <!-- AI sparkle on left -->
+  <path d="M36 52 L38 56 L42 56 L39 59 L40 64 L36 61 L32 64 L33 59 L30 56 L34 56 Z" fill="#4285F4"/>
+  <!-- Chrome dot on right -->
+  <circle cx="92" cy="64" r="6" fill="#7C3AED"/>
+</svg>

package/build/extension/manifest.json

@@ -0,0 +1,28 @@
+{
+  "manifest_version": 3,
+  "name": "chrome-ai-bridge Extension",
+  "version": "2.0.23",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAqDLiSB+b/gbnQ4zWRP65jnd27KmzpjJyR1JAQIjCD/dNORzTgk6+G0TjYEDZLIDceKHzGJudqnwq4q9g3T1eJ0SECZNXnaoE00WkgXfAUSQn6cmmXR3aQGFky/zbCmxnkRa0vYupxszlhw0yrlSZrIJd/weWF75Byh0zJfZ84kqDDhaj7TlB5laHICnoSLmPTif4mQcUW9oOKmAJPriPw4CWATKZsrQ4X46djxefSmfbqYfb9rttAqJVst40gO0Gsl6GOGxMHMds5Cl9GELc0dI3Gpobw07hQldZb8TeyilI/SnOaeS3HPtrp+KyEgRu8SgRdlrvuq6DeEZsP+kK7wIDAQAB",
+  "description": "Bridge between Chrome tabs and chrome-ai-bridge MCP server",
+  "permissions": ["debugger", "activeTab", "tabs", "storage", "alarms"],
+  "host_permissions": ["<all_urls>"],
+  "background": {
+    "service_worker": "background.mjs",
+    "type": "module"
+  },
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  },
+  "action": {
+    "default_title": "chrome-ai-bridge",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png",
+      "48": "icons/icon-48.png"
+    }
+  },
+  "options_page": "ui/connect.html"
+}

package/build/extension/relay-server.ts

@@ -0,0 +1,505 @@
+/**
+ * RelayServer - WebSocket server for Extension communication
+ */
+
+import WebSocket, { WebSocketServer } from 'ws';
+import { EventEmitter } from 'events';
+import crypto from 'crypto';
+import http from 'http';
+import fs from 'fs';
+
+// デバッグログをファイルに出力
+const DEBUG_LOG_PATH = '/tmp/relay-server-debug.log';
+function debugLog(...args: any[]) {
+  const timestamp = new Date().toISOString();
+  const message = `[${timestamp}] ${args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ')}\n`;
+  fs.appendFileSync(DEBUG_LOG_PATH, message);
+}
+
+export interface RelayServerOptions {
+  port?: number; // 0 for auto-assign
+  host?: string;
+  token?: string; // Authentication token
+  sessionId?: string;
+}
+
+export interface CDPCommand {
+  id: number;
+  method: string;
+  params?: any;
+}
+
+export interface CDPEvent {
+  method: string;
+  params?: any;
+}
+
+export class RelayServer extends EventEmitter {
+  private wss: WebSocketServer | null = null;
+  private ws: WebSocket | null = null; // Single connection (1 tab per server)
+  private port: number = 0;
+  private host: string;
+  private token: string;
+  private sessionId: string;
+  private instanceId: string;
+  private startedAt: number;
+  private tabId: number | null = null;
+  private ready: boolean = false;
+  private nextId = 1;
+  private pending = new Map<number, {
+    resolve: (value: any) => void;
+    reject: (err: Error) => void;
+    method: string;
+    startedAt: number;
+  }>();
+  private discoveryServer: http.Server | null = null;
+  private discoveryPort: number | null = null;
+  private keepAliveTimer: ReturnType<typeof setInterval> | null = null;
+
+  constructor(options: RelayServerOptions = {}) {
+    super();
+    this.host = options.host || '127.0.0.1';
+    this.token = options.token || this.generateToken();
+    this.sessionId = options.sessionId || this.generateSessionId();
+    this.instanceId = crypto.randomUUID();
+    this.startedAt = Date.now();
+    this.port = options.port || 0;
+  }
+
+  /**
+   * Start WebSocket server
+   */
+  async start(): Promise<number> {
+    return new Promise((resolve, reject) => {
+      this.wss = new WebSocketServer({
+        host: this.host,
+        port: this.port
+      });
+
+      this.wss.on('listening', () => {
+        const address = this.wss!.address() as WebSocket.AddressInfo;
+        this.port = address.port;
+        debugLog(`[RelayServer] Listening on ws://${this.host}:${this.port}`);
+        resolve(this.port);
+      });
+
+      this.wss.on('error', (error) => {
+        debugLog('[RelayServer] Server error:', error);
+        reject(error);
+      });
+
+      this.wss.on('connection', (ws, req) => {
+        this.handleConnection(ws, req);
+      });
+    });
+  }
+
+  /**
+   * Handle WebSocket connection from Extension
+   */
+  private handleConnection(ws: WebSocket, req: any) {
+    debugLog('[RelayServer] New connection from Extension');
+
+    // Validate token
+    const url = new URL(req.url || '', `ws://${this.host}`);
+    const clientToken = url.searchParams.get('token');
+    const clientSessionId = url.searchParams.get('sid');
+
+    if (clientToken !== this.token) {
+      debugLog('[RelayServer] Invalid token');
+      ws.close(1008, 'Invalid token');
+      return;
+    }
+    if (clientSessionId && clientSessionId !== this.sessionId) {
+      debugLog('[RelayServer] Invalid session id', {expected: this.sessionId, received: clientSessionId});
+      ws.close(1008, 'Invalid session id');
+      return;
+    }
+
+    // Only allow one connection
+    if (this.ws) {
+      debugLog('[RelayServer] Connection already exists');
+      ws.close(1008, 'Connection already exists');
+      return;
+    }
+
+    this.ws = ws;
+    this.startKeepAlive();
+
+    ws.on('message', (data) => {
+      this.handleMessage(data.toString());
+    });
+
+    // Guard: only update state if this socket is still the current one.
+    // Prevents a stale socket's close event from corrupting a newer connection.
+    ws.on('close', () => {
+      if (this.ws !== ws) {
+        debugLog('[RelayServer] Stale socket closed (ignored — already replaced)');
+        return;
+      }
+      debugLog('[RelayServer] Extension disconnected');
+      this.stopKeepAlive();
+      this.rejectPendingRequests(
+        new Error('RELAY_DISCONNECTED: Extension socket closed before request completion'),
+      );
+      this.ws = null;
+      this.ready = false;
+      this.emit('disconnected');
+    });
+
+    ws.on('error', (error) => {
+      debugLog('[RelayServer] WebSocket error:', error);
+    });
+
+    debugLog('[RelayServer] Extension connected');
+  }
+
+  private rejectPendingRequests(error: Error): void {
+    if (this.pending.size === 0) return;
+    const pendingEntries = Array.from(this.pending.entries());
+    this.pending.clear();
+    for (const [id, pending] of pendingEntries) {
+      debugLog('[RelayServer] Rejecting pending request', {
+        id,
+        method: pending.method,
+        startedAt: pending.startedAt,
+        reason: error.message,
+      });
+      pending.reject(error);
+    }
+  }
+
+  /**
+   * Handle message from Extension
+   */
+  private handleMessage(data: string) {
+    try {
+      const message = JSON.parse(data);
+
+      if (typeof message.id === 'number' && (message.result !== undefined || message.error !== undefined)) {
+        const pending = this.pending.get(message.id);
+        if (pending) {
+          this.pending.delete(message.id);
+          if (message.error) {
+            const error =
+              typeof message.error === 'string'
+                ? new Error(message.error)
+                : new Error(message.error.message || 'Unknown error');
+            pending.reject(error);
+          } else {
+            pending.resolve(message.result);
+          }
+          return;
+        }
+
+        if (message.error) {
+          const error =
+            typeof message.error === 'string'
+              ? message.error
+              : message.error.message || 'Unknown error';
+          this.emit('cdp-error', { id: message.id, error });
+        } else {
+          this.emit('cdp-result', { id: message.id, result: message.result });
+        }
+        return;
+      }
+
+      if (message?.method === 'forwardCDPEvent' && message.params) {
+        this.emit('cdp-event', {
+          method: message.params.method,
+          params: message.params.params,
+          sessionId: message.params.sessionId,
+        });
+        return;
+      }
+
+      switch (message.type) {
+        case 'ready':
+          this.tabId = message.tabId;
+          this.ready = true;
+          debugLog(`[RelayServer] Connection ready for tab ${this.tabId}`);
+          this.emit('ready', this.tabId);
+          break;
+        case 'pong':
+          debugLog('[RelayServer] Received keep-alive pong');
+          break;
+
+        case 'forwardCDPResult':
+          this.emit('cdp-result', { id: message.id, result: message.result });
+          break;
+
+        case 'forwardCDPError':
+          this.emit('cdp-error', { id: message.id, error: message.error });
+          break;
+
+        case 'forwardCDPEvent':
+          this.emit('cdp-event', {
+            method: message.method,
+            params: message.params
+          });
+          break;
+
+        case 'detached':
+          debugLog(`[RelayServer] Tab ${message.tabId} detached: ${message.reason}`);
+          this.emit('detached', message.reason);
+          break;
+
+        default:
+          debugLog('[RelayServer] Unknown message type:', message.type);
+      }
+    } catch (error) {
+      debugLog('[RelayServer] Failed to parse message:', error);
+    }
+  }
+
+  /**
+   * Send CDP command to Extension
+   */
+  sendCDPCommand(id: number, method: string, params?: any): void {
+    if (!this.ws || !this.ready) {
+      throw new Error('Extension not connected or not ready');
+    }
+
+    this.ws.send(JSON.stringify({
+      type: 'forwardCDPCommand',
+      id,
+      method,
+      params
+    }));
+  }
+
+  sendMessage(message: any): void {
+    if (!this.ws || !this.ready) {
+      throw new Error(
+        `Extension not connected or not ready (connected=${Boolean(this.ws)}, ready=${this.ready})`,
+      );
+    }
+    if (this.ws.readyState !== WebSocket.OPEN) {
+      throw new Error('WebSocket not open');
+    }
+    this.ws.send(JSON.stringify(message));
+  }
+
+  async sendRequest(method: string, params?: any, timeoutMs = 30000): Promise<any> {
+    if (!this.ws || !this.ready) {
+      throw new Error(
+        `Extension not connected or not ready (method=${method}, connected=${Boolean(this.ws)}, ready=${this.ready})`,
+      );
+    }
+    if (this.ws.readyState !== WebSocket.OPEN) {
+      throw new Error('WebSocket not open');
+    }
+    const id = this.nextId++;
+    const payload = {id, method, params};
+    const startedAt = Date.now();
+    const response = new Promise<any>((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        this.pending.delete(id);
+        reject(new Error(`RELAY_REQUEST_TIMEOUT: method=${method} timeoutMs=${timeoutMs}`));
+      }, timeoutMs);
+      timeoutId.unref();
+      this.pending.set(id, {
+        resolve: (value: any) => {
+          clearTimeout(timeoutId);
+          debugLog(`[RelayServer] Request success: ${method}`, {id, elapsedMs: Date.now() - startedAt});
+          resolve(value);
+        },
+        reject: (err: Error) => {
+          clearTimeout(timeoutId);
+          debugLog(`[RelayServer] Request failed: ${method}`, {id, elapsedMs: Date.now() - startedAt, error: err.message});
+          reject(err);
+        },
+        method,
+        startedAt,
+      });
+    });
+    try {
+      this.ws.send(JSON.stringify(payload));
+      debugLog(`[RelayServer] Request sent: ${method}`, {id});
+    } catch (error) {
+      this.pending.delete(id);
+      throw error;
+    }
+    return response;
+  }
+
+  /**
+   * Start simple discovery HTTP server for extension to find relay URL.
+   * Extension polls this endpoint when user clicks the extension icon.
+   */
+  async startDiscoveryServer(options: {
+    tabUrl?: string;
+    tabId?: number;
+    newTab?: boolean;
+    allowTabTakeover?: boolean;
+  } = {}): Promise<number | null> {
+    const ports = [38765, 38766, 38767, 38768, 38769, 38770, 38771, 38772, 38773, 38774, 38775];
+    const wsUrl = this.getConnectionURL();
+
+    for (const port of ports) {
+      const started = await new Promise<boolean>((resolve) => {
+        const server = http.createServer(async (req, res) => {
+          res.setHeader('Access-Control-Allow-Origin', '*');
+
+          if (req.method === 'GET' && req.url === '/relay-info') {
+            res.setHeader('Content-Type', 'application/json');
+            res.end(JSON.stringify({
+              wsUrl,
+              tabUrl: options.tabUrl || null,
+              tabId: options.tabId ?? null,
+              newTab: Boolean(options.newTab),
+              allowTabTakeover: Boolean(options.allowTabTakeover),
+              sessionId: this.sessionId,
+              startedAt: this.startedAt,
+              instanceId: this.instanceId,
+              expiresAt: Date.now() + 60000,
+            }));
+            return;
+          }
+
+          if (req.method === 'POST' && req.url === '/reload-extension') {
+            res.setHeader('Content-Type', 'application/json');
+            if (!this.ws || !this.ready) {
+              res.statusCode = 503;
+              res.end(JSON.stringify({ error: 'Extension not connected' }));
+              return;
+            }
+            try {
+              await this.sendRequest('reloadExtension');
+              res.end(JSON.stringify({ success: true }));
+            } catch (err: any) {
+              // Extension reloads and drops connection - this is expected
+              res.end(JSON.stringify({ success: true, note: 'Extension reloading' }));
+            }
+            return;
+          }
+
+          res.statusCode = 404;
+          res.end('Not Found');
+        });
+
+        server.on('error', (error: any) => {
+          if (error?.code === 'EADDRINUSE') {
+            resolve(false);
+            return;
+          }
+          debugLog('[RelayServer] Discovery server error:', error);
+          resolve(false);
+        });
+
+        server.listen(port, this.host, () => {
+          this.discoveryServer = server;
+          this.discoveryPort = port;
+          debugLog(`[RelayServer] Discovery available on http://${this.host}:${port}/relay-info`);
+          resolve(true);
+        });
+      });
+
+      if (started) {
+        return port;
+      }
+    }
+
+    debugLog('[RelayServer] Could not start discovery server on any port');
+    return null;
+  }
+
+  /**
+   * Stop server
+   */
+  async stop(): Promise<void> {
+    this.stopKeepAlive();
+
+    if (this.ws) {
+      try {
+        this.ws.close();
+      } catch {
+        // ignore close errors
+      }
+      this.ws = null;
+    }
+    this.ready = false;
+    this.tabId = null;
+
+    this.rejectPendingRequests(
+      new Error('RELAY_STOPPED: Relay stopped before request completion'),
+    );
+
+    if (this.discoveryServer) {
+      this.discoveryServer.close();
+      this.discoveryServer = null;
+      this.discoveryPort = null;
+    }
+
+    if (this.wss) {
+      return new Promise((resolve) => {
+        this.wss!.close(() => {
+          this.wss = null;
+          debugLog('[RelayServer] Server stopped');
+          resolve();
+        });
+      });
+    }
+  }
+
+  /**
+   * Start keep-alive ping to prevent Service Worker from sleeping
+   */
+  private startKeepAlive(): void {
+    this.stopKeepAlive();
+    this.keepAliveTimer = setInterval(() => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        this.ws.send(JSON.stringify({ type: 'ping' }));
+        debugLog('[RelayServer] Sent keep-alive ping');
+      }
+    }, 30000); // 30 seconds
+    debugLog('[RelayServer] Keep-alive started');
+  }
+
+  /**
+   * Stop keep-alive ping
+   */
+  private stopKeepAlive(): void {
+    if (this.keepAliveTimer) {
+      clearInterval(this.keepAliveTimer);
+      this.keepAliveTimer = null;
+      debugLog('[RelayServer] Keep-alive stopped');
+    }
+  }
+
+  /**
+   * Generate random token
+   */
+  private generateToken(): string {
+    return crypto.randomBytes(32).toString('hex');
+  }
+
+  getPort(): number {
+    return this.port;
+  }
+
+  getToken(): string {
+    return this.token;
+  }
+
+  getTabId(): number | null {
+    return this.tabId;
+  }
+
+  isReady(): boolean {
+    return this.ready;
+  }
+
+
+  getConnectionURL(): string {
+    return `ws://${this.host}:${this.port}?token=${this.token}&sid=${encodeURIComponent(this.sessionId)}`;
+  }
+
+  getSessionId(): string {
+    return this.sessionId;
+  }
+
+  private generateSessionId(): string {
+    return crypto.randomBytes(16).toString('hex');
+  }
+}