dsh-site-bridge 0.5.2 → 0.6.0

package/extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "default_locale": "en",
   "name": "__MSG_appName__",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "__MSG_appDesc__",
   "minimum_chrome_version": "116",
   "permissions": [

package/extension/popup.html

@@ -94,6 +94,23 @@
       button.link:hover:not(:disabled) { color: #7e98ff; background: none; }
 
       .target-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
+      .tabs-list {
+        display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow-y: auto;
+        margin-top: 8px; scrollbar-width: thin; scrollbar-color: #3a4150 transparent;
+      }
+      .tabs-list::-webkit-scrollbar { width: 6px; }
+      .tabs-list::-webkit-scrollbar-thumb { background: #3a4150; border-radius: 3px; }
+      .tabs-list::-webkit-scrollbar-track { background: transparent; }
+      .tab-item {
+        display: flex; align-items: center; justify-content: space-between; gap: 8px;
+        padding: 6px 8px; background: #15181e; border: 1px solid var(--line);
+        border-radius: 7px; cursor: pointer; min-height: 44px;
+      }
+      .tab-item:hover { border-color: #3a4150; }
+      .tab-item.active { border-color: var(--accent); background: #1a1f2c; }
+      .tab-item-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
+      .tab-item-title { font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .tab-item-url { color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
       .capture-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
       .capture-row button { padding: 5px 9px; font-size: 11.5px; }
       select {
@@ -148,12 +165,9 @@
 
       <div class="target empty" id="target-block">
         <div class="target-text">
-          <div class="target-title" id="target-title" data-i18n="targetNoneTitle">Вкладка не подключена</div>
-          <div class="target-url" id="target-url" data-i18n="targetNoneUrl">Откройте нужную страницу и подключите её</div>
+          <div class="target-title" data-i18n="targetNoneTitle">Вкладка не подключена</div>
+          <div class="target-url" data-i18n="targetNoneUrl">Откройте нужную страницу и подключите её</div>
         </div>
-        <button class="icon" id="release" hidden data-i18n-title="disconnectTab" title="Отключить вкладку">
-          <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 2 L10 10 M10 2 L2 10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
-        </button>
       </div>
 
       <button class="primary" id="claim" data-i18n="connectTab">Подключить эту вкладку</button>
@@ -161,10 +175,7 @@
 
       <button class="primary" id="claim-more" hidden data-i18n="attachAnother">Подключить ещё вкладку</button>
 
-      <div class="capture-row" id="tabs-row" hidden>
-        <span class="muted" data-i18n="tabsLabel">Вкладки</span>
-        <select id="tabs-select"></select>
-      </div>
+      <div class="tabs-list" id="tabs-list" hidden></div>
 
       <div class="capture-row">
         <span class="muted" id="captured">0</span>

package/extension/popup.js

@@ -59,7 +59,6 @@ function render(status) {
   const dot = $('dot')
   const text = $('connection-text')
   const claim = $('claim')
-  const release = $('release')
   const capture = $('capture')
   const target = $('target-block')
 
@@ -93,35 +92,48 @@ function render(status) {
     text.textContent = t('statusNotConfigured')
   }
 
-  target.classList.toggle('empty', !hasTarget)
-  $('target-title').textContent = hasTarget ? status.target.title || status.target.url : t('targetNoneTitle')
-  $('target-url').textContent = hasTarget ? String(status.target.url || '') : t('targetNoneUrl')
-
-  // Several attached tabs: a compact switcher, nothing else changes.
+  // One block per attached tab: title, address and its own detach cross. The
+  // list scrolls after three blocks so the popup keeps its height.
   const targets = Array.isArray(status.targets) ? status.targets : []
-  const tabsRow = $('tabs-row')
-  const tabsSelect = $('tabs-select')
-  const selfAttached = selfTabId != null && targets.some((item) => item.id === selfTabId)
-  $('claim-more').hidden = !hasTarget || selfAttached
-  if (targets.length > 1) {
-    tabsRow.hidden = false
-    tabsSelect.textContent = ''
-    for (const item of targets) {
-      const option = document.createElement('option')
-      option.value = String(item.id)
-      option.textContent = item.title || item.url || `#${item.id}`
-      option.selected = item.id === status.activeTabId
-      tabsSelect.appendChild(option)
-    }
-  } else {
-    tabsRow.hidden = true
+  const activeId = status.activeTabId ?? status.target?.id ?? null
+  target.classList.toggle('empty', targets.length === 0)
+  target.hidden = targets.length > 0
+
+  const list = $('tabs-list')
+  list.hidden = targets.length === 0
+  list.textContent = ''
+  for (const item of targets) {
+    const row = document.createElement('div')
+    row.className = item.id === activeId ? 'tab-item active' : 'tab-item'
+    row.dataset.id = String(item.id)
+    row.title = item.url || ''
+
+    const body = document.createElement('div')
+    body.className = 'tab-item-text'
+    const title = document.createElement('div')
+    title.className = 'tab-item-title'
+    title.textContent = item.title || item.url || `#${item.id}`
+    const address = document.createElement('div')
+    address.className = 'tab-item-url'
+    address.textContent = item.url || ''
+    body.append(title, address)
+
+    const remove = document.createElement('button')
+    remove.className = 'icon'
+    remove.dataset.remove = String(item.id)
+    remove.title = t('disconnectTab')
+    remove.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M2 2 L10 10 M10 2 L2 10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>'
+
+    row.append(body, remove)
+    list.append(row)
   }
 
   // Nothing to claim once a tab is bound: the action would be a no-op.
-  claim.hidden = hasTarget
-  claim.disabled = !connected || hasTarget
-  claim.textContent = hasTarget ? t('tabConnected') : t('connectTab')
-  release.hidden = !hasTarget
+  const selfAttached = selfTabId != null && targets.some((item) => item.id === selfTabId)
+  claim.hidden = targets.length > 0
+  claim.disabled = !connected || targets.length > 0
+  claim.textContent = t('connectTab')
+  $('claim-more').hidden = targets.length === 0 || selfAttached
 
   const pick = $('pick')
   pick.classList.toggle('active', status.picking === true)
@@ -239,16 +251,33 @@ $('import-file').addEventListener('change', async (event) => {
   }
 })
 
-$('claim').addEventListener('click', async () => {
-  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
-  if (!tab?.id) return
-  const result = await send({ type: 'claim', tabId: tab.id })
-  if (!result?.ok) {
-    setNote(t('claimFailed', [String(result?.error ?? t('claimFailedUnknown'))]), true)
+async function attachCurrentTab() {
+  let tabId = null
+  try {
+    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
+    tabId = tab?.id ?? null
+  } catch {
+    tabId = null
+  }
+  if (tabId == null) {
+    setNote(t('claimFailed', [t('claimFailedUnknown')]), true)
+    return
+  }
+  try {
+    const result = await send({ type: 'claim', tabId })
+    if (!result?.ok) {
+      setNote(t('claimFailed', [String(result?.error ?? t('claimFailedUnknown'))]), true)
+      return
+    }
+    setNote('')
+  } catch (error) {
+    setNote(t('claimFailed', [String(error?.message ?? error)]), true)
     return
   }
   await refresh()
-})
+}
+
+$('claim').addEventListener('click', attachCurrentTab)
 
 $('capture').addEventListener('click', async () => {
   const status = await send({ type: 'status' })
@@ -256,8 +285,17 @@ $('capture').addEventListener('click', async () => {
   await refresh()
 })
 
-$('release').addEventListener('click', async () => {
-  await send({ type: 'release' })
+$('tabs-list').addEventListener('click', async (event) => {
+  const remove = event.target.closest('[data-remove]')
+  if (remove) {
+    event.stopPropagation()
+    await send({ type: 'release', tabId: Number(remove.dataset.remove) })
+    await refresh()
+    return
+  }
+  const row = event.target.closest('.tab-item')
+  if (!row || row.classList.contains('active')) return
+  await send({ type: 'use', tabId: Number(row.dataset.id) })
   await refresh()
 })
 
@@ -277,17 +315,8 @@ $('pick').addEventListener('click', async () => {
   await refresh()
 })
 
-$('claim-more').addEventListener('click', async () => {
-  const result = await send({ type: 'claim' })
-  if (!result?.ok && result?.error) setNote(String(result.error), true)
-  await refresh()
-})
+$('claim-more').addEventListener('click', attachCurrentTab)
+
 
-$('tabs-select').addEventListener('change', async (event) => {
-  const tabId = Number(event.target.value)
-  if (!Number.isFinite(tabId)) return
-  await send({ type: 'use', tabId })
-  await refresh()
-})
 
 void init()

package/extension/sw.js

@@ -272,11 +272,19 @@ async function attach(tabId) {
 }
 
 async function claimTab(tabId) {
-  const tab = await chrome.tabs.get(tabId)
+  // Without an explicit id, claim whatever tab the user is looking at, so a
+  // caller that only knows "this tab" cannot silently pass NaN.
+  let id = Number(tabId)
+  if (!Number.isFinite(id)) {
+    const [active] = await chrome.tabs.query({ active: true, lastFocusedWindow: true })
+    id = active?.id
+  }
+  if (!Number.isFinite(id)) throw new Error('no tab to claim: pass tabId or open a page first')
+  const tab = await chrome.tabs.get(id)
   if (!/^https?:|^file:/.test(tab.url ?? '')) {
     throw new Error(`cannot drive ${tab.url || 'this tab'}: only http(s) and file:// pages are supported`)
   }
-  return attach(tabId)
+  return attach(id)
 }
 
 chrome.debugger.onDetach.addListener((source, reason) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-site-bridge",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Chrome/Edge MV3 bridge for DeepSeek Harness: capture page markup (DOM, styles, selectors) and BFF traffic (xhr/fetch with headers and bodies) into a workspace snapshot bundle, drive the page with trusted CDP input, and verify injected scripts. Authorization never leaves the browser and is never written to disk.",
   "icon": "./icon.svg",
   "type": "module",

package/tools/preview-popup.mjs

@@ -21,6 +21,17 @@ const chromePath = process.env.CHROME_PATH ?? 'C:\\Program Files\\Google\\Chrome
 const sleep = (ms) => new Promise((done) => setTimeout(done, ms))
 
 const statuses = {
+  many: {
+    ok: true, configured: true, connected: true, port: 47321, recording: true, captured: 7, selfTabId: 9,
+    activeTabId: 1,
+    target: { id: 1, title: 'Example Store — Products', url: 'https://shop.example/products' },
+    targets: [
+      { id: 1, title: 'Example Store — Products', url: 'https://shop.example/products', recording: true, captured: 7 },
+      { id: 2, title: 'Example Store — Cart', url: 'https://shop.example/cart', recording: false, captured: 0 },
+      { id: 3, title: 'Example Store — Checkout', url: 'https://shop.example/checkout', recording: false, captured: 0 },
+      { id: 4, title: 'Example Store — Orders', url: 'https://shop.example/orders', recording: false, captured: 0 }
+    ]
+  },
   'connected-one': {
     ok: true, configured: true, connected: true, port: 47321, recording: false, captured: 0, selfTabId: 1,
     activeTabId: 1,