comate-ui-inspector 0.1.2-alpha.4 → 0.1.2-alpha.6

package/README.md

@@ -33,7 +33,7 @@ ui-inspector install           # 注册 native host + 个人级 hook，并打印
 - **生效域名**：默认已含 `localhost` / `127.0.0.1`；项目域名（如 `https://local.oreateai.com`）自己加，添加时浏览器会弹权限申请，允许后即在该域名注入选取脚本。
 - **传输通路**：
     - `本地（Native Messaging）`——默认，浏览器按需拉起 `host.mjs`，零常驻。
-    - `远程（HTTP bridge）`——填 bridge 地址（默认 `http://127.0.0.1:8917`），用于远程开发（见下）。
+    - `远程（HTTP bridge）`——只填**本地端口**（host 固定 127.0.0.1，默认 `8917`），用于远程开发（见下）。
 
 ## 远程开发（HTTP bridge）
 
@@ -46,7 +46,7 @@ ui-inspector install --remote            # --port 默认 8917；跳过无浏览
 ui-inspector link <remote-ssh-目标> --port <dev端口>
 ```
 
-`install --remote` 会打印 MCP 配置（贴进**远程**的 Comate 并 reload），并把 bridge 后台拉起（日志在 `~/.ui-inspector/bridge.log`）。`link` 本质是 `ssh -N -L 8917:127.0.0.1:8917 -L <dev端口>:127.0.0.1:<dev端口> <remote>`，保持前台、Ctrl-C 断开。
+`install --remote` 会打印 MCP 配置（贴进**远程**的 Comate 并 reload），并把 bridge 后台拉起（日志在 `~/.ui-inspector/bridge.log`）。`link` 本质是 `ssh -N -L <本地bridge端口>:127.0.0.1:<远程bridge端口> -L <dev端口>:127.0.0.1:<dev端口> <remote>`，保持前台、Ctrl-C 断开。远程 bridge 端口不必和本地一致：本地用 `--bridge-port`、远程用 `--remote-bridge-port`（默认两者相同）；弹窗里填的是**本地**那个端口。
 
 链路断了（ssh 掉线 / 远程 bridge 或 dev server 停了）时，先在本地自检：
 
@@ -56,7 +56,7 @@ ui-inspector doctor <remote> --port <dev端口>   # 定位断在哪层并打印
 
 恢复顺序：先确保远程 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` 不触发混合内容拦截。
+本地仍需一次：加载扩展（`chrome://extensions` 选 `extension` 目录），在弹窗把传输切到 `远程（HTTP bridge）`、填本地端口、加上你的 dev 域名。bridge 只绑 127.0.0.1、不暴露到网络，访问全程走 SSH 转发，所以 https 页面连 `127.0.0.1` 不触发混合内容拦截。
 
 ## 卸载 / 状态
 

package/cli.mjs

@@ -134,19 +134,28 @@ function install({remote, port}) {
 }
 
 // 本地笔记本：把远程 bridge 端口 + dev server 端口都转发到本地 127.0.0.1。
-function link({remote, devPort, bridgePort}) {
+// 远程 bridge 监听端口可与本地不同：-L <本地bridge端口>:127.0.0.1:<远程bridge端口>。
+function link({remote, devPort, bridgePort, remoteBridgePort}) {
     if (!remote) {
-        out('用法：ui-inspector link <remote-ssh-目标> --port <dev端口> [--bridge-port 8917]');
+        out(
+            '用法：ui-inspector link <remote-ssh-目标> --port <dev端口> [--bridge-port 8917] [--remote-bridge-port <远程端口>]'
+        );
         out('例：  ui-inspector link dev-box --port 5173');
         return;
     }
-    const args = ['-N', '-L', `${bridgePort}:127.0.0.1:${bridgePort}`];
+    const rbp = remoteBridgePort || bridgePort;
+    const args = ['-N', '-L', `${bridgePort}:127.0.0.1:${rbp}`];
     if (devPort) {
         args.push('-L', `${devPort}:127.0.0.1:${devPort}`);
     }
     args.push(remote);
     out(`转发中（Ctrl-C 断开）：ssh ${args.join(' ')}`);
-    out(`  bridge → 127.0.0.1:${bridgePort}${devPort ? `，dev → 127.0.0.1:${devPort}` : ''}`);
+    out(
+        `  bridge → 本地 127.0.0.1:${bridgePort} ⇢ 远程 127.0.0.1:${rbp}${devPort ? `；dev → 127.0.0.1:${devPort}` : ''}`
+    );
+    out(
+        `  提示：弹窗里的端口填本地的 ${bridgePort}；远程 bridge 需在 ${rbp} 上监听（ui-inspector bridge --port ${rbp}）。`
+    );
     const child = spawn('ssh', args, {stdio: 'inherit'});
     child.on('exit', code => process.exit(code ?? 0));
 }
@@ -219,17 +228,20 @@ function parseLink() {
     let remote;
     let devPort;
     let bridgePort = '8917';
+    let remoteBridgePort;
     for (let i = 0; i < rest.length; i++) {
         const a = rest[i];
         if (a === '--port') {
             devPort = rest[++i];
         } else if (a === '--bridge-port') {
             bridgePort = rest[++i];
+        } else if (a === '--remote-bridge-port') {
+            remoteBridgePort = rest[++i];
         } else if (!a.startsWith('-')) {
             remote = a;
         }
     }
-    return {remote, devPort, bridgePort};
+    return {remote, devPort, bridgePort, remoteBridgePort};
 }
 
 // 探测本地某端口的 http 可达性（2s 超时）。用 node:http 而非 fetch，兼容 node 18+。

package/extension/background.js

@@ -4,17 +4,18 @@
  * 两件事：
  * 1) 传输适配：把内容脚本的 ingest/state 转发给本地后端。
  *    - native（默认，本地开发）：chrome.runtime.sendNativeMessage 按需拉起 host.mjs。
- *    - http（远程开发）：fetch 配置的 bridgeUrl（/ingest、/state），远程机上跑 bridge/server.mjs。
+ *    - http（远程开发）：fetch http://127.0.0.1:<bridgePort>（/ingest、/state），远程机上跑 bridge/server.mjs。
  * 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 固定，只需配端口。
 const DEFAULTS = {
     domains: ['http://localhost/*', 'http://127.0.0.1/*'],
     transport: 'native',
-    bridgeUrl: 'http://127.0.0.1:8917',
+    bridgePort: '8917',
 };
 
 function getConfig() {
@@ -34,8 +35,8 @@ function viaNative(message) {
     });
 }
 
-async function viaHttp(bridgeUrl, message) {
-    const base = String(bridgeUrl || '').replace(/\/+$/, '');
+async function viaHttp(port, message) {
+    const base = `http://127.0.0.1:${port}`;
     try {
         if (message.type === 'ingest') {
             const r = await fetch(`${base}/ingest`, {
@@ -54,7 +55,7 @@ async function viaHttp(bridgeUrl, message) {
 
 async function dispatch(message) {
     const cfg = await getConfig();
-    return cfg.transport === 'http' ? viaHttp(cfg.bridgeUrl, message) : viaNative(message);
+    return cfg.transport === 'http' ? viaHttp(cfg.bridgePort, message) : viaNative(message);
 }
 
 chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {

package/extension/popup.html

@@ -2,13 +2,20 @@
 <html lang="zh">
     <head>
         <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1"
+        />
         <style>
             body {
                 width: 320px;
                 margin: 0;
                 padding: 14px;
-                font: 13px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+                font:
+                    13px/1.5 -apple-system,
+                    BlinkMacSystemFont,
+                    'Segoe UI',
+                    sans-serif;
                 color: #1f2328;
             }
             h1 {
@@ -96,8 +103,17 @@
         <section>
             <div class="label">生效域名</div>
             <div class="row">
-                <input id="domain-input" type="text" placeholder="如 https://local.oreateai.com" />
-                <button id="add-domain" class="primary">添加</button>
+                <input
+                    id="domain-input"
+                    type="text"
+                    placeholder="如 https://local.oreateai.com"
+                />
+                <button
+                    id="add-domain"
+                    class="primary"
+                >
+                    添加
+                </button>
             </div>
             <ul id="domain-list"></ul>
             <div class="hint">添加时浏览器会请求该域名的访问权限，允许后即在该域名注入选取脚本。</div>
@@ -105,15 +121,52 @@
 
         <section>
             <div class="label">传输通路</div>
-            <label class="radio"><input type="radio" name="transport" value="native" /> 本地（Native Messaging，默认）</label>
-            <label class="radio"><input type="radio" name="transport" value="http" /> 远程（HTTP bridge）</label>
-            <div class="row" id="bridge-row" style="margin-top: 6px">
-                <input id="bridge-url" type="text" placeholder="http://127.0.0.1:8917" />
+            <label class="radio">
+                <input
+                    type="radio"
+                    name="transport"
+                    value="native"
+                />
+                本地（Native Messaging，默认）
+            </label>
+            <label class="radio">
+                <input
+                    type="radio"
+                    name="transport"
+                    value="http"
+                />
+                远程（HTTP bridge）
+            </label>
+            <div id="bridge-config">
+                <div
+                    class="row"
+                    style="margin-top: 6px"
+                >
+                    <span style="color: #656d76">127.0.0.1 :</span>
+                    <input
+                        id="bridge-port"
+                        type="text"
+                        inputmode="numeric"
+                        placeholder="8917"
+                        style="max-width: 90px"
+                    />
+                </div>
+                <div class="hint">
+                    只填本地端口（host 固定 127.0.0.1）。远程开发：远程跑
+                    <code>ui-inspector bridge</code>
+                    ，
+                    <code>ui-inspector link</code>
+                    把端口转发到本地。
+                </div>
             </div>
-            <div class="hint">远程开发：在远程机跑 <code>ui-inspector bridge</code>，SSH 把端口转发到本地 127.0.0.1。</div>
         </section>
 
-        <button id="save" class="primary">保存传输设置</button>
+        <button
+            id="save"
+            class="primary"
+        >
+            保存传输设置
+        </button>
         <div id="msg"></div>
 
         <script src="popup.js"></script>

package/extension/popup.js

@@ -2,7 +2,7 @@
 const DEFAULTS = {
     domains: ['http://localhost/*', 'http://127.0.0.1/*'],
     transport: 'native',
-    bridgeUrl: 'http://127.0.0.1:8917',
+    bridgePort: '8917',
 };
 const PROTECTED = new Set(DEFAULTS.domains); // 默认项不可删、不回收权限
 
@@ -99,23 +99,38 @@ async function removeDomain(match) {
     msg(`已删除 ${match}`);
 }
 
+// 「本地」模式不需要 bridge 地址，隐藏输入框；「远程」才显示。
+function toggleBridge() {
+    const transport = document.querySelector('input[name="transport"]:checked')?.value || 'native';
+    $('bridge-config').style.display = transport === 'http' ? 'block' : 'none';
+}
+
 async function renderTransport() {
-    const {transport, bridgeUrl} = await getConfig();
+    const {transport, bridgePort} = await getConfig();
     for (const r of document.querySelectorAll('input[name="transport"]')) {
         r.checked = r.value === transport;
     }
-    $('bridge-url').value = bridgeUrl;
+    $('bridge-port').value = bridgePort;
+    toggleBridge();
 }
 
 async function saveTransport() {
     const transport = document.querySelector('input[name="transport"]:checked')?.value || 'native';
-    const bridgeUrl = $('bridge-url').value.trim() || DEFAULTS.bridgeUrl;
-    await chrome.storage.local.set({transport, bridgeUrl});
+    const raw = $('bridge-port').value.trim();
+    if (transport === 'http' && !/^\d+$/.test(raw)) {
+        msg('端口要是数字', false);
+        return;
+    }
+    const bridgePort = raw || DEFAULTS.bridgePort;
+    await chrome.storage.local.set({transport, bridgePort});
     msg('已保存传输设置');
 }
 
 $('add-domain').onclick = addDomain;
 $('save').onclick = saveTransport;
+for (const r of document.querySelectorAll('input[name="transport"]')) {
+    r.addEventListener('change', toggleBridge);
+}
 $('domain-input').addEventListener('keydown', e => {
     if (e.key === 'Enter') {
         addDomain();

package/package.json

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