@jobshimo/browser-link 0.4.1 → 0.5.1

package/dist/extension/background.js

@@ -96,82 +96,82 @@ function attachDebuggerListener(state) {
     };
     state.debuggerListener = listener;
 }
-const SNAPSHOT_JS = `
-(() => {
-  function isVisible(el) {
-    if (!(el instanceof HTMLElement)) return true;
-    const style = getComputedStyle(el);
-    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') return false;
-    if (el.offsetParent === null && style.position !== 'fixed') return false;
-    return true;
-  }
-  function shortText(el) {
-    const t = (el.innerText || el.textContent || '').trim();
-    return t.length > 120 ? t.slice(0, 120) + '...' : t;
-  }
-  function safeCss(s) {
-    return s.replace(/"/g, '\\\\"');
-  }
-  function genSelector(el) {
-    if (el.id && !/^[\\d]/.test(el.id) && !/\\s/.test(el.id)) {
-      try { if (document.querySelectorAll('#' + CSS.escape(el.id)).length === 1) return '#' + CSS.escape(el.id); } catch (_) {}
-    }
-    const tid = el.getAttribute('data-testid');
-    if (tid) return '[data-testid="' + safeCss(tid) + '"]';
-    const al = el.getAttribute('aria-label');
-    if (al && al.length < 60) return el.tagName.toLowerCase() + '[aria-label="' + safeCss(al) + '"]';
-    const name = el.getAttribute('name');
-    if (name && (el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'TEXTAREA')) {
-      return el.tagName.toLowerCase() + '[name="' + safeCss(name) + '"]';
-    }
-    const parts = [];
-    let cur = el;
-    while (cur && cur.nodeType === 1 && cur !== document.body && parts.length < 6) {
-      let part = cur.tagName.toLowerCase();
-      const parent = cur.parentElement;
-      if (parent) {
-        const sib = Array.from(parent.children).filter(s => s.tagName === cur.tagName);
-        if (sib.length > 1) {
-          part += ':nth-of-type(' + (sib.indexOf(cur) + 1) + ')';
-        }
-      }
-      parts.unshift(part);
-      cur = parent;
-    }
-    return parts.join(' > ');
-  }
-  const sel = 'a[href], button, input, select, textarea, [role=button], [role=link], [role=checkbox], [role=tab], [role=menuitem], [contenteditable=true]';
-  const interactive = [];
-  document.querySelectorAll(sel).forEach((el) => {
-    if (!isVisible(el)) return;
-    interactive.push({
-      tag: el.tagName.toLowerCase(),
-      role: el.getAttribute('role') || el.tagName.toLowerCase(),
-      text: shortText(el),
-      value: 'value' in el ? (el.value || '') : '',
-      placeholder: el.getAttribute('placeholder') || '',
-      aria_label: el.getAttribute('aria-label') || '',
-      name: el.getAttribute('name') || '',
-      type: el.getAttribute('type') || '',
-      href: el.getAttribute('href') || '',
-      disabled: 'disabled' in el ? !!el.disabled : false,
-      selector: genSelector(el),
-    });
-  });
-  const headings = [];
-  document.querySelectorAll('h1, h2, h3').forEach((h) => {
-    if (!isVisible(h)) return;
-    headings.push({ level: h.tagName, text: shortText(h) });
-  });
-  const visibleText = (document.body && document.body.innerText) ? document.body.innerText.slice(0, 4000) : '';
-  return {
-    title: document.title,
-    url: location.href,
-    headings: headings.slice(0, 30),
-    text: visibleText,
-    interactive: interactive.slice(0, 120),
-  };
-})()
+const SNAPSHOT_JS = `
+(() => {
+  function isVisible(el) {
+    if (!(el instanceof HTMLElement)) return true;
+    const style = getComputedStyle(el);
+    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') return false;
+    if (el.offsetParent === null && style.position !== 'fixed') return false;
+    return true;
+  }
+  function shortText(el) {
+    const t = (el.innerText || el.textContent || '').trim();
+    return t.length > 120 ? t.slice(0, 120) + '...' : t;
+  }
+  function safeCss(s) {
+    return s.replace(/"/g, '\\\\"');
+  }
+  function genSelector(el) {
+    if (el.id && !/^[\\d]/.test(el.id) && !/\\s/.test(el.id)) {
+      try { if (document.querySelectorAll('#' + CSS.escape(el.id)).length === 1) return '#' + CSS.escape(el.id); } catch (_) {}
+    }
+    const tid = el.getAttribute('data-testid');
+    if (tid) return '[data-testid="' + safeCss(tid) + '"]';
+    const al = el.getAttribute('aria-label');
+    if (al && al.length < 60) return el.tagName.toLowerCase() + '[aria-label="' + safeCss(al) + '"]';
+    const name = el.getAttribute('name');
+    if (name && (el.tagName === 'INPUT' || el.tagName === 'SELECT' || el.tagName === 'TEXTAREA')) {
+      return el.tagName.toLowerCase() + '[name="' + safeCss(name) + '"]';
+    }
+    const parts = [];
+    let cur = el;
+    while (cur && cur.nodeType === 1 && cur !== document.body && parts.length < 6) {
+      let part = cur.tagName.toLowerCase();
+      const parent = cur.parentElement;
+      if (parent) {
+        const sib = Array.from(parent.children).filter(s => s.tagName === cur.tagName);
+        if (sib.length > 1) {
+          part += ':nth-of-type(' + (sib.indexOf(cur) + 1) + ')';
+        }
+      }
+      parts.unshift(part);
+      cur = parent;
+    }
+    return parts.join(' > ');
+  }
+  const sel = 'a[href], button, input, select, textarea, [role=button], [role=link], [role=checkbox], [role=tab], [role=menuitem], [contenteditable=true]';
+  const interactive = [];
+  document.querySelectorAll(sel).forEach((el) => {
+    if (!isVisible(el)) return;
+    interactive.push({
+      tag: el.tagName.toLowerCase(),
+      role: el.getAttribute('role') || el.tagName.toLowerCase(),
+      text: shortText(el),
+      value: 'value' in el ? (el.value || '') : '',
+      placeholder: el.getAttribute('placeholder') || '',
+      aria_label: el.getAttribute('aria-label') || '',
+      name: el.getAttribute('name') || '',
+      type: el.getAttribute('type') || '',
+      href: el.getAttribute('href') || '',
+      disabled: 'disabled' in el ? !!el.disabled : false,
+      selector: genSelector(el),
+    });
+  });
+  const headings = [];
+  document.querySelectorAll('h1, h2, h3').forEach((h) => {
+    if (!isVisible(h)) return;
+    headings.push({ level: h.tagName, text: shortText(h) });
+  });
+  const visibleText = (document.body && document.body.innerText) ? document.body.innerText.slice(0, 4000) : '';
+  return {
+    title: document.title,
+    url: location.href,
+    headings: headings.slice(0, 30),
+    text: visibleText,
+    interactive: interactive.slice(0, 120),
+  };
+})()
 `;
 async function evaluateInTab(tabId, expression) {
     const result = (await cdp(tabId, 'Runtime.evaluate', {
@@ -255,13 +255,13 @@ async function handleTool(state, msg) {
             }
             case 'click': {
                 const selector = String(p.selector);
-                const expr = `
-          (() => {
-            const el = document.querySelector(${JSON.stringify(selector)});
-            if (!el) return null;
-            el.scrollIntoView({ block: 'center', inline: 'center' });
-            const r = el.getBoundingClientRect();
-            return { x: r.left + r.width / 2, y: r.top + r.height / 2, tag: el.tagName.toLowerCase() };
+                const expr = `
+          (() => {
+            const el = document.querySelector(${JSON.stringify(selector)});
+            if (!el) return null;
+            el.scrollIntoView({ block: 'center', inline: 'center' });
+            const r = el.getBoundingClientRect();
+            return { x: r.left + r.width / 2, y: r.top + r.height / 2, tag: el.tagName.toLowerCase() };
           })()`;
                 const coords = (await evaluateInTab(tabId, expr));
                 if (!coords) {
@@ -302,13 +302,13 @@ async function handleTool(state, msg) {
                 const selector = String(p.selector);
                 const text = String(p.text);
                 const clear = !!p.clear;
-                const focusExpr = `
-          (() => {
-            const el = document.querySelector(${JSON.stringify(selector)});
-            if (!el) return false;
-            el.focus();
-            ${clear ? "if ('value' in el) { el.value = ''; el.dispatchEvent(new Event('input', { bubbles: true })); }" : ''}
-            return true;
+                const focusExpr = `
+          (() => {
+            const el = document.querySelector(${JSON.stringify(selector)});
+            if (!el) return false;
+            el.focus();
+            ${clear ? "if ('value' in el) { el.value = ''; el.dispatchEvent(new Event('input', { bubbles: true })); }" : ''}
+            return true;
           })()`;
                 const focused = await evaluateInTab(tabId, focusExpr);
                 if (!focused) {

package/dist/extension/icons/icon.svg

@@ -1,14 +1,14 @@
-<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0%" stop-color="#3b82f6" />
-      <stop offset="100%" stop-color="#1d4ed8" />
-    </linearGradient>
-  </defs>
-  <rect width="128" height="128" rx="26" fill="url(#bg)" />
-  <g fill="none" stroke="#ffffff" stroke-width="11" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M52 78 L36 78 A22 22 0 0 1 36 34 L52 34" />
-    <path d="M76 34 L92 34 A22 22 0 0 1 92 78 L76 78" />
-    <line x1="44" y1="56" x2="84" y2="56" />
-  </g>
-</svg>
+<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#3b82f6" />
+      <stop offset="100%" stop-color="#1d4ed8" />
+    </linearGradient>
+  </defs>
+  <rect width="128" height="128" rx="26" fill="url(#bg)" />
+  <g fill="none" stroke="#ffffff" stroke-width="11" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M52 78 L36 78 A22 22 0 0 1 36 34 L52 34" />
+    <path d="M76 34 L92 34 A22 22 0 0 1 92 78 L76 78" />
+    <line x1="44" y1="56" x2="84" y2="56" />
+  </g>
+</svg>

package/dist/extension/manifest.json

@@ -1,28 +1,28 @@
-{
-  "manifest_version": 3,
-  "name": "browser-link",
-  "version": "0.1.0",
-  "description": "Bridge between Chrome and an MCP client (Claude Code, OpenCode, …). Per-tab manual activation.",
-  "permissions": ["debugger", "activeTab", "storage", "tabs"],
-  "host_permissions": [],
-  "icons": {
-    "16": "icons/icon-16.png",
-    "32": "icons/icon-32.png",
-    "48": "icons/icon-48.png",
-    "128": "icons/icon-128.png"
-  },
-  "background": {
-    "service_worker": "background.js",
-    "type": "module"
-  },
-  "action": {
-    "default_popup": "popup.html",
-    "default_title": "browser-link",
-    "default_icon": {
-      "16": "icons/icon-16.png",
-      "32": "icons/icon-32.png",
-      "48": "icons/icon-48.png",
-      "128": "icons/icon-128.png"
-    }
-  }
-}
+{
+  "manifest_version": 3,
+  "name": "browser-link",
+  "version": "0.0.1",
+  "description": "Bridge between Chrome and an MCP client (Claude Code). Per-tab manual activation.",
+  "permissions": ["debugger", "activeTab", "storage", "tabs"],
+  "host_permissions": [],
+  "icons": {
+    "16": "icons/icon-16.png",
+    "32": "icons/icon-32.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  },
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_title": "browser-link",
+    "default_icon": {
+      "16": "icons/icon-16.png",
+      "32": "icons/icon-32.png",
+      "48": "icons/icon-48.png",
+      "128": "icons/icon-128.png"
+    }
+  }
+}

package/dist/extension/popup.html

@@ -1,88 +1,88 @@
-<!DOCTYPE html>
-<html lang="es">
-  <head>
-    <meta charset="UTF-8" />
-    <title>browser-link</title>
-    <style>
-      :root {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      }
-      body {
-        margin: 0;
-        padding: 14px;
-        width: 280px;
-        color: #1f2937;
-      }
-      h1 {
-        font-size: 14px;
-        font-weight: 600;
-        margin: 0 0 10px;
-        letter-spacing: 0.3px;
-      }
-      .status {
-        padding: 8px 10px;
-        border-radius: 6px;
-        margin-bottom: 8px;
-        font-size: 12px;
-        line-height: 1.4;
-      }
-      .status.connected {
-        background: #d1fae5;
-        color: #065f46;
-      }
-      .status.disconnected {
-        background: #fef3c7;
-        color: #92400e;
-      }
-      .status.error {
-        background: #fee2e2;
-        color: #991b1b;
-      }
-      .url {
-        font-size: 11px;
-        color: #6b7280;
-        word-break: break-all;
-        margin-bottom: 10px;
-        max-height: 36px;
-        overflow: hidden;
-      }
-      .tab-id {
-        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-        font-weight: 600;
-      }
-      button {
-        width: 100%;
-        padding: 9px 12px;
-        border: none;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 13px;
-        font-weight: 500;
-        transition: opacity 0.15s ease;
-      }
-      button.primary {
-        background: #2563eb;
-        color: white;
-      }
-      button.danger {
-        background: #dc2626;
-        color: white;
-      }
-      button:hover {
-        opacity: 0.9;
-      }
-      button:disabled {
-        background: #9ca3af;
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>browser-link</h1>
-    <div id="status" class="status disconnected">Cargando…</div>
-    <div id="url" class="url"></div>
-    <button id="action" class="primary" disabled>…</button>
-    <script type="module" src="popup.js"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <title>browser-link</title>
+    <style>
+      :root {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      }
+      body {
+        margin: 0;
+        padding: 14px;
+        width: 280px;
+        color: #1f2937;
+      }
+      h1 {
+        font-size: 14px;
+        font-weight: 600;
+        margin: 0 0 10px;
+        letter-spacing: 0.3px;
+      }
+      .status {
+        padding: 8px 10px;
+        border-radius: 6px;
+        margin-bottom: 8px;
+        font-size: 12px;
+        line-height: 1.4;
+      }
+      .status.connected {
+        background: #d1fae5;
+        color: #065f46;
+      }
+      .status.disconnected {
+        background: #fef3c7;
+        color: #92400e;
+      }
+      .status.error {
+        background: #fee2e2;
+        color: #991b1b;
+      }
+      .url {
+        font-size: 11px;
+        color: #6b7280;
+        word-break: break-all;
+        margin-bottom: 10px;
+        max-height: 36px;
+        overflow: hidden;
+      }
+      .tab-id {
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-weight: 600;
+      }
+      button {
+        width: 100%;
+        padding: 9px 12px;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 500;
+        transition: opacity 0.15s ease;
+      }
+      button.primary {
+        background: #2563eb;
+        color: white;
+      }
+      button.danger {
+        background: #dc2626;
+        color: white;
+      }
+      button:hover {
+        opacity: 0.9;
+      }
+      button:disabled {
+        background: #9ca3af;
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>browser-link</h1>
+    <div id="status" class="status disconnected">Cargando…</div>
+    <div id="url" class="url"></div>
+    <button id="action" class="primary" disabled>…</button>
+    <script type="module" src="popup.js"></script>
+  </body>
+</html>

package/dist/map/db.js

@@ -42,34 +42,34 @@ function migrateLegacyDb(targetPath) {
     }
 }
 function runMigrations(db) {
-    db.exec(`
-    CREATE TABLE IF NOT EXISTS apps (
-      id INTEGER PRIMARY KEY,
-      origin TEXT NOT NULL,
-      app_key TEXT NOT NULL,
-      title TEXT,
-      notes TEXT,
-      created_at TEXT NOT NULL,
-      last_seen_at TEXT NOT NULL,
-      UNIQUE(origin, app_key)
-    );
-
-    CREATE TABLE IF NOT EXISTS entries (
-      id INTEGER PRIMARY KEY,
-      app_id INTEGER NOT NULL REFERENCES apps(id) ON DELETE CASCADE,
-      url_pattern TEXT NOT NULL,
-      kind TEXT NOT NULL CHECK (kind IN ('selector', 'flow', 'gotcha')),
-      purpose TEXT NOT NULL,
-      payload TEXT NOT NULL,
-      verified_at TEXT,
-      failed_at TEXT,
-      notes TEXT,
-      created_at TEXT NOT NULL,
-      updated_at TEXT NOT NULL,
-      UNIQUE(app_id, url_pattern, kind, purpose)
-    );
-
-    CREATE INDEX IF NOT EXISTS idx_entries_lookup ON entries(app_id, url_pattern);
+    db.exec(`
+    CREATE TABLE IF NOT EXISTS apps (
+      id INTEGER PRIMARY KEY,
+      origin TEXT NOT NULL,
+      app_key TEXT NOT NULL,
+      title TEXT,
+      notes TEXT,
+      created_at TEXT NOT NULL,
+      last_seen_at TEXT NOT NULL,
+      UNIQUE(origin, app_key)
+    );
+
+    CREATE TABLE IF NOT EXISTS entries (
+      id INTEGER PRIMARY KEY,
+      app_id INTEGER NOT NULL REFERENCES apps(id) ON DELETE CASCADE,
+      url_pattern TEXT NOT NULL,
+      kind TEXT NOT NULL CHECK (kind IN ('selector', 'flow', 'gotcha')),
+      purpose TEXT NOT NULL,
+      payload TEXT NOT NULL,
+      verified_at TEXT,
+      failed_at TEXT,
+      notes TEXT,
+      created_at TEXT NOT NULL,
+      updated_at TEXT NOT NULL,
+      UNIQUE(app_id, url_pattern, kind, purpose)
+    );
+
+    CREATE INDEX IF NOT EXISTS idx_entries_lookup ON entries(app_id, url_pattern);
   `);
 }
 export function closeDb() {

package/dist/map/queries.js

@@ -49,7 +49,7 @@ export function upsertApp(input) {
         return db.prepare('SELECT * FROM apps WHERE id = ?').get(existing.id);
     }
     const info = db
-        .prepare(`INSERT INTO apps (origin, app_key, title, notes, created_at, last_seen_at)
+        .prepare(`INSERT INTO apps (origin, app_key, title, notes, created_at, last_seen_at)
        VALUES (?, ?, ?, ?, ?, ?)`)
         .run(input.origin, app_key, input.title ?? null, input.notes ?? null, ts, ts);
     return db.prepare('SELECT * FROM apps WHERE id = ?').get(info.lastInsertRowid);
@@ -67,8 +67,8 @@ export function saveEntry(input) {
         .prepare(`SELECT * FROM entries WHERE app_id = ? AND url_pattern = ? AND kind = ? AND purpose = ?`)
         .get(app.id, input.url_pattern, input.kind, input.purpose);
     if (existing) {
-        db.prepare(`UPDATE entries
-       SET payload = ?, notes = COALESCE(?, notes), verified_at = ?, failed_at = NULL, updated_at = ?
+        db.prepare(`UPDATE entries
+       SET payload = ?, notes = COALESCE(?, notes), verified_at = ?, failed_at = NULL, updated_at = ?
        WHERE id = ?`).run(payloadJson, input.notes ?? null, ts, ts, existing.id);
         const updated = db
             .prepare('SELECT * FROM entries WHERE id = ?')
@@ -76,7 +76,7 @@ export function saveEntry(input) {
         return { app, entry: hydrate(updated) };
     }
     const info = db
-        .prepare(`INSERT INTO entries (app_id, url_pattern, kind, purpose, payload, verified_at, notes, created_at, updated_at)
+        .prepare(`INSERT INTO entries (app_id, url_pattern, kind, purpose, payload, verified_at, notes, created_at, updated_at)
        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`)
         .run(app.id, input.url_pattern, input.kind, input.purpose, payloadJson, ts, input.notes ?? null, ts, ts);
     const inserted = db