@hanzo/browser-extension 1.7.6 → 1.9.33

package/dist/browser-extension/browser-control.js

@@ -1,683 +0,0 @@
-// src/browser-control.ts
-var BrowserControl = class {
-  constructor() {
-    this.tabFS = /* @__PURE__ */ new Map();
-    this.aiWorkers = /* @__PURE__ */ new Map();
-    this.agents = /* @__PURE__ */ new Map();
-    this.initializeTabFileSystem();
-    this.setupMessageHandlers();
-  }
-  initializeTabFileSystem() {
-    if (typeof chrome === "undefined" || !chrome.tabs) return;
-    chrome.tabs.query({}, (tabs) => {
-      tabs.forEach((tab, index) => {
-        if (tab.id && tab.url) {
-          const path = `/tabs/${index}/${this.sanitizePath(tab.title || "untitled")}`;
-          this.tabFS.set(path, {
-            path,
-            tabId: tab.id,
-            url: tab.url,
-            title: tab.title || "Untitled"
-          });
-        }
-      });
-    });
-    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
-      if (changeInfo.status === "complete") {
-        this.updateTabFS(tab);
-      }
-    });
-    chrome.tabs.onRemoved.addListener((tabId) => {
-      for (const [path, entry] of this.tabFS) {
-        if (entry.tabId === tabId) {
-          this.tabFS.delete(path);
-          break;
-        }
-      }
-    });
-  }
-  sanitizePath(title) {
-    return title.replace(/[^a-zA-Z0-9-_]/g, "_").toLowerCase().substring(0, 60);
-  }
-  updateTabFS(tab) {
-    if (!tab.id || !tab.url) return;
-    const existingEntry = Array.from(this.tabFS.values()).find(
-      (entry) => entry.tabId === tab.id
-    );
-    const path = existingEntry?.path || `/tabs/${this.tabFS.size}/${this.sanitizePath(tab.title || "untitled")}`;
-    this.tabFS.set(path, {
-      path,
-      tabId: tab.id,
-      url: tab.url,
-      title: tab.title || "Untitled"
-    });
-  }
-  // ===========================================================================
-  // FUSE-like Tab Filesystem
-  // ===========================================================================
-  async readTab(path) {
-    const entry = this.tabFS.get(path);
-    if (!entry) throw new Error(`Tab not found: ${path}`);
-    return new Promise((resolve, reject) => {
-      chrome.tabs.sendMessage(entry.tabId, { action: "getContent" }, (response) => {
-        if (chrome.runtime.lastError) {
-          reject(new Error(chrome.runtime.lastError.message));
-        } else {
-          resolve(response?.content || "");
-        }
-      });
-    });
-  }
-  async writeTab(path, content) {
-    const entry = this.tabFS.get(path);
-    if (!entry) throw new Error(`Tab not found: ${path}`);
-    return new Promise((resolve, reject) => {
-      chrome.tabs.sendMessage(entry.tabId, { action: "setContent", content }, (response) => {
-        if (chrome.runtime.lastError) {
-          reject(new Error(chrome.runtime.lastError.message));
-        } else {
-          resolve();
-        }
-      });
-    });
-  }
-  async listTabs() {
-    return Array.from(this.tabFS.keys());
-  }
-  // ===========================================================================
-  // Native Browser Actions
-  // ===========================================================================
-  async click(tabId, selector) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return false;
-        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        el.click();
-        return true;
-      })()
-    `);
-  }
-  async clickAtPoint(tabId, x, y) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.elementFromPoint(${x}, ${y});
-        if (!el) return false;
-        el.dispatchEvent(new MouseEvent('click', { bubbles: true, clientX: ${x}, clientY: ${y} }));
-        return true;
-      })()
-    `);
-  }
-  async doubleClick(tabId, selector) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return false;
-        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        el.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }));
-        return true;
-      })()
-    `);
-  }
-  async type(tabId, selector, text) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return false;
-        el.focus();
-        for (const char of ${JSON.stringify(text)}) {
-          el.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
-          el.dispatchEvent(new KeyboardEvent('keypress', { key: char, bubbles: true }));
-          if ('value' in el) el.value += char;
-          el.dispatchEvent(new InputEvent('input', { data: char, inputType: 'insertText', bubbles: true }));
-          el.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
-        }
-        el.dispatchEvent(new Event('change', { bubbles: true }));
-        return true;
-      })()
-    `);
-  }
-  async fill(tabId, selector, value) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return false;
-        el.focus();
-        const nativeSetter = Object.getOwnPropertyDescriptor(
-          Object.getPrototypeOf(el), 'value'
-        )?.set || Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
-        if (nativeSetter) {
-          nativeSetter.call(el, ${JSON.stringify(value)});
-        } else {
-          el.value = ${JSON.stringify(value)};
-        }
-        el.dispatchEvent(new Event('input', { bubbles: true }));
-        el.dispatchEvent(new Event('change', { bubbles: true }));
-        return true;
-      })()
-    `);
-  }
-  async select(tabId, selector, value) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el || el.tagName !== 'SELECT') return false;
-        el.value = ${JSON.stringify(value)};
-        el.dispatchEvent(new Event('change', { bubbles: true }));
-        return true;
-      })()
-    `);
-  }
-  async check(tabId, selector, checked) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return false;
-        if (el.checked !== ${checked}) el.click();
-        return true;
-      })()
-    `);
-  }
-  async hover(tabId, selector) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return false;
-        el.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
-        el.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
-        return true;
-      })()
-    `);
-  }
-  async focus(tabId, selector) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return false;
-        el.focus();
-        return true;
-      })()
-    `);
-  }
-  async blur(tabId, selector) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return false;
-        el.blur();
-        return true;
-      })()
-    `);
-  }
-  async scroll(tabId, x, y, selector) {
-    if (selector) {
-      return this.executeScript(tabId, `
-        (() => {
-          const el = document.querySelector(${JSON.stringify(selector)});
-          if (!el) return false;
-          el.scrollBy({ left: ${x}, top: ${y}, behavior: 'smooth' });
-          return true;
-        })()
-      `);
-    }
-    return this.executeScript(tabId, `
-      (() => { window.scrollBy({ left: ${x}, top: ${y}, behavior: 'smooth' }); return true; })()
-    `);
-  }
-  async scrollIntoView(tabId, selector) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return false;
-        el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
-        return true;
-      })()
-    `);
-  }
-  async pressKey(tabId, key, modifiers = {}) {
-    return this.executeScript(tabId, `
-      (() => {
-        const opts = {
-          key: ${JSON.stringify(key)},
-          code: ${JSON.stringify(key)},
-          bubbles: true,
-          ctrlKey: ${!!modifiers.ctrl},
-          shiftKey: ${!!modifiers.shift},
-          altKey: ${!!modifiers.alt},
-          metaKey: ${!!modifiers.meta},
-        };
-        document.activeElement.dispatchEvent(new KeyboardEvent('keydown', opts));
-        document.activeElement.dispatchEvent(new KeyboardEvent('keypress', opts));
-        document.activeElement.dispatchEvent(new KeyboardEvent('keyup', opts));
-        return true;
-      })()
-    `);
-  }
-  async drag(tabId, fromSelector, toSelector) {
-    return this.executeScript(tabId, `
-      (() => {
-        const from = document.querySelector(${JSON.stringify(fromSelector)});
-        const to = document.querySelector(${JSON.stringify(toSelector)});
-        if (!from || !to) return false;
-        const fromRect = from.getBoundingClientRect();
-        const toRect = to.getBoundingClientRect();
-        const fromX = fromRect.left + fromRect.width / 2;
-        const fromY = fromRect.top + fromRect.height / 2;
-        const toX = toRect.left + toRect.width / 2;
-        const toY = toRect.top + toRect.height / 2;
-        from.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: fromX, clientY: fromY }));
-        from.dispatchEvent(new MouseEvent('mousemove', { bubbles: true, clientX: toX, clientY: toY }));
-        to.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, clientX: toX, clientY: toY }));
-        to.dispatchEvent(new DragEvent('drop', { bubbles: true }));
-        return true;
-      })()
-    `);
-  }
-  async waitForSelector(tabId, selector, timeoutMs = 1e4) {
-    return this.executeScript(tabId, `
-      new Promise((resolve) => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (el) { resolve(true); return; }
-        const observer = new MutationObserver(() => {
-          if (document.querySelector(${JSON.stringify(selector)})) {
-            observer.disconnect();
-            resolve(true);
-          }
-        });
-        observer.observe(document.body, { childList: true, subtree: true });
-        setTimeout(() => { observer.disconnect(); resolve(false); }, ${timeoutMs});
-      })
-    `);
-  }
-  async waitForNavigation(tabId, timeoutMs = 3e4) {
-    return new Promise((resolve) => {
-      const timer = setTimeout(() => {
-        chrome.tabs.onUpdated.removeListener(listener);
-        resolve(false);
-      }, timeoutMs);
-      const listener = (updatedTabId, changeInfo) => {
-        if (updatedTabId === tabId && changeInfo.status === "complete") {
-          clearTimeout(timer);
-          chrome.tabs.onUpdated.removeListener(listener);
-          resolve(true);
-        }
-      };
-      chrome.tabs.onUpdated.addListener(listener);
-    });
-  }
-  async evaluate(tabId, expression) {
-    return this.executeScript(tabId, expression);
-  }
-  async getElementInfo(tabId, selector) {
-    return this.executeScript(tabId, `
-      (() => {
-        const el = document.querySelector(${JSON.stringify(selector)});
-        if (!el) return null;
-        const rect = el.getBoundingClientRect();
-        const styles = window.getComputedStyle(el);
-        return {
-          tagName: el.tagName.toLowerCase(),
-          id: el.id,
-          className: el.className,
-          textContent: el.textContent?.substring(0, 500),
-          innerText: el.innerText?.substring(0, 500),
-          value: el.value,
-          href: el.href,
-          src: el.src,
-          type: el.type,
-          checked: el.checked,
-          disabled: el.disabled,
-          visible: styles.display !== 'none' && styles.visibility !== 'hidden' && rect.width > 0 && rect.height > 0,
-          rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-          attributes: Object.fromEntries(Array.from(el.attributes).map(a => [a.name, a.value])),
-        };
-      })()
-    `);
-  }
-  async getPageInfo(tabId) {
-    return this.executeScript(tabId, `
-      (() => ({
-        url: location.href,
-        title: document.title,
-        readyState: document.readyState,
-        scrollX: window.scrollX,
-        scrollY: window.scrollY,
-        innerWidth: window.innerWidth,
-        innerHeight: window.innerHeight,
-        documentWidth: document.documentElement.scrollWidth,
-        documentHeight: document.documentElement.scrollHeight,
-        forms: document.forms.length,
-        links: document.links.length,
-        images: document.images.length,
-      }))()
-    `);
-  }
-  async querySelectorAll(tabId, selector) {
-    return this.executeScript(tabId, `
-      (() => Array.from(document.querySelectorAll(${JSON.stringify(selector)})).slice(0, 100).map((el, i) => ({
-        index: i,
-        tagName: el.tagName.toLowerCase(),
-        id: el.id,
-        className: el.className,
-        textContent: el.textContent?.substring(0, 200),
-        visible: el.offsetWidth > 0 && el.offsetHeight > 0,
-      })))()
-    `);
-  }
-  // ===========================================================================
-  // Navigation
-  // ===========================================================================
-  async navigateTo(tabId, url) {
-    chrome.tabs.update(tabId, { url });
-  }
-  async reload(tabId) {
-    chrome.tabs.reload(tabId);
-  }
-  async goBack(tabId) {
-    chrome.tabs.goBack(tabId);
-  }
-  async goForward(tabId) {
-    chrome.tabs.goForward(tabId);
-  }
-  async createTab(url, active = true) {
-    return new Promise((resolve) => {
-      chrome.tabs.create({ url, active }, (tab) => {
-        resolve(tab.id);
-      });
-    });
-  }
-  async closeTab(tabId) {
-    chrome.tabs.remove(tabId);
-  }
-  // ===========================================================================
-  // Screenshots
-  // ===========================================================================
-  async captureScreenshot(tabId, options) {
-    return new Promise((resolve, reject) => {
-      const format = options?.format || "jpeg";
-      const quality = options?.quality || (format === "jpeg" ? 80 : void 0);
-      const captureOpts = { format };
-      if (quality !== void 0) captureOpts.quality = quality;
-      chrome.tabs.captureVisibleTab(captureOpts, (dataUrl) => {
-        if (chrome.runtime.lastError) {
-          reject(new Error(chrome.runtime.lastError.message));
-        } else {
-          resolve(dataUrl);
-        }
-      });
-    });
-  }
-  async captureFullPage(tabId) {
-    const pageInfo = await this.getPageInfo(tabId);
-    return this.captureScreenshot(tabId, { format: "png" });
-  }
-  // ===========================================================================
-  // AI Worker Management
-  // ===========================================================================
-  async launchAIWorker(tabId, modelName) {
-    const worker = new Worker(new URL("./ai-worker.js", import.meta.url), {
-      type: "module"
-    });
-    const agentId = `agent-${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 8)}`;
-    worker.postMessage({ type: "init", payload: { tabId, modelName } });
-    worker.onmessage = (event) => {
-      this.handleAIWorkerMessage(tabId, agentId, event.data);
-    };
-    worker.onerror = (event) => {
-      console.error(`[Hanzo] AI worker error for tab ${tabId}:`, event.message);
-      const agent = this.agents.get(agentId);
-      if (agent) agent.status = "error";
-    };
-    this.aiWorkers.set(tabId, worker);
-    this.agents.set(agentId, {
-      id: agentId,
-      name: modelName,
-      tabId,
-      status: "running",
-      worker
-    });
-    return agentId;
-  }
-  stopAgent(agentId) {
-    const agent = this.agents.get(agentId);
-    if (!agent) return false;
-    agent.worker.terminate();
-    agent.status = "stopped";
-    this.aiWorkers.delete(agent.tabId);
-    this.agents.delete(agentId);
-    return true;
-  }
-  getAgents() {
-    return Array.from(this.agents.values()).map((a) => ({
-      id: a.id,
-      name: a.name,
-      tabId: a.tabId,
-      status: a.status
-    }));
-  }
-  handleAIWorkerMessage(tabId, agentId, data) {
-    switch (data.type) {
-      case "click":
-        this.click(tabId, data.selector);
-        break;
-      case "type":
-        this.type(tabId, data.selector, data.text);
-        break;
-      case "fill":
-        this.fill(tabId, data.selector, data.value);
-        break;
-      case "navigate":
-        this.navigateTo(tabId, data.url);
-        break;
-      case "scroll":
-        this.scroll(tabId, data.x || 0, data.y || 0, data.selector);
-        break;
-      case "hover":
-        this.hover(tabId, data.selector);
-        break;
-      case "select":
-        this.select(tabId, data.selector, data.value);
-        break;
-      case "pressKey":
-        this.pressKey(tabId, data.key, data.modifiers);
-        break;
-      case "waitForSelector":
-        this.waitForSelector(tabId, data.selector, data.timeout).then((found) => {
-          const worker = this.aiWorkers.get(tabId);
-          worker?.postMessage({ type: "waitResult", found });
-        });
-        break;
-      case "evaluate":
-        this.evaluate(tabId, data.expression).then((result) => {
-          const worker = this.aiWorkers.get(tabId);
-          worker?.postMessage({ type: "evalResult", result });
-        });
-        break;
-      case "screenshot":
-        this.captureScreenshot(tabId).then((screenshot) => {
-          const worker = this.aiWorkers.get(tabId);
-          worker?.postMessage({ type: "screenshot", data: screenshot });
-        });
-        break;
-      case "getElementInfo":
-        this.getElementInfo(tabId, data.selector).then((info) => {
-          const worker = this.aiWorkers.get(tabId);
-          worker?.postMessage({ type: "elementInfo", info });
-        });
-        break;
-      case "getPageInfo":
-        this.getPageInfo(tabId).then((info) => {
-          const worker = this.aiWorkers.get(tabId);
-          worker?.postMessage({ type: "pageInfo", info });
-        });
-        break;
-      case "querySelectorAll":
-        this.querySelectorAll(tabId, data.selector).then((elements) => {
-          const worker = this.aiWorkers.get(tabId);
-          worker?.postMessage({ type: "elements", elements });
-        });
-        break;
-      case "done":
-      case "complete": {
-        const agent = this.agents.get(agentId);
-        if (agent) {
-          agent.status = "stopped";
-          agent.worker.terminate();
-          this.aiWorkers.delete(tabId);
-          this.agents.delete(agentId);
-        }
-        break;
-      }
-    }
-  }
-  // ===========================================================================
-  // Cross-tab Communication
-  // ===========================================================================
-  async broadcastToAI(message) {
-    this.aiWorkers.forEach((worker) => {
-      worker.postMessage({ type: "broadcast", message });
-    });
-  }
-  // ===========================================================================
-  // Content Script Message Handler
-  // ===========================================================================
-  setupMessageHandlers() {
-    if (typeof chrome === "undefined" || !chrome.runtime) return;
-    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-      if (request.from === "content" && sender.tab?.id) {
-        this.handleContentMessage(sender.tab.id, request, sendResponse);
-        return true;
-      }
-      if (request.action?.startsWith("browser.")) {
-        this.handleBrowserAction(request, sendResponse);
-        return true;
-      }
-      if (request.action === "listAgents") {
-        sendResponse({ success: true, agents: this.getAgents() });
-        return true;
-      }
-      if (request.action === "stopAgent") {
-        const stopped = this.stopAgent(request.agentId);
-        sendResponse({ success: stopped });
-        return true;
-      }
-      if (request.action === "checkWebGPU") {
-        if (navigator.gpu) {
-          navigator.gpu.requestAdapter().then((adapter) => {
-            sendResponse({
-              available: !!adapter,
-              adapter: adapter?.name || "Unknown GPU"
-            });
-          }).catch(() => {
-            sendResponse({ available: false });
-          });
-        } else {
-          sendResponse({ available: false });
-        }
-        return true;
-      }
-    });
-  }
-  async handleBrowserAction(request, sendResponse) {
-    const tabId = request.tabId;
-    try {
-      switch (request.action) {
-        case "browser.click":
-          sendResponse({ success: await this.click(tabId, request.selector) });
-          break;
-        case "browser.type":
-          sendResponse({ success: await this.type(tabId, request.selector, request.text) });
-          break;
-        case "browser.fill":
-          sendResponse({ success: await this.fill(tabId, request.selector, request.value) });
-          break;
-        case "browser.select":
-          sendResponse({ success: await this.select(tabId, request.selector, request.value) });
-          break;
-        case "browser.scroll":
-          sendResponse({ success: await this.scroll(tabId, request.x, request.y, request.selector) });
-          break;
-        case "browser.hover":
-          sendResponse({ success: await this.hover(tabId, request.selector) });
-          break;
-        case "browser.pressKey":
-          sendResponse({ success: await this.pressKey(tabId, request.key, request.modifiers) });
-          break;
-        case "browser.evaluate":
-          sendResponse({ success: true, result: await this.evaluate(tabId, request.expression) });
-          break;
-        case "browser.screenshot":
-          sendResponse({ success: true, data: await this.captureScreenshot(tabId, request.options) });
-          break;
-        case "browser.navigate":
-          await this.navigateTo(tabId, request.url);
-          sendResponse({ success: true });
-          break;
-        case "browser.waitForSelector":
-          sendResponse({ success: await this.waitForSelector(tabId, request.selector, request.timeout) });
-          break;
-        case "browser.getElementInfo":
-          sendResponse({ success: true, info: await this.getElementInfo(tabId, request.selector) });
-          break;
-        case "browser.getPageInfo":
-          sendResponse({ success: true, info: await this.getPageInfo(tabId) });
-          break;
-        case "browser.querySelectorAll":
-          sendResponse({ success: true, elements: await this.querySelectorAll(tabId, request.selector) });
-          break;
-        default:
-          sendResponse({ success: false, error: `Unknown action: ${request.action}` });
-      }
-    } catch (e) {
-      sendResponse({ success: false, error: e.message });
-    }
-  }
-  handleContentMessage(tabId, request, sendResponse) {
-    const worker = this.aiWorkers.get(tabId);
-    if (worker) {
-      worker.postMessage({ type: "contentMessage", data: request });
-      const responseHandler = (event) => {
-        if (event.data.type === "contentResponse") {
-          sendResponse(event.data.response);
-          worker.removeEventListener("message", responseHandler);
-        }
-      };
-      worker.addEventListener("message", responseHandler);
-      setTimeout(() => {
-        worker.removeEventListener("message", responseHandler);
-      }, 1e4);
-    } else {
-      sendResponse({ error: "No AI worker for this tab" });
-    }
-  }
-  // ===========================================================================
-  // Script Execution Helper
-  // ===========================================================================
-  executeScript(tabId, code) {
-    return new Promise((resolve, reject) => {
-      if (chrome.scripting) {
-        chrome.scripting.executeScript({
-          target: { tabId },
-          func: new Function(`return (${code})`)
-        }, (results) => {
-          if (chrome.runtime.lastError) {
-            reject(new Error(chrome.runtime.lastError.message));
-          } else {
-            resolve(results?.[0]?.result);
-          }
-        });
-      } else {
-        chrome.tabs.executeScript(tabId, { code }, (results) => {
-          if (chrome.runtime.lastError) {
-            reject(new Error(chrome.runtime.lastError.message));
-          } else {
-            resolve(results?.[0]);
-          }
-        });
-      }
-    });
-  }
-};
-export {
-  BrowserControl
-};