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

package/README.md

@@ -58,6 +58,20 @@ ui-inspector doctor <remote> --dev-port <dev端口>   # 定位断在哪层并打
 
 恢复顺序：先确保远程 bridge 活（`ui-inspector bridge` / `install --remote`）→ 再接本地隧道（`ui-inspector link`）→ 再看远程 dev server。
 
+### 直连模式（笔记本能直达开发机内网 IP、堡垒机禁转发时用）
+
+如果你的笔记本本来就能直连开发机的内网 IP（比如 `/etc/hosts` 把 `devlocal.oreateai.com` 指到 `10.25.64.64`，浏览器直接就能打开 dev 页），那连 SSH 隧道都不用——把 bridge 暴露到开发机网卡，浏览器直连即可，正好绕开「堡垒机禁止 SSH 转发」：
+
+```bash
+# 开发机上：bridge 绑 0.0.0.0（install --remote 顺带起，或单独跑 bridge）
+ui-inspector install --remote --host 0.0.0.0
+# 或：ui-inspector bridge --host 0.0.0.0 --port 8917
+```
+
+然后扩展弹窗「传输通路」选 `远程（HTTP bridge）`，地址填**完整地址** `devlocal.oreateai.com:8917`（或 `10.25.64.64:8917`），不用 `ui-inspector link`。
+
+> 注意：`--host 0.0.0.0` 会把 bridge 暴露在内网，谁能访问到这个端口谁就能写 pending；仅在可信内网用。dev 页若是 https、扩展连 http bridge 被浏览器拦，则退回隧道模式或给 bridge 上 https。
+
 本地仍需一次：加载扩展（`chrome://extensions` 选 `extension` 目录），在弹窗把传输切到 `远程（HTTP bridge）`、填本地端口、加上你的 dev 域名。bridge 只绑 127.0.0.1、不暴露到网络，访问全程走 SSH 转发，所以 https 页面连 `127.0.0.1` 不触发混合内容拦截。
 
 ## 卸载 / 状态

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

@@ -61,7 +61,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 +78,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 +107,34 @@ 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) {
         out('\n== 远程开发机：跳过 native host/扩展（这台没浏览器），后台启动 bridge ==');
-        startBridgeDetached(port);
-        out(`\n本地笔记本上执行：ui-inspector link <这台机器的 ssh 目标> --port <dev端口>`);
+        startBridgeDetached(port, host);
+        if (host && host !== '127.0.0.1') {
+            out(`\n直连模式：浏览器可直接访问本机 ${host}:${port}，弹窗里填该地址，无需 ui-inspector link。`);
+        } else {
+            out(`\n本地笔记本上执行：ui-inspector link <这台机器的 ssh 目标>`);
+        }
         return;
     }
     installNativeHost();
@@ -147,18 +158,27 @@ function link({remote, bridgePort, remoteBridgePort}) {
     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(
+        `  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', null);
     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>');
+    if (host) {
+        process.env.UI_INSPECTOR_BRIDGE_HOST = String(host);
+    }
+    out(`启动 HTTP bridge：监听 ${host || '127.0.0.1'}:${port}`);
+    if (host && host !== '127.0.0.1') {
+        out('直连模式：浏览器可直接访问本机该地址（弹窗里填完整地址），无需 SSH 隧道。');
+    } else {
+        out('隧道模式：本地经 SSH 转发访问，ssh -L ' + port + ':127.0.0.1:' + port + ' <remote>');
+    }
     import(resolve(pkgRoot, 'bridge/server.mjs'));
 }
 
@@ -293,17 +313,17 @@ async function doctor() {
 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('  install --remote 远程开发机：装 hook/MCP 并后台起 bridge（--port 默认 8917，--host 0.0.0.0 可直连免隧道）');
     out('  link <remote>    本地：SSH 把 bridge 端口转发到本地（--bridge-port <本地> [--remote-bridge-port <远程>]）');
     out('  doctor <remote>  本地：自检远程链路断在哪层并打印恢复命令（--bridge-port <本地> [--dev-port <dev端口>]）');
     out('  uninstall        移除上述注册（加 --purge 连 ~/.ui-inspector 数据一起删）');
     out('  status           查看安装状态');
-    out('  bridge           启动 HTTP bridge（远程开发用，--port 默认 8917）');
+    out('  bridge           启动 HTTP bridge（--port 默认 8917，--host 默认 127.0.0.1；直连填 0.0.0.0）');
 }
 
 const cmd = process.argv[2] || 'help';
 if (cmd === 'install') {
-    install({remote: process.argv.includes('--remote'), port: getOpt('--port', '8917')});
+    install({remote: process.argv.includes('--remote'), port: getOpt('--port', '8917'), host: getOpt('--host', null)});
 } else if (cmd === 'link') {
     link(parseLink());
 } else if (cmd === 'doctor') {

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/popup.html

@@ -142,21 +142,15 @@
                     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="8917 或 devlocal.oreateai.com:8917"
                     />
                 </div>
                 <div class="hint">
-                    只填本地端口（host 固定 127.0.0.1）。远程开发：远程跑
-                    <code>ui-inspector bridge</code>
-                    ，
-                    <code>ui-inspector link</code>
-                    把端口转发到本地。
+                    隧道模式填端口（如 <code>8917</code>，默认连本地 127.0.0.1）；直连模式填完整地址（如
+                    <code>devlocal.oreateai.com:8917</code>）。
                 </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.1",
     "description": "按住 Alt 点选页面元素，把「元素 + Vue 组件源码路径」交给 Comate 定位源码修改。浏览器扩展 + Native Messaging host + MCP + hook。",
     "type": "module",
     "license": "MIT",