@sleepinsummer/agent-browser-cli 0.2.5 → 0.2.8

package/AI_INSTALL.md

@@ -7,11 +7,12 @@
 
 要求：
 1. 优先使用 npm 安装：npm install -g @sleepinsummer/agent-browser-cli。
-2. 指导我在 Chrome 中加载 assets/tmwd_cdp_bridge 解压扩展。
-3. 如果之前已经加载过扩展，必须在 chrome://extensions 里重新加载 `assets/tmwd_cdp_bridge`，确保最新 `config.js` 和 `background.js` 生效。
-4. 将 skills/agent-browser-cli/SKILL.md 安装到当前 AI 可识别的 skills 目录。
-5. 执行 agent-browser-cli tabs、open 和 status 验证可用。
-6. 如果 npm 平台包暂不支持当前系统，再回退到源码构建：cargo build --release。
+2. 先询问我希望把 Chrome 扩展解压到哪个本地目录。
+3. 从 GitHub 最新 Release 下载 `chrome-extensions.zip`，解压到我指定的目录，并指导我在 Chrome 中加载解压后的 `tmwd_cdp_bridge` 扩展目录。
+4. 如果之前已经加载过扩展，必须在 chrome://extensions 里重新加载该扩展，确保最新 `config.js`、`content.js` 和 `background.js` 生效。
+5. 将 skills/agent-browser-cli/SKILL.md 安装到当前 AI 可识别的 skills 目录。
+6. 执行 agent-browser-cli tabs、open 和 status 验证可用。
+7. 如果 npm 平台包暂不支持当前系统，再回退到源码构建：cargo build --release。
 ```
 
 ## 1. 安装 CLI
@@ -29,9 +30,20 @@ agent-browser-cli --help
 @sleepinsummer/agent-browser-cli
 @sleepinsummer/agent-browser-cli-darwin-arm64
 @sleepinsummer/agent-browser-cli-darwin-x64
+@sleepinsummer/agent-browser-cli-linux-x64
 @sleepinsummer/agent-browser-cli-win32-x64
 ```
 
+Linux 使用前请确认本机 Chrome / Chromium 支持安装扩展。
+
+如果在 WSL 中使用，当前版本依赖 WSL 访问宿主机 `localhost` 上的 Chrome 桥接服务。建议环境：
+
+```text
+WSL 2.0.0+
+Windows 11 22H2+
+.wslconfig 中启用 networkingMode=mirrored
+```
+
 如果当前平台包暂未发布或安装失败，使用源码构建：
 
 ```bash
@@ -43,11 +55,26 @@ cargo build --release
 
 ## 2. 加载 Chrome 扩展
 
-如果使用 npm 安装，需要先下载或克隆仓库，用于加载扩展和安装 skill：
+先询问用户希望把扩展解压到哪个本地目录，例如：
+
+```text
+请告诉我 Chrome 扩展希望解压到哪个目录，例如 ~/agent-browser-cli-extension。
+```
+
+然后下载最新 Release 中的 `chrome-extensions.zip` 并解压到该目录。zip 解压后内部目录仍是 `tmwd_cdp_bridge`：
 
 ```bash
-git clone https://github.com/sleepinginsummer/agent-browser-cli.git
-cd agent-browser-cli
+EXT_PARENT="$HOME/agent-browser-cli-extension"
+mkdir -p "$EXT_PARENT"
+ZIP_URL="$(curl -fsSL https://api.github.com/repos/sleepinginsummer/agent-browser-cli/releases/latest | grep -o '"browser_download_url": "[^"]*chrome-extensions.zip"' | head -n 1 | cut -d '"' -f 4)"
+curl -fL "$ZIP_URL" -o "$EXT_PARENT/chrome-extensions.zip"
+unzip -o "$EXT_PARENT/chrome-extensions.zip" -d "$EXT_PARENT"
+```
+
+解压后扩展目录应为：
+
+```text
+$EXT_PARENT/tmwd_cdp_bridge
 ```
 
 在 Chrome 打开：
@@ -59,10 +86,10 @@ chrome://extensions
 开启“开发者模式”，加载已解压扩展目录：
 
 ```text
-assets/tmwd_cdp_bridge
+$EXT_PARENT/tmwd_cdp_bridge
 ```
 
-如果之前已经安装过旧版 GenericAgent 的 `tmwd_cdp_bridge` 扩展，可以继续使用同协议旧扩展；但建议加载当前仓库的 `assets/tmwd_cdp_bridge` 并点击“重新加载”。
+如果之前已经安装过旧版 GenericAgent 的 `tmwd_cdp_bridge` 扩展，可以继续使用同协议旧扩展；但建议加载最新 Release 解压出来的 `tmwd_cdp_bridge` 并点击“重新加载”。
 
 当前扩展配置应包含：
 
@@ -123,4 +150,3 @@ agent-browser-cli exec --tab <tabId> 'return document.title'
 ```text
 skills/agent-browser-cli/SKILL.md
 ```
-

package/README.md

@@ -9,8 +9,8 @@
 <p>
   <a href="https://github.com/sleepinginsummer/agent-browser-cli"><img src="https://img.shields.io/badge/CLI-agentbrowsercli-2ea44f" alt="CLI agentbrowsercli"></a>
   <a href="https://github.com/sleepinginsummer/agent-browser-cli/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-MIT-green" alt="License MIT"></a>
-  <a href="https://github.com/sleepinginsummer/agent-browser-cli"><img src="https://img.shields.io/badge/sys-win%2Fmac-0078D6?labelColor=0078D6&color=C0C0C0" alt="sys win/mac"></a>
-  <a href="https://github.com/sleepinginsummer/agent-browser-cli/releases"><img src="https://img.shields.io/badge/release-v0.2.3-blue" alt="release v0.2.3"></a>
+  <a href="https://github.com/sleepinginsummer/agent-browser-cli"><img src="https://img.shields.io/badge/sys-win%2Fmac%2Flinux-0078D6?labelColor=0078D6&color=C0C0C0" alt="sys win/mac/linux"></a>
+  <a href="https://github.com/sleepinginsummer/agent-browser-cli/releases"><img src="https://img.shields.io/badge/release-v0.2.8-blue" alt="release v0.2.8"></a>
   <a href="https://github.com/sleepinginsummer/agent-browser-cli/pulls"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen" alt="PRs welcome"></a>
 </p>
 
@@ -26,9 +26,11 @@
 
 ## 项目信息
 
-- 当前版本：`0.2.3`
-- 支持平台：sys win/mac
-- 浏览器：Chrome / Chromium，需加载 `assets/tmwd_cdp_bridge`
+- 当前版本：`0.2.8`
+- 支持平台：Windows（包括 WSL）/ Mac / Linux
+- 浏览器：Chrome，需加载拓展 `assets/tmwd_cdp_bridge`
+- Linux 支持前提：本机 Chrome / Chromium 需要支持安装扩展
+- WSL 支持前提：需使用 `WSL 2.0.0+`，并建议在 Windows `11 22H2+` 下启用 `networkingMode=mirrored`，以便 WSL 连接宿主机 `localhost` 上的 Chrome 桥接服务
 
 ## 致谢
 
@@ -110,13 +112,51 @@ cargo build --release
 
 ## Chrome 扩展
 
-加载扩展目录：
+1. 推荐从 [最新 Release](https://github.com/sleepinginsummer/agent-browser-cli/releases/latest) 下载 `chrome-extensions.zip`，下载后解压，Chrome 打开 `chrome://extensions`，开启“开发者模式”，点击“加载已解压的扩展程序”，选择解压后的 `tmwd_cdp_bridge` 目录。
+
+2. 本地源码构建时，也可以直接加载扩展目录：
 
 ```text
 assets/tmwd_cdp_bridge
 ```
 
-Chrome 需要至少打开一个正常网页标签页，不要只停留在 `about:blank` 或 `chrome://` 页面。
+3. Chrome 需要至少打开一个正常网页标签页，不要只停留在 `about:blank` 或 `chrome://` 页面。
+4. 扩展连接后会在页面右侧显示 Chrome 插件提示角标。角标支持拖动位置，鼠标悬浮时展开；10 秒无命令后自动隐藏，也可以点击 `本次隐藏` 手动隐藏，本次服务连接周期内不再显示，约 300 秒服务断开并下次重连后恢复。
+
+###  自定义Chrome插件的ws监听端口
+
+- `18765`：默认插件 WebSocket 端口，Chrome 扩展连接使用，可通过 `agent-browser-cli set-extension-port <port>` 修改。
+- `18767`：CLI HTTP API 端口，供 CLI 复用会话，不能作为插件端口使用。
+
+CLI 修改插件端口：
+
+```bash
+agent-browser-cli set-extension-port 18766
+```
+
+该命令会写入配置文件；如果 daemon 正在运行，会自动重启 daemon，让新端口立即生效。
+
+也可以手动修改配置文件。配置文件位于 `~/.agent-browser-cli/config.json`，不存在时会自动生成：
+
+```json
+{
+  "extension_port": 18765
+}
+```
+
+手动修改示例：
+
+```json
+{
+  "extension_port": 18766
+}
+```
+
+手动改配置后需要执行 `agent-browser-cli restart`，daemon 才会按新端口重新监听。
+
+Chrome 插件 popup 中也可以修改插件端口并立即重连。插件端口必须和 CLI 配置中的 `extension_port` 一致。
+
+
 
 ## 快速自检
 
@@ -149,26 +189,13 @@ agent-browser-cli tabs
 
 ## 更新
 
-```bash
-git pull
-cargo build --release
-./target/release/agent-browser-cli restart
-```
-
-如果 Chrome 扩展有更新，在 `chrome://extensions` 中重新加载 `assets/tmwd_cdp_bridge` 扩展。
-
-当前扩展配置标识为：
-
-```js
-const TID = '__agent_browser_cli_bridge_26c9f1';
+ai一句话更新
+```text
+请阅读 https://github.com/sleepinginsummer/agent-browser-cli/blob/main/AI_INSTALL.md，按说明更新 CLI、重新下载插件zip让用户指定位置，用户手动加载 Chrome 扩展，并更新相关 SKILL.md`。
 ```
 
-如果你把 skill 安装到了 Codex/Agent 的全局目录，更新后同步复制：
+如果 Chrome 扩展有更新，在 `chrome://extensions` 中重新下载zpi覆盖，然后重新加载 `assets/tmwd_cdp_bridge` 扩展。
 
-```bash
-mkdir -p ~/.agents/skills/agent-browser-cli
-cp skills/agent-browser-cli/SKILL.md ~/.agents/skills/agent-browser-cli/SKILL.md
-```
 
 ## 卸载
 
@@ -187,14 +214,12 @@ rm -rf ~/.agents/skills/agent-browser-cli
 
 最后在 Chrome 扩展管理页中移除 `TMWD CDP Bridge` 扩展，或删除已加载的 `assets/tmwd_cdp_bridge` 扩展配置。
 
-## 端口
 
-- `18765`：底层 `TMWebDriver` WebSocket，Chrome 扩展连接使用。
-- `18767`：外层 `agent-browser-cli` HTTP 服务，供 CLI 复用会话。
 
 ## 友情链接
 
 - [LINUX DO - 新的理想型社区](https://linux.do/)
+- [GenericAgent--复旦团队研发|仅仅~3K行代码 Self-Evolving Agent](https://github.com/lsdefine/GenericAgent/tree/main)
 
 ## 许可证
 

package/README_EN.md

@@ -9,8 +9,8 @@ Browser perception · Page control · Chrome session reuse · CDP · Conditional
 <p>
   <a href="https://github.com/sleepinginsummer/agent-browser-cli"><img src="https://img.shields.io/badge/CLI-agentbrowsercli-2ea44f" alt="CLI agentbrowsercli"></a>
   <a href="https://github.com/sleepinginsummer/agent-browser-cli/blob/main/LICENSE"><img src="https://img.shields.io/badge/License-MIT-green" alt="License MIT"></a>
-  <a href="https://github.com/sleepinginsummer/agent-browser-cli"><img src="https://img.shields.io/badge/sys-win%2Fmac-0078D6?labelColor=0078D6&color=C0C0C0" alt="sys win/mac"></a>
-  <a href="https://github.com/sleepinginsummer/agent-browser-cli/releases"><img src="https://img.shields.io/badge/release-v0.2.3-blue" alt="release v0.2.3"></a>
+  <a href="https://github.com/sleepinginsummer/agent-browser-cli"><img src="https://img.shields.io/badge/sys-win%2Fmac%2Flinux-0078D6?labelColor=0078D6&color=C0C0C0" alt="sys win/mac/linux"></a>
+  <a href="https://github.com/sleepinginsummer/agent-browser-cli/releases"><img src="https://img.shields.io/badge/release-v0.2.8-blue" alt="release v0.2.8"></a>
   <a href="https://github.com/sleepinginsummer/agent-browser-cli/pulls"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen" alt="PRs welcome"></a>
 </p>
 
@@ -26,9 +26,11 @@ This project is not Selenium or Playwright. It is better suited for helping agen
 
 ## Project Info
 
-- Current version: `0.2.3`
-- Supported platforms: sys win/mac
-- Browser: Chrome / Chromium, with `assets/tmwd_cdp_bridge` loaded
+- Current version: `0.2.8`
+- Supported platforms: Windows (including WSL) / Mac / Linux
+- Browser: Chrome, with the `assets/tmwd_cdp_bridge` extension loaded
+- Linux prerequisite: the local Chrome / Chromium build must support loading extensions
+- WSL prerequisite: use `WSL 2.0.0+`, and preferably enable `networkingMode=mirrored` on Windows `11 22H2+` so WSL can reach the host Chrome bridge service on `localhost`
 
 ## Acknowledgements
 
@@ -110,13 +112,49 @@ cargo build --release
 
 ## Chrome Extension
 
-Load this extension directory:
+1. Recommended: download `chrome-extensions.zip` from the [latest Release](https://github.com/sleepinginsummer/agent-browser-cli/releases/latest), extract it, open `chrome://extensions` in Chrome, enable `Developer mode`, click `Load unpacked`, and select the extracted `tmwd_cdp_bridge` directory.
+
+2. When building from local source, you can also load this extension directory directly:
 
 ```text
 assets/tmwd_cdp_bridge
 ```
 
-Chrome needs at least one normal web page tab open. Do not leave it only on `about:blank` or `chrome://` pages.
+3. Chrome needs at least one normal web page tab open. Do not leave it only on `about:blank` or `chrome://` pages.
+4. After the extension is connected, a Chrome extension tip badge appears on the right side of the page. The badge position is draggable and expands on hover. It auto-hides after 10 seconds without commands, and you can also click `Hide for this session` to hide it manually. Manual hiding lasts for the current service connection cycle and resets after the service disconnects after about 300 seconds and reconnects.
+
+### Custom Chrome Extension WebSocket Port
+
+- `18765`: default extension WebSocket port, used by the Chrome extension. It can be changed with `agent-browser-cli set-extension-port <port>`.
+- `18767`: CLI HTTP API port, used by the CLI to reuse the session. It cannot be used as the extension port.
+
+Change the extension port from CLI:
+
+```bash
+agent-browser-cli set-extension-port 18766
+```
+
+This command writes the config file. If the daemon is running, it restarts the daemon so the new port takes effect immediately.
+
+You can also edit the config file manually. The config file is `~/.agent-browser-cli/config.json`. It is created automatically when missing:
+
+```json
+{
+  "extension_port": 18765
+}
+```
+
+Manual edit example:
+
+```json
+{
+  "extension_port": 18766
+}
+```
+
+After manually editing the config file, run `agent-browser-cli restart` so the daemon listens on the new port.
+
+The Chrome extension popup can also update the extension port and reconnect immediately. The popup port must match the CLI `extension_port` config.
 
 ## Quick Check
 
@@ -149,26 +187,13 @@ agent-browser-cli tabs
 
 ## Update
 
-```bash
-git pull
-cargo build --release
-./target/release/agent-browser-cli restart
-```
-
-If the Chrome extension has updates, reload the `assets/tmwd_cdp_bridge` extension in `chrome://extensions`.
-
-Current extension bridge identifier:
+AI one-line update:
 
-```js
-const TID = '__agent_browser_cli_bridge_26c9f1';
+```text
+Please read https://github.com/sleepinginsummer/agent-browser-cli/blob/main/AI_INSTALL.md, follow the instructions to update the CLI, download the extension zip again to the user-specified location, ask the user to manually load the Chrome extension, and update the related SKILL.md.
 ```
 
-If you installed the skill into a global Codex/Agent directory, copy it again after updating:
-
-```bash
-mkdir -p ~/.agents/skills/agent-browser-cli
-cp skills/agent-browser-cli/SKILL.md ~/.agents/skills/agent-browser-cli/SKILL.md
-```
+If the Chrome extension has updates, download the zip again, overwrite the existing files, and reload the `assets/tmwd_cdp_bridge` extension in `chrome://extensions`.
 
 ## Uninstall
 
@@ -187,14 +212,10 @@ rm -rf ~/.agents/skills/agent-browser-cli
 
 Finally, remove the `TMWD CDP Bridge` extension from Chrome's extension management page, or remove the loaded `assets/tmwd_cdp_bridge` extension configuration.
 
-## Ports
-
-- `18765`: underlying `TMWebDriver` WebSocket, used by the Chrome extension.
-- `18767`: outer `agent-browser-cli` HTTP service, used by the CLI to reuse the session.
-
 ## Friendly Links
 
 - [LINUX DO - A New Ideal Community](https://linux.do/)
+- [GenericAgent--复旦团队研发|仅仅~3K行代码 Self-Evolving Agent](https://github.com/lsdefine/GenericAgent/tree/main)
 
 ## License
 

package/assets/tmwd_cdp_bridge/background.js

@@ -15,8 +15,15 @@ chrome.runtime.onInstalled.addListener(() => {
   });
 });
 
+let lastCommandAt = 0;
+const DEFAULT_WS_PORT = 18765;
+const CLI_API_PORT = 18767;
+let wsPort = DEFAULT_WS_PORT;
+
 async function handleExtMessage(msg, sender) {
   if (msg.cmd === 'status') return handleStatus();
+  if (msg.cmd === 'setPort') return await handleSetPort(msg);
+  lastCommandAt = Date.now();
   if (msg.cmd === 'cookies') return await handleCookies(msg, sender);
   if (msg.cmd === 'cdp') return await handleCDP(msg, sender);
   if (msg.cmd === 'batch') return await handleBatch(msg, sender);
@@ -75,7 +82,23 @@ function handleStatus() {
     ok: true,
     data: {
       wsConnected: !!ws && ws.readyState === WebSocket.OPEN,
-      wsUrl: WS_URL
+      wsUrl: getWsUrl(),
+      wsPort,
+      lastCommandAt
+    }
+  };
+}
+
+async function handleSetPort(msg) {
+  const port = normalizePort(msg.port);
+  await saveWsPort(port);
+  reconnectWS();
+  return {
+    ok: true,
+    data: {
+      wsPort,
+      wsUrl: getWsUrl(),
+      wsConnected: !!ws && ws.readyState === WebSocket.OPEN
     }
   };
 }
@@ -173,6 +196,20 @@ async function handleCDP(msg, sender) {
 // Filter out chrome:// and other internal tabs that can't be scripted
 const isScriptable = url => url && /^https?:/.test(url);
 
+async function injectContentScriptsIntoExistingTabs() {
+  const tabs = (await chrome.tabs.query({})).filter(t => isScriptable(t.url));
+  for (const tab of tabs) {
+    try {
+      await chrome.scripting.executeScript({
+        target: { tabId: tab.id, allFrames: true },
+        files: ['config.js', 'content.js']
+      });
+    } catch (e) {
+      console.log('[TMWD-WS] Inject content script failed:', tab.id, e.message);
+    }
+  }
+}
+
 // --- Shared page/CDP script builder core ---
 function buildExecScript(code, errorHandler) {
   return `(async () => {
@@ -232,11 +269,36 @@ function buildCdpScript(code) {
 
 // --- WebSocket Client for TMWebDriver ---
 let ws = null;
-const WS_URL = 'ws://127.0.0.1:18765';
+
+function normalizePort(port) {
+  const value = Number(port);
+  if (!Number.isInteger(value) || value < 1 || value > 65535) {
+    throw new Error('端口必须是 1-65535');
+  }
+  if (value === CLI_API_PORT) {
+    throw new Error('18767 是 agent-browser-cli API 端口，请换一个插件端口');
+  }
+  return value;
+}
+
+async function loadWsPort() {
+  const data = await chrome.storage.local.get({ wsPort: DEFAULT_WS_PORT });
+  wsPort = normalizePort(data.wsPort);
+  return wsPort;
+}
+
+async function saveWsPort(port) {
+  wsPort = normalizePort(port);
+  await chrome.storage.local.set({ wsPort });
+}
+
+function getWsUrl() {
+  return `ws://127.0.0.1:${wsPort}`;
+}
 
 function scheduleProbe() {
   // Use chrome.alarms to survive MV3 service worker suspension
-  chrome.alarms.create('tmwd-ws-probe', { delayInMinutes: 0.083 }); // ~5s
+  chrome.alarms.create('tmwd-ws-probe', { delayInMinutes: 0.017 }); // ~1s
 }
 
 function scheduleKeepalive() {
@@ -248,7 +310,7 @@ async function isServerAlive() {
   try {
     const ctrl = new AbortController();
     setTimeout(() => ctrl.abort(), 2000);
-    await fetch('http://127.0.0.1:18765', { signal: ctrl.signal });
+    await fetch(`http://127.0.0.1:${wsPort}`, { signal: ctrl.signal });
     return true; // Got HTTP response → port is listening
   } catch (e) {
     return false; // Network error (connection refused) or timeout → server not alive
@@ -354,12 +416,20 @@ async function handleWsExec(data) {
   }
 }
 
-function connectWS() {
+async function connectWS() {
+  await loadWsPort();
   if (ws && ws.readyState <= 1) return; // CONNECTING or OPEN
+  if (!(await isServerAlive())) {
+    console.warn('[TMWD-WS] Server not ready, retrying later:', getWsUrl());
+    ws = null;
+    scheduleProbe();
+    return;
+  }
   ws = null;
-  console.log('[TMWD-WS] Connecting to', WS_URL);
+  const wsUrl = getWsUrl();
+  console.log('[TMWD-WS] Connecting to', wsUrl);
   try {
-    ws = new WebSocket(WS_URL);
+    ws = new WebSocket(wsUrl);
   } catch (e) {
     console.error('[TMWD-WS] Constructor error:', e);
     ws = null;
@@ -380,6 +450,7 @@ function connectWS() {
     try {
       const data = JSON.parse(event.data);
       if (data.id && data.code) {
+        lastCommandAt = Date.now();
         let code = data.code;
         // If code is a JSON string representing an object, parse it
         if (typeof code === 'string') {
@@ -410,15 +481,32 @@ function connectWS() {
     scheduleProbe();
   };
   ws.onerror = (e) => {
-    console.error('[TMWD-WS] Error:', e);
+    console.warn('[TMWD-WS] Connection warning:', e);
     // onclose will fire after this, which triggers reconnect
   };
 }
 
+function reconnectWS() {
+  if (ws) {
+    try { ws.onclose = null; ws.close(); } catch (_) {}
+  }
+  ws = null;
+  chrome.alarms.clear('tmwd-ws-probe');
+  chrome.alarms.clear('tmwd-ws-keepalive');
+  connectWS();
+}
+
 // Initial connect + wake-up hooks
 connectWS();
-chrome.runtime.onStartup.addListener(() => connectWS());
-chrome.runtime.onInstalled.addListener(() => connectWS());
+injectContentScriptsIntoExistingTabs();
+chrome.runtime.onStartup.addListener(() => {
+  connectWS();
+  injectContentScriptsIntoExistingTabs();
+});
+chrome.runtime.onInstalled.addListener(() => {
+  connectWS();
+  injectContentScriptsIntoExistingTabs();
+});
 
 // Sync tab list on changes
 async function sendTabsUpdate() {

package/assets/tmwd_cdp_bridge/config.js

@@ -1 +1 @@
-const TID = '__agent_browser_cli_bridge_26c9f1';
+globalThis.__agent_browser_cli_TID = '__agent_browser_cli_bridge_26c9f1';

package/assets/tmwd_cdp_bridge/content.js

@@ -1,27 +1,64 @@
 ;(function(){ if (/streamlit/i.test(document.title)) return;
+const TID = globalThis.__agent_browser_cli_TID || '__agent_browser_cli_bridge_26c9f1';
+if (window.__agentBrowserCliCleanup) window.__agentBrowserCliCleanup();
+if (window.__agentBrowserCliObserverCleanup) window.__agentBrowserCliObserverCleanup();
+document.querySelectorAll('#agent-browser-cli-ind,#agent-browser-cli-style').forEach(e => e.remove());
 
 // Remove meta CSP tags
 document.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach(e => e.remove());
 
 /**
- * Render a bottom-right badge that reflects the real bridge connection status.
+ * Render a right-side floating badge that reflects the real bridge connection status.
  */
 (function(){
   if(window.self!==window.top)return;
+  const s=document.createElement('style');
+  s.id='agent-browser-cli-style';
+  s.textContent='#agent-browser-cli-ind{position:fixed;top:40%;right:0;display:flex;align-items:center;gap:10px;width:218px;height:36px;box-sizing:border-box;padding:0 8px 0 9px;color:white;border-radius:18px 0 0 18px;font-size:11px;font-weight:bold;line-height:36px;z-index:99999;cursor:grab;box-shadow:0 4px 12px rgba(0,0,0,0.22);background:#4CAF50;opacity:.72;overflow:visible;white-space:nowrap;user-select:none;transform:translateX(190px);transition:transform .18s ease,opacity .18s ease;}#agent-browser-cli-ind::after{content:"";position:absolute;inset:0;border-radius:18px 0 0 18px;background:#4CAF50;z-index:-1;}#agent-browser-cli-dot{flex:0 0 auto;width:10px;height:10px;border-radius:999px;background:white;}#agent-browser-cli-label{flex:0 0 auto;max-width:150px;overflow:hidden;}#agent-browser-cli-ind[data-expanded="1"]{opacity:.92;transform:translateX(0);}#agent-browser-cli-ind[data-dragging="1"]{cursor:grabbing;transition:none;}#agent-browser-cli-close{position:relative;flex:0 0 auto;width:20px;height:20px;border-radius:999px;line-height:18px;text-align:center;font-size:15px;font-weight:bold;background:#1f7a33;color:white;opacity:0;pointer-events:none;cursor:pointer;}#agent-browser-cli-ind[data-expanded="1"] #agent-browser-cli-close{opacity:1;pointer-events:auto;}#agent-browser-cli-close:hover{background:#145523;}#agent-browser-cli-close::after{content:"本次隐藏";position:absolute;right:0;bottom:28px;padding:4px 7px;border-radius:4px;background:#1f2937;color:white;font-size:12px;font-weight:500;line-height:16px;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;}#agent-browser-cli-close:hover::after{opacity:1;transform:translateY(0);}';
+  (document.head||document.documentElement).appendChild(s);
   const d=document.createElement('div');
   d.id='agent-browser-cli-ind';
-  d.style.cssText='position:fixed;bottom:8px;right:8px;color:white;padding:4px 7px;border-radius:4px;font-size:11px;font-weight:bold;z-index:99999;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.2);opacity:0.5;';
+  const dot=document.createElement('span');
+  dot.id='agent-browser-cli-dot';
+  const label=document.createElement('span');
+  label.id='agent-browser-cli-label';
+  label.textContent='agent_browser_cli: 已连接';
+  const close=document.createElement('span');
+  close.id='agent-browser-cli-close';
+  close.textContent='×';
+  d.appendChild(dot);
+  d.appendChild(label);
+  d.appendChild(close);
+  let collapseTimer = null;
+  let dragging = false;
+  let moved = false;
+  let dragOffsetY = 0;
+  let dismissed = false;
+  let wasConnected = false;
+  let lastSeenCommandAt = 0;
+  let lastTop = Math.round(window.innerHeight * 0.4);
+  d.style.top = lastTop + 'px';
   /**
    * Show the badge only when the bridge is really connected.
    */
-  function setBadgeState(connected, detail) {
-    // Hide the indicator completely when offline to avoid persistent page noise.
-    d.style.display = connected ? 'block' : 'none';
-    d.innerText = 'agent_browser_cli: 已连接';
-    d.style.background = '#4CAF50';
+  function setBadgeState(connected, detail, lastCommandAt) {
+    // 手动关闭只在当前连接周期生效；断开后下次重新连接会再次显示。
+    if (connected && !wasConnected) dismissed = false;
+    wasConnected = connected;
+    const commandAt = Number(lastCommandAt) || 0;
+    if (commandAt > lastSeenCommandAt) lastSeenCommandAt = commandAt;
+    const activeRecently = lastSeenCommandAt > 0 && Date.now() - lastSeenCommandAt <= 10000;
+    d.style.display = connected && !dismissed && activeRecently ? 'flex' : 'none';
+    label.textContent = 'agent_browser_cli: 已连接';
     d.dataset.connected = connected ? '1' : '0';
     d.dataset.detail = detail || '';
   }
+  function setExpanded(expanded) {
+    d.dataset.expanded = expanded ? '1' : '0';
+  }
+  function clampTop(top) {
+    return Math.max(8, Math.min(window.innerHeight - d.offsetHeight - 8, top));
+  }
   /**
    * Poll background status and update the badge visibility.
    */
@@ -29,26 +66,70 @@ document.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach(
     try {
       const resp = await chrome.runtime.sendMessage({ cmd: 'status' });
       const connected = !!resp?.ok && !!resp?.data?.wsConnected;
-      setBadgeState(connected, resp?.data?.wsUrl || '');
+      setBadgeState(connected, resp?.data?.wsUrl || '', resp?.data?.lastCommandAt);
     } catch (e) {
-      setBadgeState(false, e.message || '');
+      setBadgeState(false, e.message || '', 0);
     }
   }
-  d.addEventListener('click',()=>alert((d.dataset.connected === '1' ? '会话活跃' : '会话未连接') + '\nURL: ' + location.href + (d.dataset.detail ? '\nBridge: ' + d.dataset.detail : '')));
+  d.addEventListener('mouseenter', () => {
+    if (collapseTimer) clearTimeout(collapseTimer);
+    setExpanded(true);
+  });
+  d.addEventListener('mouseleave', () => {
+    if (collapseTimer) clearTimeout(collapseTimer);
+    setExpanded(false);
+  });
+  d.addEventListener('pointerdown', (e) => {
+    dragging = true;
+    moved = false;
+    dragOffsetY = e.clientY - d.getBoundingClientRect().top;
+    d.dataset.dragging = '1';
+    d.setPointerCapture(e.pointerId);
+  });
+  d.addEventListener('pointermove', (e) => {
+    if (!dragging) return;
+    const nextTop = clampTop(e.clientY - dragOffsetY);
+    if (Math.abs(nextTop - lastTop) > 2) moved = true;
+    lastTop = nextTop;
+    d.style.top = lastTop + 'px';
+  });
+  d.addEventListener('pointerup', (e) => {
+    dragging = false;
+    d.dataset.dragging = '0';
+    try { d.releasePointerCapture(e.pointerId); } catch (_) {}
+  });
+  close.addEventListener('pointerdown', (e) => { e.stopPropagation(); });
+  close.addEventListener('click', (e) => {
+    e.stopPropagation();
+    dismissed = true;
+    setExpanded(false);
+    d.style.display = 'none';
+  });
+  window.addEventListener('resize', () => {
+    lastTop = clampTop(lastTop);
+    d.style.top = lastTop + 'px';
+  });
   (document.body||document.documentElement).appendChild(d);
   setBadgeState(false, '');
   refreshBadgeState();
-  setInterval(refreshBadgeState, 3000);
+  const refreshTimer = setInterval(refreshBadgeState, 3000);
+  window.__agentBrowserCliCleanup = () => {
+    clearInterval(refreshTimer);
+    d.remove();
+    s.remove();
+  };
 })();
 
-new MutationObserver(muts => {
+const agentBrowserCliObserver = new MutationObserver(muts => {
   for (const m of muts) for (const n of m.addedNodes) {
     if (n.id === TID || (n.querySelector && n.querySelector('#' + TID))) {
       const el = n.id === TID ? n : n.querySelector('#' + TID);
       handle(el);
     }
   }
-}).observe(document.documentElement, { childList: true, subtree: true });
+});
+agentBrowserCliObserver.observe(document.documentElement, { childList: true, subtree: true });
+window.__agentBrowserCliObserverCleanup = () => agentBrowserCliObserver.disconnect();
 
 /**
  * Consume page-side bridge requests and forward them to the extension background worker.

package/assets/tmwd_cdp_bridge/manifest.json

@@ -10,6 +10,7 @@
     "debugger",
     "scripting",
     "alarms",
+    "storage",
     "declarativeNetRequest",
     "management",
     "contentSettings"
@@ -37,4 +38,4 @@
     "default_popup": "popup.html",
     "default_title": "TMWD CDP Bridge"
   }
-}
+}

package/assets/tmwd_cdp_bridge/popup.html

@@ -3,17 +3,32 @@
 <head>
 <meta charset="utf-8">
 <style>
-body{width:420px;max-height:500px;margin:0;padding:8px;font:12px monospace;background:#1e1e1e;color:#d4d4d4;overflow-y:auto}
+body{width:420px;max-height:560px;margin:0;padding:8px;font:12px monospace;background:#1e1e1e;color:#d4d4d4;overflow-y:auto}
 h3{margin:4px 0;color:#569cd6}
 button{background:#264f78;color:#fff;border:none;padding:4px 12px;cursor:pointer;border-radius:3px;margin-bottom:6px}
 button:hover{background:#37699e}
+input{width:86px;background:#252526;color:#d4d4d4;border:1px solid #3c3c3c;border-radius:3px;padding:4px;font:12px monospace}
+label{display:inline-flex;align-items:center;gap:6px;margin-right:6px}
+.panel{margin-bottom:8px;padding:6px;background:#252526;border-radius:3px}
+.row{display:flex;align-items:center;gap:6px;margin-top:6px}
+.status{color:#9cdcfe}
+.error{color:#f48771}
 pre{white-space:pre-wrap;word-break:break-all;margin:0;padding:6px;background:#252526;border-radius:3px;max-height:420px;overflow-y:auto}
 </style>
 </head>
 <body>
+<h3>🔌 Bridge</h3>
+<div class="panel">
+  <div id="bridgeStatus" class="status">读取连接状态...</div>
+  <div class="row">
+    <label>端口 <input id="port" type="number" min="1" max="65535"></label>
+    <button id="savePort">保存并重连</button>
+  </div>
+  <div id="portMsg"></div>
+</div>
 <h3>🍪 Cookies</h3>
 <button id="refresh">刷新</button>
 <pre id="out">点击刷新获取 cookies...</pre>
 <script src="popup.js"></script>
 </body>
-</html>
+</html>

package/assets/tmwd_cdp_bridge/popup.js

@@ -1,10 +1,49 @@
 document.addEventListener('DOMContentLoaded', () => {
-  const out = document.getElementById('out');
   const btn = document.getElementById('refresh');
+  const savePortBtn = document.getElementById('savePort');
   btn.addEventListener('click', fetchCookies);
+  savePortBtn.addEventListener('click', savePort);
+  refreshBridgeStatus();
   fetchCookies();
 });
 
+async function refreshBridgeStatus() {
+  const status = document.getElementById('bridgeStatus');
+  const portInput = document.getElementById('port');
+  try {
+    const resp = await chrome.runtime.sendMessage({ cmd: 'status' });
+    if (!resp?.ok) throw new Error(resp?.error || 'unknown');
+    const data = resp.data || {};
+    portInput.value = data.wsPort || 18765;
+    status.textContent = `状态: ${data.wsConnected ? '已连接' : '未连接'} ${data.wsUrl || ''}`;
+  } catch (e) {
+    status.textContent = '状态读取失败: ' + e.message;
+    status.className = 'error';
+  }
+}
+
+async function savePort() {
+  const portInput = document.getElementById('port');
+  const portMsg = document.getElementById('portMsg');
+  try {
+    const port = Number(portInput.value);
+    if (!Number.isInteger(port) || port < 1 || port > 65535) {
+      throw new Error('端口必须是 1-65535');
+    }
+    if (port === 18767) {
+      throw new Error('18767 是 agent-browser-cli API 端口，请换一个插件端口');
+    }
+    const resp = await chrome.runtime.sendMessage({ cmd: 'setPort', port });
+    if (!resp?.ok) throw new Error(resp?.error || 'unknown');
+    portMsg.textContent = `Success: 已保存端口 ${port}，正在使用新端口重连`;
+    portMsg.className = 'status';
+    await refreshBridgeStatus();
+  } catch (e) {
+    portMsg.textContent = '保存失败: ' + e.message;
+    portMsg.className = 'error';
+  }
+}
+
 async function fetchCookies() {
   const out = document.getElementById('out');
   try {
@@ -21,4 +60,4 @@ async function fetchCookies() {
     const str = resp.data.map(c => `${c.name}=${c.value}`).join('; ');
     await navigator.clipboard.writeText(str);
   } catch (e) { out.textContent = 'Error: ' + e.message; }
-}
+}

package/npm/bin/agent-browser-cli.js

@@ -10,6 +10,7 @@ function platformPackageName() {
   if (platform === "darwin" && arch === "arm64") return "@sleepinsummer/agent-browser-cli-darwin-arm64";
   if (platform === "darwin" && arch === "x64") return "@sleepinsummer/agent-browser-cli-darwin-x64";
   if (platform === "linux" && arch === "x64") return "@sleepinsummer/agent-browser-cli-linux-x64";
+  if (platform === "linux" && arch === "arm64") return "@sleepinsummer/agent-browser-cli-linux-arm64";
   if (platform === "win32" && arch === "x64") return "@sleepinsummer/agent-browser-cli-win32-x64";
   throw new Error(`Unsupported platform: ${platform}-${arch}`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sleepinsummer/agent-browser-cli",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "description": "Agent-oriented browser sensing and control CLI backed by a native Rust daemon.",
   "license": "MIT",
   "bin": {
@@ -21,10 +21,11 @@
     "postinstall": "node npm/postinstall.js"
   },
   "optionalDependencies": {
-    "@sleepinsummer/agent-browser-cli-darwin-arm64": "0.2.5",
-    "@sleepinsummer/agent-browser-cli-darwin-x64": "0.2.5",
-    "@sleepinsummer/agent-browser-cli-linux-x64": "0.2.5",
-    "@sleepinsummer/agent-browser-cli-win32-x64": "0.2.5"
+    "@sleepinsummer/agent-browser-cli-darwin-arm64": "0.2.7",
+    "@sleepinsummer/agent-browser-cli-darwin-x64": "0.2.7",
+    "@sleepinsummer/agent-browser-cli-linux-x64": "0.2.7",
+    "@sleepinsummer/agent-browser-cli-linux-arm64": "0.2.7",
+    "@sleepinsummer/agent-browser-cli-win32-x64": "0.2.7"
   },
   "engines": {
     "node": ">=18"

package/skills/agent-browser-cli/SKILL.md

@@ -44,7 +44,7 @@ assets/tmwd_cdp_bridge
 扩展配置必须存在：
 
 ```js
-const TID = '__agent_browser_cli_bridge_26c9f1';
+globalThis.__agent_browser_cli_TID = '__agent_browser_cli_bridge_26c9f1';
 ```
 
 对应文件：
@@ -72,13 +72,36 @@ agent-browser-cli restart
 ```
 
 常驻服务端口：
-- `18765`：底层 `TMWebDriver` WebSocket，Chrome 扩展连接使用。
-- `18767`：外层 `agent-browser-cli` HTTP 服务，供 CLI 复用会话。
+- `18765`：默认插件 WebSocket 端口，Chrome 扩展连接使用，可通过插件 popup 或 `agent-browser-cli set-extension-port <port>` 修改。
+- `18767`：外层 `agent-browser-cli` HTTP API 端口，供 CLI 复用会话，不能作为插件端口使用。
+
+插件端口配置文件：
+
+```text
+~/.agent-browser-cli/config.json
+```
+
+最小配置：
+
+```json
+{
+  "extension_port": 18765
+}
+```
+
+CLI 修改插件端口：
+
+```bash
+agent-browser-cli set-extension-port 18766
+```
+
+Chrome 插件 popup 也可以修改插件端口并立即重连。插件端口必须和 CLI 配置中的 `extension_port` 一致。
 
 成功标志：
 - 返回 `status=success`
 - 能看到 `tabs_count`
-- 首次运行会拉起本地 WS 服务 `ws://127.0.0.1:18765`
+- `agent-browser-cli status` 中 `ports.extension.matched=true`
+- `agent-browser-cli status` 中 `connection.extension_connected=true`
 
 ## 推荐 CLI 调用