vcorp-chrome 1.8.1 → 2.2.0

package/extension/manifest.json

@@ -1,38 +1,41 @@
-{
-  "manifest_version": 3,
-  "name": "vcorp-chrome",
-  "version": "1.8.1",
-  "description": "让 AI agent 操控你已登录的 Chrome。基于花叔的 huashu-chrome（MIT）修改。",
-  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAq6xRqEwG4yTuHRG1Zah3j//T3B72XnazyZ+9fOCa5P4bBLPmNBN7YAGL5WnjtPVJefXT9r2Ol0qvNztayDG3dMjK6AZoWccgKa5rhxcvWgFUjanXtmBBQ0qgYwNhuEJSkdinLLtyUg6YmK7Mn72NWpfa/NfqNHdK5AHslvvtJ50iQAYmabl2Nd3vOJ9DxtLBt8a2DfoGPWizgEB3+gkqm2PB8LywwwoiGKd7acr1wZEWmWK9/s0YWdzIstjlvk5AO5XFn6EtEzW8tAAOwBka9239pcyj0kEogWctHLJn7p9VFru38r+I1USyGn6u9XQ68n9edWddxBYokETCqEMT9QIDAQAB",
-  "minimum_chrome_version": "116",
-  "background": {
-    "service_worker": "background.js",
-    "type": "module"
-  },
-  "action": {
-    "default_title": "vcorp-chrome"
-  },
-  "permissions": [
-    "tabs",
-    "tabGroups",
-    "scripting",
-    "storage",
-    "alarms",
-    "offscreen",
-    "downloads",
-    "sidePanel",
-    "notifications",
-    "debugger"
-  ],
-  "host_permissions": [
-    "<all_urls>"
-  ],
-  "icons": {
-    "16": "icons/icon16.png",
-    "48": "icons/icon48.png",
-    "128": "icons/icon128.png"
-  },
-  "side_panel": {
-    "default_path": "panel.html"
-  }
-}
+{
+  "manifest_version": 3,
+  "name": "vcorp-chrome",
+  "version": "2.2.0",
+  "description": "让 AI agent 操控你已登录的 Chrome。基于花叔的 huashu-chrome（MIT）修改。",
+  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAq6xRqEwG4yTuHRG1Zah3j//T3B72XnazyZ+9fOCa5P4bBLPmNBN7YAGL5WnjtPVJefXT9r2Ol0qvNztayDG3dMjK6AZoWccgKa5rhxcvWgFUjanXtmBBQ0qgYwNhuEJSkdinLLtyUg6YmK7Mn72NWpfa/NfqNHdK5AHslvvtJ50iQAYmabl2Nd3vOJ9DxtLBt8a2DfoGPWizgEB3+gkqm2PB8LywwwoiGKd7acr1wZEWmWK9/s0YWdzIstjlvk5AO5XFn6EtEzW8tAAOwBka9239pcyj0kEogWctHLJn7p9VFru38r+I1USyGn6u9XQ68n9edWddxBYokETCqEMT9QIDAQAB",
+  "minimum_chrome_version": "116",
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+  "action": {
+    "default_title": "vcorp-chrome"
+  },
+  "permissions": [
+    "tabs",
+    "tabGroups",
+    "scripting",
+    "storage",
+    "alarms",
+    "offscreen",
+    "downloads",
+    "sidePanel",
+    "notifications",
+    "debugger"
+  ],
+  "optional_permissions": [
+    "nativeMessaging"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+  "side_panel": {
+    "default_path": "panel.html"
+  }
+}

package/extension/panel.html

@@ -17,11 +17,12 @@
   [hidden] { display: none !important; }
   body { margin: 0; background: var(--bg); color: var(--ink);
          font: 13px/1.6 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
-  header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
-  header img { width: 30px; height: 30px; border-radius: 50%; }
-  header .t { font-weight: 600; font-size: 14px; }
-  header .v { color: var(--mute); font-size: 11px; margin-left: 4px; font-weight: 400; }
-  .pill { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mute);
+  header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px;
+           padding: 10px 12px 8px; background: var(--bg); }
+  header .jump { font-size: 12px; text-decoration: none; }
+  header .jump:hover { text-decoration: underline; }
+  header .jump.bad { color: var(--bad); font-weight: 500; }
+  .pill { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mute);
           padding: 3px 9px; border-radius: 999px; background: var(--soft); }
   .dot { width: 8px; height: 8px; border-radius: 50%; background: #a8a29e; flex: none; }
   .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
@@ -101,15 +102,52 @@
   a.guide { display: flex; text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
   a.guide:hover { background: var(--soft); }
   a.guide .go { color: var(--accent); font-size: 12px; flex: none; }
+  /* 需要你处理：置顶、闪烁，处理完就收起 */
+  .need { margin-left: auto; all: unset; cursor: pointer; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--warn);
+          padding: 3px 9px; border-radius: 999px; animation: blink 1.2s ease-in-out infinite; }
+  .alert { border: 1.5px solid var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--card));
+           animation: flash 1.2s ease-in-out infinite; }
+  .alert h2 { color: var(--warn); font-weight: 600; display: flex; align-items: center; gap: 6px; }
+  .alert .pulse { background: var(--warn); }
+  .alert .task:first-child, .alert #cloudClaim:not([hidden]) + #asks .task:first-child { margin-top: 0; }
+  .alert .confirm { margin-top: 0; }
+  @keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 50%, transparent); }
+                     50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent); } }
+  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
+  @media (prefers-reduced-motion: reduce) { .alert, .need, .pulse { animation: none; } }
+  .top-err { margin: 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bad) 10%, var(--card)); }
+  /* 帮助：全部折叠在最下面 */
+  .help details { border-top: 1px solid var(--line); padding: 2px 0 4px; }
+  .help details:first-of-type { border-top: 0; }
+  .help details summary { color: var(--ink); font-size: 12.5px; margin: 4px 0; }
+  .help details > div { color: var(--mute); font-size: 12px; margin: 2px 0 6px; }
+  .help code { flex: none; }
 </style>
 
+<!-- 侧栏自带标题栏已经写了名字，这里只留状态 -->
 <header>
-  <img src="icons/icon128.png" alt="" />
-  <div class="t">vcorp-chrome<span class="v" id="ver"></span></div>
   <div class="pill"><span class="dot" id="pilldot"></span><span id="pilltxt">检查中…</span></div>
+  <a class="jump" id="connJump" href="#conn">连接详情</a>
+  <button class="need" id="needPill" type="button" hidden></button>
 </header>
 
 <main>
+  <div class="msg bad top-err" id="cloudErr" hidden></div>
+
+  <!-- 1. 要你马上点头的：配对确认、任务批准、追加的网站/文件夹/应用/桌面动作 -->
+  <section id="alert" class="alert" hidden>
+    <h2><span class="pulse"></span>需要你处理</h2>
+    <div id="cloudClaim" hidden>
+      <div class="confirm">
+        <div>要把这个浏览器交给 <b id="claimOrigin"></b> 上的账号 <b id="claimAccount"></b> 吗？</div>
+        <div class="muted" style="margin-top:4px">配对码如果是别人发给你的，点取消。</div>
+        <div class="row"><button class="btn" id="claimYes">确认连接</button><button class="btn ghost" id="claimNo">取消</button></div>
+      </div>
+    </div>
+    <div id="asks"></div>
+  </section>
+
+  <!-- 2. 正在发生的 -->
   <section>
     <h2>这一页</h2>
     <div id="page"><div class="empty">读取中…</div></div>
@@ -120,56 +158,39 @@
     <div class="sess" id="sess"></div>
   </section>
 
-  <section>
-    <h2>连接</h2>
-    <div id="lights"></div>
-    <div class="cmd" id="reconnRow" hidden><button class="btn" id="reconn">重连</button>
-      <span class="sub" style="color:var(--mute);font-size:12px">插件没消失，断的只是到终端的连接</span></div>
-  </section>
-
+  <!-- 3. 云端 -->
   <section id="cloud">
     <h2>云端发布</h2>
     <!-- 没配对 -->
     <div id="cloudPair" hidden>
-      <div class="muted">让 maker.vcorp.ai 在这个浏览器里替你发布作品、查资料、办事——用的是你已经登录好的账号，
-        网站的 cookie 不会离开这台电脑。到网页上「浏览器扩展」里拿一个配对码填在这里。</div>
+      <div class="muted">到 maker.vcorp.ai「浏览器扩展」里拿一个配对码填在这里。</div>
       <div class="field">
         <input type="text" class="code" id="pairCode" maxlength="9" placeholder="ABCD-EFGH" autocomplete="off" spellcheck="false" />
       </div>
       <details>
-        <summary>服务器地址</summary>
+        <summary>服务器地址（自建服务才需要改）</summary>
         <div class="field"><input type="text" id="pairOrigin" spellcheck="false" /></div>
-        <div class="muted">只有自建了服务才需要改。</div>
       </details>
       <div class="row"><button class="btn" id="pairGo">下一步</button></div>
     </div>
-    <!-- 配对第一步完成，等用户确认账号 -->
-    <div id="cloudClaim" hidden>
-      <div class="confirm">
-        <div>要把这个浏览器交给 <b id="claimOrigin"></b> 上的账号 <b id="claimAccount"></b> 吗？</div>
-        <div class="muted" style="margin-top:4px">确认后，这个账号可以申请在你允许的网站上替你操作，每个任务都要你点头。配对码如果是别人发给你的，点取消。</div>
-        <div class="row"><button class="btn" id="claimYes">确认连接</button><button class="btn ghost" id="claimNo">取消</button></div>
-      </div>
-    </div>
     <!-- 已配对 -->
     <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>
-      <div class="lab" style="margin-top:6px">允许它使用的网站</div>
-      <div class="sites" id="cloudSites"></div>
-      <div class="muted" style="margin-top:4px">任务申请网站、你点了允许，就记在这里（含子域）。不在这里、也没在任务里批准的网站，它连页面都打不开。</div>
       <div id="cloudTasks"></div>
+      <div class="lab" style="margin-top:10px">允许它使用的网站</div>
+      <div class="sites" id="cloudSites"></div>
       <label class="sw-row">
-        <span class="txt">自动允许新任务<div class="sub">不再逐个弹窗确认。只在你信任这个账号时打开：新任务，以及它一开始就要去的网站，会直接放行。任务开始之后再加的网站，还有本地文件夹，仍然要你逐个点头</div></span>
-        <input type="checkbox" class="toggle" id="cloudAuto" />
+        <span class="txt">暂停<div class="sub">云端的命令一条都不接，直到你再打开</div></span>
+        <input type="checkbox" class="toggle" id="cloudPause" />
       </label>
       <label class="sw-row">
-        <span class="txt">对外动作不再逐条确认<div class="sub">发消息、投递、发帖之前不再问你。扫码、验证码仍然要你本人来。付款一律不做</div></span>
-        <input type="checkbox" class="toggle" id="cloudAutoConfirm" />
+        <span class="txt">自动允许新任务<div class="sub">只在你信任这个账号时打开</div></span>
+        <input type="checkbox" class="toggle" id="cloudAuto" />
       </label>
       <label class="sw-row">
-        <span class="txt">暂停<div class="sub">立刻断开，云端的命令一条都不接，直到你再打开</div></span>
-        <input type="checkbox" class="toggle" id="cloudPause" />
+        <span class="txt">对外动作不再逐条确认<div class="sub">发消息、发帖前不再问你；付款一律不做</div></span>
+        <input type="checkbox" class="toggle" id="cloudAutoConfirm" />
       </label>
       <details>
         <summary>操作记录</summary>
@@ -177,34 +198,82 @@
       </details>
       <div class="row"><button class="btn ghost" id="cloudReconn">重连</button><button class="btn ghost" id="cloudUnpair">断开并忘记这个服务器</button></div>
     </div>
-    <div class="msg bad" id="cloudErr" hidden></div>
   </section>
 
+  <!-- 4. 设置 -->
   <section>
     <h2>本地文件夹</h2>
-    <div class="muted">挂载之后，配对的网站可以申请读取里面的文档（Markdown、文本、PDF、Word、CSV、JSON、HTML）。只读，不会改你的文件。每次真正读取之前还会再问你一次。浏览器重启后如果这里显示需要恢复，点「恢复访问」。</div>
     <div id="folderList"></div>
     <div class="row"><button class="btn" id="folderAdd" type="button">添加文件夹</button></div>
   </section>
 
+  <section>
+    <h2>桌面应用</h2>
+    <div id="deskState" class="sub"></div>
+    <div class="row">
+      <button class="btn" id="deskOn" type="button">启用桌面能力</button>
+      <button class="btn ghost" id="deskOff" type="button" hidden>停用</button>
+    </div>
+  </section>
+
   <section>
     <h2>设置</h2>
-    <a class="sw-row guide" id="guide" href="welcome.html">
-      <span class="txt">开始使用<div class="sub">配对码、接上本机 agent、第一句怎么说</div></span>
-      <span class="go">打开</span>
-    </a>
     <label class="sw-row">
-      <span class="txt">高保真模式<div class="sub">需要时用浏览器级真实输入，应付严格的站点和富文本编辑器；用完自动断开</div></span>
+      <span class="txt">高保真模式<div class="sub">需要时用浏览器级真实输入；用完自动断开</div></span>
       <input type="checkbox" class="toggle" id="l2" />
     </label>
     <label class="sw-row">
-      <span class="txt">页面标记<div class="sub">被操作的页面带彩色描边、光标和小头像；录屏演示时可以关掉</div></span>
+      <span class="txt">页面标记<div class="sub">被操作的页面带彩色描边和小头像；录屏时可以关掉</div></span>
       <input type="checkbox" class="toggle" id="mark" />
     </label>
   </section>
-</main>
 
-<footer>连不上时在终端跑 <code style="padding:1px 5px">npx vcorp-chrome doctor</code>，它会告诉你卡在哪一步。</footer>
+  <!-- 5. 帮助：连接诊断 + 折叠说明，都在最下面；顶上状态旁的「连接详情」跳到这里 -->
+  <section id="conn">
+    <h2>连接</h2>
+    <div id="lights"></div>
+    <div class="cmd" id="reconnRow" hidden><button class="btn" id="reconn">重连</button>
+      <span class="sub" style="color:var(--mute);font-size:12px">插件没消失，断的只是到终端的连接</span></div>
+  </section>
+
+  <section class="help">
+    <h2>帮助</h2>
+    <a class="sw-row guide" id="guide" href="welcome.html">
+      <span class="txt">开始使用<div class="sub">配对码、接上本机 agent、第一句怎么说</div></span>
+      <span class="go">打开</span>
+    </a>
+    <details>
+      <summary>连不上怎么办</summary>
+      <div>在终端跑 <code>npx vcorp-chrome doctor</code>，它会告诉你卡在哪一步。</div>
+    </details>
+    <details>
+      <summary>云端发布是什么</summary>
+      <div>让 maker.vcorp.ai 在这个浏览器里替你发布作品、查资料、办事——用的是你已经登录好的账号，网站的 cookie 不会离开这台电脑。
+        配对后，这个账号可以申请在你允许的网站上替你操作，每个任务都要你点头。</div>
+    </details>
+    <details>
+      <summary>允许的网站</summary>
+      <div>任务申请网站、你点了允许，就记在名单里（含子域）。不在名单里、也没在任务里批准的网站，它连页面都打不开。没有预设的平台。</div>
+    </details>
+    <details>
+      <summary>自动允许和免确认</summary>
+      <div>「自动允许新任务」：新任务，以及它一开始就要去的网站，会直接放行。任务开始之后再加的网站，还有本地文件夹，仍然要你逐个点头。</div>
+      <div>「对外动作不再逐条确认」：发消息、投递、发帖之前不再问你。扫码、验证码仍然要你本人来。付款一律不做。</div>
+    </details>
+    <details>
+      <summary>本地文件夹</summary>
+      <div>挂载之后，配对的网站可以申请读取里面的文档（Markdown、文本、PDF、Word、CSV、JSON、HTML）。只读，不会改你的文件。每次真正读取之前还会再问你一次。浏览器重启后如果显示需要恢复，点「恢复访问」。</div>
+    </details>
+    <details>
+      <summary>桌面应用</summary>
+      <div>启用后，配对的网站可以申请操作这台电脑上的某个应用（比如微信、Excel）。每个任务要用的应用都会先问你。浏览器窗口、密码管理器、终端一律不碰；付款不做，发送和删除之前会问你。需要先在终端运行一次 <code>npx vcorp-chrome desktop install</code>。</div>
+    </details>
+    <details>
+      <summary>高保真模式</summary>
+      <div>需要时用浏览器级真实输入，应付严格的站点和富文本编辑器；用完自动断开。</div>
+    </details>
+  </section>
+</main>
 
 <script type="module" src="panel.js"></script>
 </html>