comate-ui-inspector 0.1.3 → 0.1.4-alpha.2

package/README.md

@@ -33,32 +33,31 @@ ui-inspector install           # 注册 native host + 个人级 hook，并打印
 - **生效域名**：默认已含 `localhost` / `127.0.0.1`；项目域名（如 `https://local.oreateai.com`）自己加，添加时浏览器会弹权限申请，允许后即在该域名注入选取脚本。
 - **传输通路**：
     - `本地（Native Messaging）`——默认，浏览器按需拉起 `host.mjs`，零常驻。
-    - `远程（HTTP bridge）`——只填**本地端口**（host 固定 127.0.0.1，默认 `8917`），用于远程开发（见下）。
+    - `远程（HTTP bridge）`——填开发机 bridge 的**完整地址**（如 `devlocal.oreateai.com:8917`），用于远程开发（见下）。
 
-## 远程开发（HTTP bridge）
+## 远程开发（HTTP bridge 直连）
 
-浏览器在本地、代码与 Comate 在远程开发机时，Native Messaging 跨不了机，改用 HTTP bridge。流程精简为两条命令：
+浏览器在本地、代码与 Comate 在远程开发机时，Native Messaging 跨不了机，改用 **HTTP bridge 直连**：在开发机把 bridge 暴露到网卡，浏览器用开发机可达地址直接连，无需 SSH 隧道。
+
+前提：你的笔记本能直连开发机的内网地址（通常 `/etc/hosts` 把 `devlocal.oreateai.com` 指到开发机 IP，浏览器本来就能打开 dev 页）。
 
 ```bash
-# 远程机上（和 Comate hook/MCP 同机）：装 hook/MCP 并后台起 bridge
-ui-inspector install --remote            # --port 默认 8917；跳过无浏览器的 native host
-# 本地笔记本：把远程 bridge 端口转发到本地 127.0.0.1（dev server 端口自行转发）
-ui-inspector link <remote-ssh-目标>                        # 本地/远程 bridge 都用默认 8917
-# 本地与远程 bridge 端口不同时才两个都填：
-ui-inspector link <remote-ssh-目标> --bridge-port <本地> --remote-bridge-port <远程>
+# 开发机上（和 Comate hook/MCP 同机）：装 hook/MCP 并后台起 bridge（默认绑 0.0.0.0）
+ui-inspector install --remote
+# 或单独起：ui-inspector bridge --host 0.0.0.0 --port 8917
 ```
 
-`install --remote` 会打印 MCP 配置（贴进**远程**的 Comate 并 reload），并把 bridge 后台拉起（日志在 `~/.ui-inspector/bridge.log`）。`link` 本质是 `ssh -N -L <本地bridge端口>:127.0.0.1:<远程bridge端口> <remote>`，保持前台、Ctrl-C 断开。端口参数只有两个：本地 `--bridge-port`、远程 `--remote-bridge-port`（默认相同，相同时只填 `--bridge-port`、省略即默认 8917）；弹窗里填的是**本地**那个。dev server 端口由你的远程开发工具自行转发，`link` 不再代管。
+`install --remote` 会打印 MCP 配置（贴进**开发机上的** Comate 并 reload），并把 bridge 后台绑 `0.0.0.0:8917` 拉起（日志在 `~/.ui-inspector/bridge.log`）。
 
-链路断了（ssh 掉线 / 远程 bridge 或 dev server 停了）时，先在本地自检：
+然后在浏览器（笔记本）：加载扩展（`chrome://extensions` 选 `extension` 目录）→ 点扩展图标，弹窗里把**传输通路**选「远程（HTTP bridge）」、地址填**完整地址** `devlocal.oreateai.com:8917`、生效域名加上你的 dev 域名。
 
+验证直连：
 ```bash
-ui-inspector doctor <remote> --dev-port <dev端口>   # 定位断在哪层并打印对应恢复命令
+curl http://devlocal.oreateai.com:8917/state     # 回 {"ok":true,...} 即通
 ```
+不通多半是开发机防火墙没放行该端口，或 bridge 没起（看 `~/.ui-inspector/bridge.log`）。
 
-恢复顺序：先确保远程 bridge 活（`ui-inspector bridge` / `install --remote`）→ 再接本地隧道（`ui-inspector link`）→ 再看远程 dev server。
-
-本地仍需一次：加载扩展（`chrome://extensions` 选 `extension` 目录），在弹窗把传输切到 `远程（HTTP bridge）`、填本地端口、加上你的 dev 域名。bridge 只绑 127.0.0.1、不暴露到网络，访问全程走 SSH 转发，所以 https 页面连 `127.0.0.1` 不触发混合内容拦截。
+> 注意：`--host 0.0.0.0` 会把 bridge 暴露在内网，谁能访问到这个端口谁就能写 pending；仅在可信内网用。dev 页若是 https、扩展连 http bridge 被浏览器拦，则给 bridge 上 https。
 
 ## 卸载 / 状态
 

package/bridge/server.mjs

@@ -17,6 +17,8 @@ import {homedir} from 'node:os';
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
 const statusFile = resolve(homedir(), '.ui-inspector/status.json');
 const PORT = Number(process.env.UI_INSPECTOR_BRIDGE_PORT) || 8917;
+// 默认只绑 127.0.0.1（走 SSH 隧道）；直连模式（笔记本能直达开发机内网 IP）时用 0.0.0.0 暴露到网卡。
+const HOST = process.env.UI_INSPECTOR_BRIDGE_HOST || '127.0.0.1';
 
 function readStore() {
     try {
@@ -83,6 +85,6 @@ const server = createServer((req, res) => {
     json(res, 404, {ok: false, error: 'not found'});
 });
 
-server.listen(PORT, '127.0.0.1', () => {
-    process.stdout.write(`ui-inspector bridge listening on http://127.0.0.1:${PORT}\n`);
+server.listen(PORT, HOST, () => {
+    process.stdout.write(`ui-inspector bridge listening on http://${HOST}:${PORT}\n`);
 });

package/cli.mjs

@@ -4,8 +4,7 @@
  *   npm i -g comate-ui-inspector
  *   ui-inspector install      # 注册 native host + 写个人级 hook + 打印 MCP 配置与扩展目录
  *   ui-inspector install --remote  # 远程开发机：装 hook/MCP 并后台起 bridge（跳过无浏览器的 native host）
- *   ui-inspector link <remote> --bridge-port <本地> [--remote-bridge-port <远程>]  # 本地：SSH 把 bridge 端口转发到本地 127.0.0.1
- *   ui-inspector doctor <remote> --bridge-port <本地> [--dev-port <dev端口>] # 本地：自检远程链路断在哪层并打印恢复命令
+ *   ui-inspector install --remote  # 远程开发机：装 hook/MCP 并后台起 bridge（默认绑 0.0.0.0 供直连）
  *   ui-inspector uninstall    # 移除 native host 清单 + 个人级 hook（--purge 连 ~/.ui-inspector 一起删）
  *   ui-inspector status       # 查看安装状态
  *   ui-inspector bridge       # 启动 HTTP bridge（远程开发用，--port 默认 8917）
@@ -18,7 +17,6 @@ import {dirname, join, resolve} from 'node:path';
 import {fileURLToPath} from 'node:url';
 import {homedir, platform} from 'node:os';
 import {spawn} from 'node:child_process';
-import http from 'node:http';
 
 const HOST_NAME = 'com.oreate.ui_inspector';
 const EXT_ID = 'akpiagdjfeeaioifjepbmonpallececo';
@@ -61,7 +59,10 @@ function out(text) {
     process.stdout.write(`${text}\n`);
 }
 function installHookAndMcp() {
-    const hookCommand = `node "${hookPath}"`;
+    // 用绝对路径的 node（当前运行 install 的这个），而不是裸 `node`：
+    // Comate 拉起 hook/MCP 时 PATH 极简（不含 nvm/fnm 目录），裸 `node` 会「未找到命令」。
+    const nodeBin = process.execPath;
+    const hookCommand = `"${nodeBin}" "${hookPath}"`;
     const config = readHooks() || {hooks: {}};
     config.hooks = config.hooks || {};
     const list = Array.isArray(config.hooks.UserPromptSubmit) ? config.hooks.UserPromptSubmit : [];
@@ -75,7 +76,7 @@ function installHookAndMcp() {
         out('hook already present, skip');
     }
     out('\n== 把下面加进 Comate 的 MCP 配置（stdio），然后 reload Comate ==');
-    out(JSON.stringify({mcpServers: {'ui-inspector': {command: 'node', args: [serverPath]}}}, null, 4));
+    out(JSON.stringify({mcpServers: {'ui-inspector': {command: nodeBin, args: [serverPath]}}}, null, 4));
 }
 
 function installNativeHost() {
@@ -104,26 +105,31 @@ function installNativeHost() {
 }
 
 // 后台拉起 bridge 并与本进程脱钩，install --remote 用：装完 hook/MCP 顺手把 bridge 跑起来。
-function startBridgeDetached(port) {
+function startBridgeDetached(port, host) {
     mkdirSync(pendingDir, {recursive: true});
     const logFile = resolve(pendingDir, 'bridge.log');
     const fd = openSync(logFile, 'a');
+    const env = {...process.env, UI_INSPECTOR_BRIDGE_PORT: String(port)};
+    if (host) {
+        env.UI_INSPECTOR_BRIDGE_HOST = String(host);
+    }
     const child = spawn(process.execPath, [resolve(pkgRoot, 'bridge/server.mjs')], {
         detached: true,
         stdio: ['ignore', fd, fd],
-        env: {...process.env, UI_INSPECTOR_BRIDGE_PORT: String(port)},
+        env,
     });
     child.unref();
-    out(`bridge 已后台启动（pid ${child.pid}，端口 ${port}），日志：${logFile}`);
+    out(`bridge 已后台启动（pid ${child.pid}，监听 ${host || '127.0.0.1'}:${port}），日志：${logFile}`);
     out(`  停止：kill ${child.pid}`);
 }
 
-function install({remote, port}) {
+function install({remote, port, host}) {
     installHookAndMcp();
     if (remote) {
+        const bindHost = host || '0.0.0.0';
         out('\n== 远程开发机：跳过 native host/扩展（这台没浏览器），后台启动 bridge ==');
-        startBridgeDetached(port);
-        out(`\n本地笔记本上执行：ui-inspector link <这台机器的 ssh 目标> --port <dev端口>`);
+        startBridgeDetached(port, bindHost);
+        out(`\n浏览器在扩展弹窗里把传输设为「远程（HTTP bridge）」、地址填「本机可达地址:${port}」（如 devlocal.oreateai.com:${port}）即可直连。`);
         return;
     }
     installNativeHost();
@@ -133,32 +139,13 @@ function install({remote, port}) {
     out('完成后：按住 Alt 点元素多选 → 回 Comate 写修改意见。');
 }
 
-// 本地笔记本：把远程 bridge 端口转发到本地 127.0.0.1。端口参数只有两个：
-//   --bridge-port <本地>（默认 8917）、--remote-bridge-port <远程>（默认与本地相同）。
-//   本地=远程时只填 --bridge-port；不同才两个都填。dev server 端口自行转发。
-function link({remote, bridgePort, remoteBridgePort}) {
-    if (!remote) {
-        out('用法：ui-inspector link <remote-ssh-目标> [--bridge-port <本地端口>] [--remote-bridge-port <远程端口>]');
-        out('例：  ui-inspector link dev-box                                    # 本地/远程都用默认 8917');
-        out('      ui-inspector link dev-box --bridge-port 9000                 # 本地=远程=9000');
-        out('      ui-inspector link dev-box --bridge-port 9000 --remote-bridge-port 8917  # 本地 9000 → 远程 8917');
-        return;
-    }
-    const rbp = remoteBridgePort || bridgePort;
-    const args = ['-N', '-L', `${bridgePort}:127.0.0.1:${rbp}`, remote];
-    out(`转发中（Ctrl-C 断开）：ssh ${args.join(' ')}`);
-    out(`  bridge → 本地 127.0.0.1:${bridgePort} ⇢ 远程 127.0.0.1:${rbp}（弹窗里填本地 ${bridgePort}；远程 bridge 需在 ${rbp} 监听）`);
-    out(`  注：dev server 端口请自行转发（远程开发工具通常已转发，或另跑 ssh -L <dev>:127.0.0.1:<dev> ${remote}）`);
-    const child = spawn('ssh', args, {stdio: 'inherit'});
-    child.on('exit', code => process.exit(code ?? 0));
-}
-
 function bridge() {
-    const i = process.argv.indexOf('--port');
-    const port = i >= 0 && process.argv[i + 1] ? process.argv[i + 1] : '8917';
+    const port = getOpt('--port', '8917');
+    const host = getOpt('--host', '0.0.0.0');
     process.env.UI_INSPECTOR_BRIDGE_PORT = String(port);
-    out(`启动 HTTP bridge（远程开发传输）：127.0.0.1:${port}`);
-    out('本地浏览器经 SSH 端口转发访问：ssh -L ' + port + ':127.0.0.1:' + port + ' <remote>');
+    process.env.UI_INSPECTOR_BRIDGE_HOST = String(host);
+    out(`启动 HTTP bridge：监听 ${host}:${port}`);
+    out(`浏览器直连：扩展弹窗地址填「本机可达地址:${port}」（如 devlocal.oreateai.com:${port}）。`);
     import(resolve(pkgRoot, 'bridge/server.mjs'));
 }
 
@@ -216,98 +203,18 @@ function getOpt(name, def) {
     return i >= 0 && process.argv[i + 1] ? process.argv[i + 1] : def;
 }
 
-function parseLink() {
-    const rest = process.argv.slice(3);
-    let remote;
-    let bridgePort = '8917';
-    let remoteBridgePort;
-    let devPort;
-    for (let i = 0; i < rest.length; i++) {
-        const a = rest[i];
-        if (a === '--bridge-port') {
-            bridgePort = rest[++i];
-        } else if (a === '--remote-bridge-port') {
-            remoteBridgePort = rest[++i];
-        } else if (a === '--dev-port') {
-            devPort = rest[++i]; // 仅 doctor 用；放这里一并消费，避免其值被当成 remote
-        } else if (!a.startsWith('-')) {
-            remote = a;
-        }
-    }
-    return {remote, bridgePort, remoteBridgePort, devPort};
-}
-
-// 探测本地某端口的 http 可达性（2s 超时）。用 node:http 而非 fetch，兼容 node 18+。
-function probe(port, path) {
-    return new Promise(resolve => {
-        const req = http.get({host: '127.0.0.1', port: Number(port), path, timeout: 2000}, res => {
-            let body = '';
-            res.on('data', chunk => (body += chunk));
-            res.on('end', () => resolve({state: 'ok', code: res.statusCode, body}));
-        });
-        req.on('timeout', () => {
-            req.destroy();
-            resolve({state: 'timeout'});
-        });
-        req.on('error', err => resolve({state: err.code === 'ECONNREFUSED' ? 'refused' : 'error', err: String(err)}));
-    });
-}
-
-// 一键自检：定位远程开发链路（本地隧道 → 远程 bridge → 远程 dev server）断在哪层，并打印恢复命令。
-async function doctor() {
-    const {remote, bridgePort, remoteBridgePort, devPort} = parseLink();
-    const rm = remote || '<remote>';
-    const linkCmd =
-        `ui-inspector link ${rm}` +
-        (bridgePort !== '8917' ? ` --bridge-port ${bridgePort}` : '') +
-        (remoteBridgePort && remoteBridgePort !== bridgePort ? ` --remote-bridge-port ${remoteBridgePort}` : '');
-    out('ui-inspector doctor（远程开发链路自检）：');
-
-    const b = await probe(bridgePort, '/state');
-    if (b.state === 'ok') {
-        out(`  [1] bridge ✓ 127.0.0.1:${bridgePort} 可达——本地→隧道→远程 bridge 全通`);
-    } else if (b.state === 'refused') {
-        out(`  [1] bridge ✗ 本地 127.0.0.1:${bridgePort} 无人监听 → SSH 隧道断了（或没起）`);
-        out(`        恢复：${linkCmd}`);
-    } else {
-        out(`  [1] bridge ✗ 隧道在、但远程 bridge 无响应（${b.state}）`);
-        out(`        恢复：登远程机跑 ui-inspector bridge（或 install --remote），看 ~/.ui-inspector/bridge.log`);
-    }
-
-    if (devPort) {
-        const d = await probe(devPort, '/');
-        if (d.state === 'refused') {
-            out(`  [2] dev    ✗ 本地 127.0.0.1:${devPort} 不可达 → 该端口没转发，或远程 dev server 没起`);
-        } else if (d.state === 'timeout') {
-            out(`  [2] dev    ✗ 127.0.0.1:${devPort} 超时 → 远程 dev server 可能挂了`);
-        } else {
-            out(`  [2] dev    ✓ 127.0.0.1:${devPort} 可达（HTTP ${d.code}）`);
-        }
-    } else {
-        out('  [2] dev    - 未传 --dev-port，跳过 dev server 检查');
-    }
-
-    out('\n恢复顺序：先确保远程 bridge 活 → 再接本地隧道（link）→ 再看远程 dev server（自行转发）。');
-}
-
 function help() {
-    out('用法：ui-inspector <install|uninstall|status|bridge|link|doctor>');
-    out('  install          注册 native host + 个人级 hook，并打印 MCP 配置与扩展目录');
-    out('  install --remote 远程开发机：装 hook/MCP 并后台起 bridge（跳过 native host，--port 默认 8917）');
-    out('  link <remote>    本地：SSH 把 bridge 端口转发到本地（--bridge-port <本地> [--remote-bridge-port <远程>]）');
-    out('  doctor <remote>  本地：自检远程链路断在哪层并打印恢复命令（--bridge-port <本地> [--dev-port <dev端口>]）');
+    out('用法：ui-inspector <install|uninstall|status|bridge>');
+    out('  install          本地：注册 native host + 个人级 hook，并打印 MCP 配置与扩展目录');
+    out('  install --remote 远程开发机：装 hook/MCP 并后台起 bridge（默认绑 0.0.0.0 供浏览器直连，--port 默认 8917）');
     out('  uninstall        移除上述注册（加 --purge 连 ~/.ui-inspector 数据一起删）');
     out('  status           查看安装状态');
-    out('  bridge           启动 HTTP bridge（远程开发用，--port 默认 8917）');
+    out('  bridge           启动 HTTP bridge（--port 默认 8917，--host 默认 0.0.0.0 供直连）');
 }
 
 const cmd = process.argv[2] || 'help';
 if (cmd === 'install') {
-    install({remote: process.argv.includes('--remote'), port: getOpt('--port', '8917')});
-} else if (cmd === 'link') {
-    link(parseLink());
-} else if (cmd === 'doctor') {
-    doctor();
+    install({remote: process.argv.includes('--remote'), port: getOpt('--port', '8917'), host: getOpt('--host', null)});
 } else if (cmd === 'uninstall') {
     uninstall({purge: process.argv.includes('--purge')});
 } else if (cmd === 'status') {

package/extension/background.js

@@ -4,24 +4,37 @@
  * 两件事：
  * 1) 传输适配：把内容脚本的 ingest/state 转发给本地后端。
  *    - native（默认，本地开发）：chrome.runtime.sendNativeMessage 按需拉起 host.mjs。
- *    - http（远程开发）：fetch http://127.0.0.1:<bridgePort>（/ingest、/state），远程机上跑 bridge/server.mjs。
+ *    - http（远程开发）：fetch bridge 的 /ingest、/state。bridgeTarget 为端口（→127.0.0.1:端口）或完整地址。
  * 2) 动态注册内容脚本：目标域名不再硬编码在 manifest，改由弹窗（popup）写入 storage，
  *    这里按配置用 chrome.scripting 注册（MAIN + ISOLATED 两份）。
  */
 const HOST = 'com.oreate.ui_inspector';
 
 // localhost / 127.0.0.1 是通用开发地址，作默认种子；项目专属域名（如 local.oreateai.com）在弹窗里加。
-// 远程模式下扩展永远连本地 SSH 转发出来的 127.0.0.1，host 固定，只需配端口。
+// bridgeTarget：隧道模式填端口（→ 127.0.0.1:端口）；直连模式填 host:port 或完整 URL。
 const DEFAULTS = {
     domains: ['http://localhost/*', 'http://127.0.0.1/*'],
     transport: 'native',
-    bridgePort: '8917',
+    bridgeTarget: '8917',
 };
 
 function getConfig() {
     return chrome.storage.local.get(DEFAULTS);
 }
 
+// 把弹窗里的 bridgeTarget 归一成请求 base：
+//   纯数字 → http://127.0.0.1:<端口>；带 http(s):// → 原样；其余 → 补 http://
+function bridgeBase(target) {
+    const t = String(target || '').trim();
+    if (/^\d+$/.test(t)) {
+        return `http://127.0.0.1:${t}`;
+    }
+    if (/^https?:\/\//i.test(t)) {
+        return t.replace(/\/+$/, '');
+    }
+    return `http://${t}`.replace(/\/+$/, '');
+}
+
 // ---------- 传输 ----------
 function viaNative(message) {
     return new Promise(resolve => {
@@ -35,8 +48,8 @@ function viaNative(message) {
     });
 }
 
-async function viaHttp(port, message) {
-    const base = `http://127.0.0.1:${port}`;
+async function viaHttp(target, message) {
+    const base = bridgeBase(target);
     try {
         if (message.type === 'ingest') {
             const r = await fetch(`${base}/ingest`, {
@@ -55,7 +68,7 @@ async function viaHttp(port, message) {
 
 async function dispatch(message) {
     const cfg = await getConfig();
-    return cfg.transport === 'http' ? viaHttp(cfg.bridgePort, message) : viaNative(message);
+    return cfg.transport === 'http' ? viaHttp(cfg.bridgeTarget, message) : viaNative(message);
 }
 
 chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {

package/extension/bridge-content.js

@@ -10,7 +10,8 @@
  */
 (function () {
     const alive = () => !!(chrome.runtime && chrome.runtime.id);
-    let lastStatusId; // 首轮只记录、不弹；之后 id 变化才弹 toast
+    let statusSeeded = false; // 首轮只记录当前状态（避免重放旧 toast），之后任何变化都弹
+    let lastStatusId = null;
 
     window.addEventListener('message', event => {
         if (event.source !== window || !event.data || event.data.__uiInspector !== 'selection') {
@@ -43,14 +44,14 @@
                     window.postMessage({__uiInspectorBridge: 'cleared'}, '*');
                 }
                 const status = resp.status;
-                if (status && status.id !== undefined) {
-                    if (lastStatusId !== undefined && status.id !== lastStatusId) {
-                        window.postMessage(
-                            {__uiInspectorBridge: 'status', text: status.text, level: status.level},
-                            '*'
-                        );
-                    }
-                    lastStatusId = status.id;
+                const id = status && status.id !== undefined ? status.id : null;
+                if (!statusSeeded) {
+                    // 首轮：记录当前状态 id（可能是上轮遗留），本轮不弹，避免刷新页面重放旧 toast
+                    statusSeeded = true;
+                    lastStatusId = id;
+                } else if (status && id !== lastStatusId) {
+                    lastStatusId = id;
+                    window.postMessage({__uiInspectorBridge: 'status', text: status.text, level: status.level}, '*');
                 }
             });
         } catch {

package/extension/inspector-main.js

@@ -38,19 +38,18 @@
         }, 1800);
     }
 
-    // MCP notify_browser 推送的状态，复用底部这颗 pill：
-    // 「修改中」(info) 常驻不消失，「已完成」(success) /「失败」(error) 自动淡出。
+    // MCP notify_browser 推送的状态，复用底部这颗 pill。
+    // 都会自动淡出，避免卡住：info(修改中) 6s，success/error 2.6s。
     function showStatus(text, level) {
         window.clearTimeout(showHint._t);
         window.clearTimeout(showStatus._t);
         hint.textContent = text;
         hint.style.background = level === 'success' ? '#16a34a' : level === 'error' ? '#dc2626' : '#111';
         hint.style.opacity = '1';
-        if (level === 'success' || level === 'error') {
-            showStatus._t = window.setTimeout(function () {
-                hint.style.opacity = '0';
-            }, 2600);
-        }
+        var ttl = level === 'success' || level === 'error' ? 2600 : 6000;
+        showStatus._t = window.setTimeout(function () {
+            hint.style.opacity = '0';
+        }, ttl);
     }
     function cssPath(el) {
         var parts = [];

package/extension/popup.html

@@ -142,21 +142,18 @@
                     class="row"
                     style="margin-top: 6px"
                 >
-                    <span style="color: #656d76">127.0.0.1 :</span>
                     <input
-                        id="bridge-port"
+                        id="bridge-target"
                         type="text"
-                        inputmode="numeric"
-                        placeholder="8917"
-                        style="max-width: 90px"
+                        placeholder="devlocal.oreateai.com:8917"
                     />
                 </div>
                 <div class="hint">
-                    只填本地端口（host 固定 127.0.0.1）。远程开发：远程跑
-                    <code>ui-inspector bridge</code>
-                    ，
-                    <code>ui-inspector link</code>
-                    把端口转发到本地。
+                    填开发机 bridge 的完整地址（如
+                    <code>devlocal.oreateai.com:8917</code>
+                    ）。开发机上
+                    <code>ui-inspector install --remote</code>
+                    起 bridge（默认绑 0.0.0.0 供直连）。
                 </div>
             </div>
         </section>

package/extension/popup.js

@@ -2,7 +2,7 @@
 const DEFAULTS = {
     domains: ['http://localhost/*', 'http://127.0.0.1/*'],
     transport: 'native',
-    bridgePort: '8917',
+    bridgeTarget: '8917',
 };
 const PROTECTED = new Set(DEFAULTS.domains); // 默认项不可删、不回收权限
 
@@ -106,23 +106,22 @@ function toggleBridge() {
 }
 
 async function renderTransport() {
-    const {transport, bridgePort} = await getConfig();
+    const {transport, bridgeTarget} = await getConfig();
     for (const r of document.querySelectorAll('input[name="transport"]')) {
         r.checked = r.value === transport;
     }
-    $('bridge-port').value = bridgePort;
+    $('bridge-target').value = bridgeTarget;
     toggleBridge();
 }
 
 async function saveTransport() {
     const transport = document.querySelector('input[name="transport"]:checked')?.value || 'native';
-    const raw = $('bridge-port').value.trim();
-    if (transport === 'http' && !/^\d+$/.test(raw)) {
-        msg('端口要是数字', false);
+    const bridgeTarget = $('bridge-target').value.trim() || DEFAULTS.bridgeTarget;
+    if (transport === 'http' && !bridgeTarget) {
+        msg('请填 bridge 端口或地址', false);
         return;
     }
-    const bridgePort = raw || DEFAULTS.bridgePort;
-    await chrome.storage.local.set({transport, bridgePort});
+    await chrome.storage.local.set({transport, bridgeTarget});
     msg('已保存传输设置');
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "comate-ui-inspector",
-    "version": "0.1.3",
+    "version": "0.1.4-alpha.2",
     "description": "按住 Alt 点选页面元素，把「元素 + Vue 组件源码路径」交给 Comate 定位源码修改。浏览器扩展 + Native Messaging host + MCP + hook。",
     "type": "module",
     "license": "MIT",