vcorp-chrome 2.2.1 → 2.3.5

package/extension/content.js

@@ -702,6 +702,36 @@
     }
   };
 
+  // ---------- 穿透 shadow 的命中检测 ----------
+  //
+  // document.elementFromPoint 碰到 shadow 只返回最外层宿主，Node.contains 又不跨
+  // shadow 边界。两个一起用，shadow 里的控件永远「被自己的宿主遮挡」——微前端
+  // （wujie 把整个子应用放进 <wujie-app> 的 shadow root）上每个按钮都点不了。
+  // 不能简单放行「命中宿主」：宿主里盖着弹层时那才是真遮挡，所以要逐层钻到底。
+  // closed root 读不到、停在宿主上：快照本来也进不去，那里头的元素拿不到 ref。
+  function deepElementFromPoint(x, y) {
+    let hit = document.elementFromPoint(x, y);
+    while (hit?.shadowRoot) {
+      const inner = hit.shadowRoot.elementFromPoint(x, y);
+      if (!inner || inner === hit) break;
+      hit = inner;
+    }
+    return hit;
+  }
+
+  // 沿渲染树往上走（assignedSlot 优先）：a 是否在渲染上包含 n。
+  // 只走 parentNode 的话，shadow 里的容器「不包含」塞进它 <slot> 的内容。
+  function flatContains(a, n) {
+    for (; n; n = n.assignedSlot || n.parentNode || n.host) if (n === a) return true;
+    return false;
+  }
+
+  // 点这个坐标会打到别的东西上时返回那个东西，否则 null
+  function occluderAt(el, x, y) {
+    const hit = deepElementFromPoint(x, y);
+    return hit && !flatContains(el, hit) && !flatContains(hit, el) ? hit : null;
+  }
+
   function realClick(el) {
     const r = el.getBoundingClientRect();
     const x = r.left + r.width / 2;
@@ -710,8 +740,8 @@
     // 真实点击的 event.target 是光标下**最内层**的元素，事件再往上冒泡。
     // 直接派发在容器上，target 就成了容器本身——组件按 event.target 分支的逻辑
     // 会走进另一条路。react-select 的 Control 就读 event.target.tagName。
-    const inner = document.elementFromPoint(x, y);
-    if (inner && el.contains(inner)) el = inner;
+    const inner = deepElementFromPoint(x, y);
+    if (inner && flatContains(el, inner)) el = inner;
     const base = { bubbles: true, cancelable: true, composed: true, view: window, clientX: x, clientY: y, button: 0 };
     const ptr = { ...base, pointerId: 1, pointerType: 'mouse', isPrimary: true };
 
@@ -925,15 +955,14 @@
 
     // 虚拟光标（mark.js，和本文件同一个 isolated world）：坐标就地递过去，
     // 零消息往返。L1 和 L2 都走 locate，所以两条路的光标一致。
-    // **必须在下面的 elementFromPoint 之前调**——坐标落在驾驶舱底下时它要
+    // **必须在下面的遮挡检测之前调**——坐标落在驾驶舱底下时它要
     // 先让路（pointer-events:none 同步生效），否则遮挡检测会把我们自己的
     // 面板当成遮挡物，L2 的真实点击更会直接点进面板里。
     window.__hcCursor?.(x, y, ({ click: 'click', type: 'type', select: 'type', key: 'key' })[p.forCmd] || 'aim');
 
     // 遮挡检测和 doClick 保持同一套判断——L2 打的是坐标，遮挡时点中的是遮挡物，
     // 比 L1 更危险，更不能放过
-    const top = document.elementFromPoint(x, y);
-    if (top && top !== el && !el.contains(top) && !top.contains(el)) {
+    if (occluderAt(el, x, y)) {
       throw fail('NOT_INTERACTABLE', `${p.ref || p.selector} 被其它元素遮挡（可能有弹窗/浮层）。先处理遮挡物。`);
     }
     // 视口外的坐标 CDP 打不中。scrollIntoView 之后仍在视口外，说明它在一个
@@ -1228,8 +1257,7 @@
     el.scrollIntoView({ block: 'center', behavior: 'instant' });
     // 被遮挡检测：点下去要是命中别的元素，多半有弹层盖着，这时候点了就是误操作
     const r = el.getBoundingClientRect();
-    const top = document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2);
-    if (top && top !== el && !el.contains(top) && !top.contains(el)) {
+    if (occluderAt(el, r.left + r.width / 2, r.top + r.height / 2)) {
       throw fail('NOT_INTERACTABLE', `${p.ref} 被其它元素遮挡（可能有弹窗/浮层）。先处理遮挡物。`);
     }
     realClick(el);
@@ -1778,10 +1806,15 @@
   async function doUploadUrl(p) {
     let blob;
     try {
-      const res = await fetch(p.url, { credentials: 'omit', cache: 'no-store' });
+      // 到点取消，文件就不会在报错之后才进页面，重试不会传出第二份
+      const signal = p.fetchMs ? AbortSignal.timeout(p.fetchMs) : undefined;
+      const res = await fetch(p.url, { credentials: 'omit', cache: 'no-store', signal });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       blob = await res.blob();
     } catch (e) {
+      if (e?.name === 'TimeoutError') {
+        throw fail('UPLOAD_SLOW', `素材 ${Math.round((p.bytes || 0) / 1048576)}MB 在 ${Math.round(p.fetchMs / 1000)} 秒内没有下载完，已取消，文件没有进页面。压缩后再传，或请用户手动上传。`);
+      }
       throw fail('FETCH_FAILED', `页面里取素材失败：${e.message}`);
     }
     if (p.bytes && blob.size !== p.bytes) throw fail('INTERNAL', `素材大小不对：应为 ${p.bytes}，实际 ${blob.size}`);

package/extension/device.js

@@ -28,6 +28,41 @@ const ID_RE = /^[\w.:-]{1,80}$/;
 
 const err = (code, message, details) => Object.assign(new Error(message), { code, ...(details ? { details } : {}) });
 
+// 一个账号下常有好几个浏览器实例（家里的 Chrome、公司的 Edge、Mac 上的 Brave）。
+// 用户给每个实例起名字来区分；服务器再按浏览器种类和系统画图标。
+// 种类和系统只认下面这几个词，别的一律归到 chromium / 空——它们只决定图标，不决定权限。
+export const BROWSERS = ['chrome', 'edge', 'brave', 'opera', 'chromium'];
+export const PLATFORMS = ['windows', 'macos', 'linux', 'chromeos'];
+const BROWSER_LABEL = { chrome: 'Chrome', edge: 'Edge', brave: 'Brave', opera: 'Opera', chromium: 'Chromium' };
+const PLATFORM_LABEL = { windows: 'Windows', macos: 'macOS', linux: 'Linux', chromeos: 'ChromeOS' };
+export const DEVICE_NAME_MAX = 40;
+
+// brands / platform 来自 navigator.userAgentData，ua 是 navigator.userAgent（老 Chrome 没有前者）
+export function browserIdentity({ brands = [], platform = '', ua = '' } = {}) {
+  const names = (Array.isArray(brands) ? brands : []).map((b) => String(b?.brand || ''));
+  const text = String(ua || '');
+  const seen = (brand, inUa) => names.some((n) => brand.test(n)) || (inUa ? inUa.test(text) : false);
+  const browser = seen(/Microsoft Edge/, /\bEdg(A|iOS)?\//) ? 'edge'
+    : seen(/Brave/) ? 'brave'
+      : seen(/Opera/, /\bOPR\//) ? 'opera'
+        : seen(/Google Chrome/) || (!names.length && /\bChrome\//.test(text)) ? 'chrome'
+          : 'chromium';
+  const p = `${platform || ''} ${text}`;
+  const os = /Windows/i.test(p) ? 'windows'
+    : /Mac/i.test(p) ? 'macos'
+      : /CrOS|Chrome OS/i.test(p) ? 'chromeos'
+        : /Linux|X11/i.test(p) ? 'linux'
+          : '';
+  return { browser, platform: os };
+}
+
+export const defaultDeviceName = ({ browser, platform } = {}) =>
+  [BROWSER_LABEL[browser] || 'Chromium', PLATFORM_LABEL[platform]].filter(Boolean).join(' · ');
+
+export function cleanDeviceName(raw) {
+  return String(raw ?? '').replace(/\s+/g, ' ').replace(/[\x00-\x1f\x7f]/g, '').trim().slice(0, DEVICE_NAME_MAX);
+}
+
 export function cleanDeviceId(raw) {
   const s = String(raw ?? '').trim();
   return ID_RE.test(s) ? s : '';

package/extension/folders.js

@@ -206,6 +206,36 @@ export async function listTree(handle, { path = '', depth = 3, glob = '', folder
   };
 }
 
+// 网页上文档库的悬停提示：现场数第一层有多少文件、多少子文件夹，只回数字，不回名字。
+// 不往下层走：一层一般不到一秒，整棵树可能要很久。隐藏项和 node_modules 跳过，和任务看到的一致。
+const COUNT_MAX = 20000;
+export async function countTop(id) {
+  const row = await get(String(id || ''));
+  if (!row?.handle) return { state: 'missing' };
+  let permission;
+  try { permission = await row.handle.queryPermission({ mode: 'read' }); } catch { permission = 'denied'; }
+  if (permission !== 'granted') return { state: 'locked' };
+  let files = 0;
+  let readable = 0;
+  let dirs = 0;
+  let more = false;
+  try {
+    for await (const [name, h] of row.handle.entries()) {
+      if (files + dirs >= COUNT_MAX) { more = true; break; }
+      if (skipEntry(name)) continue;
+      if (h.kind === 'directory') dirs++;
+      else {
+        files++;
+        if (fileAllowed(name)) readable++;
+      }
+    }
+  } catch (e) {
+    const mapped = mapFsError(e);
+    return { state: mapped.code === 'FOLDER_LOCKED' ? 'locked' : mapped.code === 'NOT_FOUND' ? 'gone' : 'error' };
+  }
+  return { state: 'ok', files, readable, dirs, more };
+}
+
 export async function readFile(handle, rel) {
   await assertGranted(handle);
   let file;

package/extension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "vcorp-chrome",
-  "version": "2.2.1",
+  "version": "2.3.5",
   "description": "让 AI agent 操控你已登录的 Chrome。基于花叔的 huashu-chrome（MIT）修改。",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAq6xRqEwG4yTuHRG1Zah3j//T3B72XnazyZ+9fOCa5P4bBLPmNBN7YAGL5WnjtPVJefXT9r2Ol0qvNztayDG3dMjK6AZoWccgKa5rhxcvWgFUjanXtmBBQ0qgYwNhuEJSkdinLLtyUg6YmK7Mn72NWpfa/NfqNHdK5AHslvvtJ50iQAYmabl2Nd3vOJ9DxtLBt8a2DfoGPWizgEB3+gkqm2PB8LywwwoiGKd7acr1wZEWmWK9/s0YWdzIstjlvk5AO5XFn6EtEzW8tAAOwBka9239pcyj0kEogWctHLJn7p9VFru38r+I1USyGn6u9XQ68n9edWddxBYokETCqEMT9QIDAQAB",
   "minimum_chrome_version": "116",

package/extension/mount.html

@@ -40,7 +40,7 @@
 <main>
   <div>
     <h1>挂载本地文件夹</h1>
-    <p>选一个文件夹之后，配对的网站可以申请读取里面的文档。每次申请你都会在通知里看到文件夹的名字。只读，不会改你的文件。</p>
+    <p>选一个文件夹之后，配对的网站可以申请读取里面的文档。挂上就是把它分享给你的任务：开了「自动允许新任务」时按需直接读，没开时每次都会问你。只读，不会改你的文件。</p>
   </div>
   <section>
     <button class="btn" id="pick" type="button">选择文件夹</button>

package/extension/panel.html

@@ -83,6 +83,8 @@
   .row { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
   .msg { font-size: 12px; margin-top: 6px; }
   .msg.bad { color: var(--bad); }
+  .msg.ok { color: var(--ok); }
+  .msg.warn { color: var(--warn); }
   .confirm { border: 1px solid var(--warn); border-radius: 9px; padding: 9px 10px; margin-top: 8px; }
   .confirm b { word-break: break-all; }
   .sites { display: flex; flex-direction: column; margin-top: 4px; }
@@ -141,6 +143,10 @@
       <div class="confirm">
         <div>要把这个浏览器交给 <b id="claimOrigin"></b> 上的账号 <b id="claimAccount"></b> 吗？</div>
         <div class="muted" style="margin-top:4px">配对码如果是别人发给你的，点取消。</div>
+        <label class="field"><span>给这个浏览器起个名字</span>
+          <input type="text" id="claimName" maxlength="40" autocomplete="off" spellcheck="false" />
+          <span class="muted">同一个账号连了好几个浏览器时，网页上靠它区分，比如「家里 Mac」「公司 Edge」</span>
+        </label>
         <div class="row"><button class="btn" id="claimYes">确认连接</button><button class="btn ghost" id="claimNo">取消</button></div>
       </div>
     </div>
@@ -177,6 +183,13 @@
     <div id="cloudOn" hidden>
       <div class="light"><span class="dot" id="cloudDot"></span>
         <div><div class="name" id="cloudName"></div><div class="sub" id="cloudSub"></div></div></div>
+      <label class="field"><span class="lab">这个浏览器的名字</span>
+        <span class="row" style="margin-top:0">
+          <input type="text" id="deviceName" maxlength="40" autocomplete="off" spellcheck="false" style="flex:1" />
+          <button class="btn ghost" id="deviceNameSave" type="button">保存</button>
+        </span>
+      </label>
+      <div class="msg" id="deviceNameMsg" role="status" aria-live="polite" hidden></div>
       <div id="cloudTasks"></div>
       <div class="lab" style="margin-top:10px">允许它使用的网站</div>
       <div class="sites" id="cloudSites"></div>
@@ -257,12 +270,12 @@
     </details>
     <details>
       <summary>自动允许和免确认</summary>
-      <div>「自动允许新任务」：新任务，以及它一开始就要去的网站，会直接放行。任务开始之后再加的网站，还有本地文件夹，仍然要你逐个点头。</div>
+      <div>「自动允许新任务」：新任务，以及它一开始就要去的网站，会直接放行。已挂载的本地文件夹也直接让任务读。任务开始之后再加的网站，仍然要你逐个点头。</div>
       <div>「对外动作不再逐条确认」：发消息、投递、发帖之前不再问你。扫码、验证码仍然要你本人来。付款一律不做。</div>
     </details>
     <details>
       <summary>本地文件夹</summary>
-      <div>挂载之后，配对的网站可以申请读取里面的文档（Markdown、文本、PDF、Word、CSV、JSON、HTML）。只读，不会改你的文件。每次真正读取之前还会再问你一次。浏览器重启后如果显示需要恢复，点「恢复访问」。</div>
+      <div>挂载之后，配对的网站可以申请读取里面的文档（Markdown、文本、PDF、Word、Excel、PowerPoint、CSV、JSON、HTML、图片）。只读，不会改你的文件。开了「自动允许新任务」时任务按需直接读；没开时每个任务读之前会问你。浏览器重启后如果显示需要恢复，点「恢复访问」。</div>
     </details>
     <details>
       <summary>桌面应用</summary>

package/extension/panel.js

@@ -258,9 +258,9 @@ const CLOUD_STATE = {
   off: ['', '未连接'],
 };
 const LOG_TEXT = {
-  paired: '配对', unpaired: '解除配对', approved: '批准任务', denied: '拒绝任务', ended: '任务结束',
+  paired: '配对', unpaired: '解除配对', renamed: '改名为', approved: '批准任务', denied: '拒绝任务', ended: '任务结束',
   sites_on: '允许了新网站', sites_off: '拒绝了新网站', sites_timeout: '新网站没回应',
-  folders_on: '允许了本地文件夹', folders_off: '拒绝了本地文件夹', folders_timeout: '本地文件夹没回应',
+  folders_on: '允许了本地文件夹', folders_auto: '自动放行本地文件夹', folders_off: '拒绝了本地文件夹', folders_timeout: '本地文件夹没回应',
   apps_on: '允许了桌面应用', apps_off: '拒绝了桌面应用', apps_timeout: '桌面应用没回应',
   desk_confirm: '同意了桌面动作', desk_declined: '没同意桌面动作', desktop_on: '启用桌面能力', desktop_off: '停用桌面能力',
   desktop_reload: '为启用桌面能力重载扩展', desktop_fail: '桌面能力没启用成功：',
@@ -345,8 +345,12 @@ function renderCloud(s) {
   if (s.claim) {
     $('claimOrigin').textContent = new URL(s.claim.origin).host;
     $('claimAccount').textContent = `「${s.claim.account || '（未命名）'}」`;
+    if (!$('claimName').value) $('claimName').value = s.claim.name;
   }
   if (!on) { syncAlert(); return; }
+  if (document.activeElement !== $('deviceName')) $('deviceName').value = s.cfg.name;
+  // 改名时没连上：连上那一刻 hello 已把名字写进服务器，提示跟着变
+  if (namePending === s.cfg.name && s.status?.state === 'online') nameSaved(s);
 
   const [cls, word] = CLOUD_STATE[s.status?.state] || CLOUD_STATE.off;
   $('cloudDot').className = `dot ${cls}`;
@@ -424,11 +428,47 @@ $('pairGo').onclick = async () => {
 $('pairCode').onkeydown = (e) => { if (e.key === 'Enter') $('pairGo').click(); };
 $('claimYes').onclick = async () => {
   $('claimYes').disabled = true;
-  await cloudCall('confirm');
+  await cloudCall('confirm', { name: $('claimName').value });
   $('claimYes').disabled = false;
   $('pairCode').value = '';
+  $('claimName').value = '';
 };
-$('claimNo').onclick = () => cloudCall('cancelClaim');
+$('claimNo').onclick = () => { $('claimName').value = ''; cloudCall('cancelClaim'); };
+// 改名的结果就写在输入框下面，不弹窗；服务器确认写入才说「已保存」
+let namePending = null;
+let nameMsgTimer = null;
+function nameMsg(cls, text) {
+  clearTimeout(nameMsgTimer);
+  const box = $('deviceNameMsg');
+  box.className = `msg ${cls}`;
+  box.textContent = text;
+  box.hidden = !text;
+}
+function nameSaved(s) {
+  namePending = null;
+  nameMsg('ok', `已保存，${new URL(s.cfg.origin).host} 的「执行设备」里现在显示「${s.cfg.name}」`);
+  nameMsgTimer = setTimeout(() => nameMsg('', ''), 8000);
+}
+$('deviceNameSave').onclick = async () => {
+  const name = $('deviceName').value;
+  $('deviceNameSave').disabled = true;
+  $('deviceName').blur();
+  namePending = null;
+  nameMsg('muted', '保存中…');
+  const r = await cloudCall('rename', { name });
+  $('deviceNameSave').disabled = false;
+  if (!r?.ok) { nameMsg('bad', `没有保存：${r?.error || '扩展没有响应，稍后再试'}`); return; }
+  const host = new URL(r.state.cfg.origin).host;
+  if (r.state.rename === 'saved') nameSaved(r.state);
+  else if (r.state.rename === 'unconfirmed') nameMsg('warn', `已发给 ${host}，但没等到确认。请到它的「执行设备」里看一下名字对不对`);
+  else {
+    namePending = r.state.cfg.name;
+    nameMsg('warn', r.state.status?.state === 'paused'
+      ? `已存到本机。云端已暂停，恢复后会更新到 ${host}`
+      : `已存到本机，还没连上 ${host}，连上后会自动更新`);
+  }
+};
+$('deviceName').onkeydown = (e) => { if (e.key === 'Enter') $('deviceNameSave').click(); };
 $('cloudAuto').onchange = (e) => cloudCall('setAuto', { auto: e.target.checked });
 $('cloudAutoConfirm').onchange = (e) => cloudCall('setAutoConfirm', { autoConfirm: e.target.checked });
 $('cloudPause').onchange = (e) => cloudCall('setPaused', { paused: e.target.checked });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vcorp-chrome",
-  "version": "2.2.1",
+  "version": "2.3.5",
   "description": "让任何 AI agent 操控你自己的 Chrome——带着全部登录态。MCP + Chrome 扩展，Claude Code / Codex / Cursor / Gemini CLI 通用。",
   "type": "module",
   "bin": {