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

package/README.md

@@ -6,9 +6,10 @@
 
 - `extension/`：Chrome/Edge MV3 扩展（`manifest.json` + MAIN/ISOLATED 内容脚本 + background SW）。
     - `extension/native-host/host.mjs`：Native Messaging host（浏览器按需拉起，零依赖）。
-- `mcp/server.mjs`：MCP stdio server，`clear_pending_edits` = 取消选中。
+- `mcp/server.mjs`：MCP stdio server，`clear_pending_edits` = 取消选中，`notify_browser` = 推送页面 toast。
+- `bridge/server.mjs`：HTTP bridge（远程开发用），绑 127.0.0.1，`/ingest` `/state`，读写同一份 `~/.ui-inspector/*.json`。
 - `hooks/inject-ui-inspector.mjs`：Comate `UserPromptSubmit` hook，提交时自动注入全部选中元素。
-- `cli.mjs`：命令入口，提供 `install` / `uninstall` / `status`（发布为 npm 包后暴露为 `ui-inspector` 命令）。
+- `cli.mjs`：命令入口，提供 `install` / `uninstall` / `status` / `bridge`（发布为 npm 包后暴露为 `ui-inspector` 命令）。
 
 数据落在 `~/.ui-inspector/pending.json`（用户主目录、一台机器一份）。hook 注册为**个人级**（`~/.comate/hooks.json`，对所有项目生效），所以**整机只装一次、所有仓库通用**，命令在哪个目录跑都行。
 
@@ -23,6 +24,39 @@ ui-inspector install           # 注册 native host + 个人级 hook，并打印
 
 1. 把打印的 **MCP 配置**贴进 Comate 的 MCP 设置，**reload Comate**。
 2. `chrome://extensions` → 开发者模式 →「加载已解压的扩展程序」→ 选打印出来的 **扩展目录**（只需一次）。
+3. 点扩展图标打开弹窗，**配置生效域名与传输通路**（见下）。
+
+## 配置：域名与传输通路（扩展弹窗）
+
+目标域名和传输方式不写死在代码里，装好扩展后点图标在弹窗里配：
+
+- **生效域名**：默认已含 `localhost` / `127.0.0.1`；项目域名（如 `https://local.oreateai.com`）自己加，添加时浏览器会弹权限申请，允许后即在该域名注入选取脚本。
+- **传输通路**：
+    - `本地（Native Messaging）`——默认，浏览器按需拉起 `host.mjs`，零常驻。
+    - `远程（HTTP bridge）`——填 bridge 地址（默认 `http://127.0.0.1:8917`），用于远程开发（见下）。
+
+## 远程开发（HTTP bridge）
+
+浏览器在本地、代码与 Comate 在远程开发机时，Native Messaging 跨不了机，改用 HTTP bridge。流程精简为两条命令：
+
+```bash
+# 远程机上（和 Comate hook/MCP 同机）：装 hook/MCP 并后台起 bridge
+ui-inspector install --remote            # --port 默认 8917；跳过无浏览器的 native host
+# 本地笔记本：把 bridge 端口 + dev server 端口一起转发到本地 127.0.0.1
+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 断开。
+
+链路断了（ssh 掉线 / 远程 bridge 或 dev server 停了）时，先在本地自检：
+
+```bash
+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` 不触发混合内容拦截。
 
 ## 卸载 / 状态
 
@@ -49,7 +83,7 @@ npm publish            # 发到公网 npm（package.json 的 publishConfig 已
 
 ## 说明 / 限制
 
-- 扩展默认只在 `local.oreateai.com` / `localhost` / `127.0.0.1` 生效；别的开发域名改 `extension/manifest.json` 的 `content_scripts[].matches`。
+- 扩展生效域名在**弹窗**里配（默认 `localhost` / `127.0.0.1`，项目域名自行添加）；不再写死在 `manifest.json`，改用 `chrome.scripting` 按配置动态注册。
 - 只有 **dev 构建** 拿得到组件源码路径（Vue dev 的 `__file`）；生产构建组件链为空，退回选择器/文本定位。
 - **Windows 暂不支持**（native host 需 `.bat` 包装器）。
 - 扩展 ID 用 `manifest.json` 的公钥 `key` 钉死，所有人加载后一致；私钥未使用、未入库。

package/bridge/server.mjs

@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+/*
+ * ui-inspector HTTP bridge（零依赖）——远程开发用。
+ *
+ * 跑在「Comate agent / hook / MCP 所在的那台机器」（通常是远程开发机），读写和它们同一份
+ * ~/.ui-inspector/*.json。本地浏览器扩展（transport=http）经 SSH 端口转发访问本服务：
+ *   POST /ingest  {targets:[...]}  → 覆盖写 pending.json，回 {ok,pending}
+ *   GET  /state                    → 回 {ok,count,status}
+ *
+ * 安全：只绑 127.0.0.1，不暴露到网络；远程访问一律走 `ssh -L` 把端口转发到本地 127.0.0.1。
+ */
+import {createServer} from 'node:http';
+import {readFileSync, writeFileSync, mkdirSync} from 'node:fs';
+import {dirname, resolve} from 'node:path';
+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;
+
+function readStore() {
+    try {
+        const parsed = JSON.parse(readFileSync(storeFile, 'utf8'));
+        return Array.isArray(parsed) ? parsed : [];
+    } catch {
+        return [];
+    }
+}
+
+function readStatus() {
+    try {
+        return JSON.parse(readFileSync(statusFile, 'utf8'));
+    } catch {
+        return null;
+    }
+}
+
+function writeStore(list) {
+    mkdirSync(dirname(storeFile), {recursive: true});
+    writeFileSync(storeFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
+}
+
+function cors(res) {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'content-type');
+}
+
+function json(res, code, obj) {
+    cors(res);
+    res.writeHead(code, {'content-type': 'application/json'});
+    res.end(JSON.stringify(obj));
+}
+
+const server = createServer((req, res) => {
+    if (req.method === 'OPTIONS') {
+        cors(res);
+        res.writeHead(204);
+        res.end();
+        return;
+    }
+    const url = new URL(req.url, 'http://127.0.0.1');
+    if (req.method === 'POST' && url.pathname === '/ingest') {
+        let body = '';
+        req.on('data', chunk => (body += chunk));
+        req.on('end', () => {
+            try {
+                const {targets} = JSON.parse(body || '{}');
+                const now = new Date().toISOString();
+                const list = (Array.isArray(targets) ? targets : []).map(target => ({target, receivedAt: now}));
+                writeStore(list);
+                json(res, 200, {ok: true, pending: list.length});
+            } catch (error) {
+                json(res, 400, {ok: false, error: String(error)});
+            }
+        });
+        return;
+    }
+    if (req.method === 'GET' && url.pathname === '/state') {
+        json(res, 200, {ok: true, count: readStore().length, status: readStatus()});
+        return;
+    }
+    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`);
+});

package/cli.mjs

@@ -3,15 +3,22 @@
  * ui-inspector CLI。发布到 npm 后全局安装即可获得 `ui-inspector` 命令：
  *   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> --port <devport>  # 本地：SSH 把 bridge 端口 + dev 端口转发到本地 127.0.0.1
+ *   ui-inspector doctor <remote> --port <devport> # 本地：自检远程链路断在哪层并打印恢复命令
  *   ui-inspector uninstall    # 移除 native host 清单 + 个人级 hook（--purge 连 ~/.ui-inspector 一起删）
  *   ui-inspector status       # 查看安装状态
+ *   ui-inspector bridge       # 启动 HTTP bridge（远程开发用，--port 默认 8917）
  *
  * 全部按「整机一份、个人级」接入，不绑定任何仓库。仅 macOS / Linux。
+ * 目标域名与传输通路（native/http）在扩展弹窗里配置，不写死在代码库。
  */
-import {chmodSync, existsSync, mkdirSync, readFileSync, writeFileSync, rmSync} from 'node:fs';
+import {chmodSync, existsSync, mkdirSync, openSync, readFileSync, writeFileSync, rmSync} from 'node:fs';
 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';
@@ -53,7 +60,25 @@ function readHooks() {
 function out(text) {
     process.stdout.write(`${text}\n`);
 }
-function install() {
+function installHookAndMcp() {
+    const hookCommand = `node "${hookPath}"`;
+    const config = readHooks() || {hooks: {}};
+    config.hooks = config.hooks || {};
+    const list = Array.isArray(config.hooks.UserPromptSubmit) ? config.hooks.UserPromptSubmit : [];
+    if (!JSON.stringify(list).includes('inject-ui-inspector')) {
+        list.push({hooks: [{type: 'command', command: hookCommand, timeout: 10}]});
+        config.hooks.UserPromptSubmit = list;
+        mkdirSync(dirname(hooksFile), {recursive: true});
+        writeFileSync(hooksFile, `${JSON.stringify(config, null, 4)}\n`);
+        out(`hook installed -> ${hooksFile}`);
+    } else {
+        out('hook already present, skip');
+    }
+    out('\n== 把下面加进 Comate 的 MCP 配置（stdio），然后 reload Comate ==');
+    out(JSON.stringify({mcpServers: {'ui-inspector': {command: 'node', args: [serverPath]}}}, null, 4));
+}
+
+function installNativeHost() {
     chmodSync(hostPath, 0o755);
     // 用壳脚本硬编码 node 绝对路径：Chrome 拉起 native host 时 PATH 极简（不含 nvm 等目录），
     // 直接 `#!/usr/bin/env node` 会找不到 node 导致 host 起不来；壳脚本规避这点。
@@ -76,26 +101,63 @@ function install() {
             out(`skip ${dir}: ${String(error)}`);
         }
     }
+}
 
-    const hookCommand = `node "${hookPath}"`;
-    const config = readHooks() || {hooks: {}};
-    config.hooks = config.hooks || {};
-    const list = Array.isArray(config.hooks.UserPromptSubmit) ? config.hooks.UserPromptSubmit : [];
-    if (!JSON.stringify(list).includes('inject-ui-inspector')) {
-        list.push({hooks: [{type: 'command', command: hookCommand, timeout: 10}]});
-        config.hooks.UserPromptSubmit = list;
-        mkdirSync(dirname(hooksFile), {recursive: true});
-        writeFileSync(hooksFile, `${JSON.stringify(config, null, 4)}\n`);
-        out(`hook installed -> ${hooksFile}`);
-    } else {
-        out('hook already present, skip');
-    }
+// 后台拉起 bridge 并与本进程脱钩，install --remote 用：装完 hook/MCP 顺手把 bridge 跑起来。
+function startBridgeDetached(port) {
+    mkdirSync(pendingDir, {recursive: true});
+    const logFile = resolve(pendingDir, 'bridge.log');
+    const fd = openSync(logFile, 'a');
+    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)},
+    });
+    child.unref();
+    out(`bridge 已后台启动（pid ${child.pid}，端口 ${port}），日志：${logFile}`);
+    out(`  停止：kill ${child.pid}`);
+}
 
-    out('\n== 把下面加进 Comate 的 MCP 配置（stdio），然后 reload Comate ==');
-    out(JSON.stringify({mcpServers: {'ui-inspector': {command: 'node', args: [serverPath]}}}, null, 4));
+function install({remote, port}) {
+    installHookAndMcp();
+    if (remote) {
+        out('\n== 远程开发机：跳过 native host/扩展（这台没浏览器），后台启动 bridge ==');
+        startBridgeDetached(port);
+        out(`\n本地笔记本上执行：ui-inspector link <这台机器的 ssh 目标> --port <dev端口>`);
+        return;
+    }
+    installNativeHost();
     out('\n== 加载浏览器扩展（chrome://extensions → 开发者模式 → 加载已解压 → 选下面这个目录） ==');
     out(extensionDir);
-    out('\n完成后：按住 Alt 点元素多选 → 回 Comate 写修改意见。');
+    out('\n加载后点扩展图标打开弹窗，配置「生效域名」（如 https://local.oreateai.com）与「传输通路」。');
+    out('完成后：按住 Alt 点元素多选 → 回 Comate 写修改意见。');
+}
+
+// 本地笔记本：把远程 bridge 端口 + dev server 端口都转发到本地 127.0.0.1。
+function link({remote, devPort, bridgePort}) {
+    if (!remote) {
+        out('用法：ui-inspector link <remote-ssh-目标> --port <dev端口> [--bridge-port 8917]');
+        out('例：  ui-inspector link dev-box --port 5173');
+        return;
+    }
+    const args = ['-N', '-L', `${bridgePort}:127.0.0.1:${bridgePort}`];
+    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}` : ''}`);
+    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';
+    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>');
+    import(resolve(pkgRoot, 'bridge/server.mjs'));
 }
 
 function uninstall({purge}) {
@@ -147,20 +209,105 @@ function status() {
     out(`  扩展目录：${extensionDir}`);
 }
 
+function getOpt(name, def) {
+    const i = process.argv.indexOf(name);
+    return i >= 0 && process.argv[i + 1] ? process.argv[i + 1] : def;
+}
+
+function parseLink() {
+    const rest = process.argv.slice(3);
+    let remote;
+    let devPort;
+    let bridgePort = '8917';
+    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.startsWith('-')) {
+            remote = a;
+        }
+    }
+    return {remote, devPort, bridgePort};
+}
+
+// 探测本地某端口的 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, devPort, bridgePort} = parseLink();
+    const rm = remote || '<remote>';
+    const dp = devPort || '<dev端口>';
+    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(`        恢复：ui-inspector link ${rm} --port ${dp}`);
+    } 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 没起`);
+            out(`        恢复：① 远程起 dev server；② 本地 ui-inspector link ${rm} --port ${devPort}`);
+        } else if (d.state === 'timeout') {
+            out(`  [2] dev    ✗ 127.0.0.1:${devPort} 超时 → 远程 dev server 可能挂了`);
+            out(`        恢复：远程重启 dev server`);
+        } else {
+            out(`  [2] dev    ✓ 127.0.0.1:${devPort} 可达（HTTP ${d.code}）`);
+        }
+    } else {
+        out('  [2] dev    - 未传 --port，跳过 dev server 检查');
+    }
+
+    out('\n恢复顺序：先确保远程 bridge 活 → 再接本地隧道（link）→ 再看远程 dev server。');
+}
+
 function help() {
-    out('用法：ui-inspector <install|uninstall|status>');
-    out('  install    注册 native host + 个人级 hook，并打印 MCP 配置与扩展目录');
-    out('  uninstall  移除上述注册（加 --purge 连 ~/.ui-inspector 数据一起删）');
-    out('  status     查看安装状态');
+    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 端口 + dev 端口转发到本地（--port <dev端口> [--bridge-port 8917]）');
+    out('  doctor <remote>  本地：自检远程开发链路断在哪层并打印恢复命令（--port <dev端口> [--bridge-port 8917]）');
+    out('  uninstall        移除上述注册（加 --purge 连 ~/.ui-inspector 数据一起删）');
+    out('  status           查看安装状态');
+    out('  bridge           启动 HTTP bridge（远程开发用，--port 默认 8917）');
 }
 
 const cmd = process.argv[2] || 'help';
 if (cmd === 'install') {
-    install();
+    install({remote: process.argv.includes('--remote'), port: getOpt('--port', '8917')});
+} else if (cmd === 'link') {
+    link(parseLink());
+} else if (cmd === 'doctor') {
+    doctor();
 } else if (cmd === 'uninstall') {
     uninstall({purge: process.argv.includes('--purge')});
 } else if (cmd === 'status') {
     status();
+} else if (cmd === 'bridge') {
+    bridge();
 } else {
     help();
 }

package/extension/background.js

@@ -1,36 +1,139 @@
 /*
  * ui-inspector 扩展的 background service worker。
  *
- * 改用 Native Messaging：不再 fetch 本地 HTTP（免去混合内容问题与手动起 server），
- * 由 chrome.runtime.sendNativeMessage 触发浏览器**按需拉起**本地 node host（host.mjs），
- * host 读写 .ui-inspector/pending.json 后退出。每次请求一问一答。
+ * 两件事：
+ * 1) 传输适配：把内容脚本的 ingest/state 转发给本地后端。
+ *    - native（默认，本地开发）：chrome.runtime.sendNativeMessage 按需拉起 host.mjs。
+ *    - http（远程开发）：fetch 配置的 bridgeUrl（/ingest、/state），远程机上跑 bridge/server.mjs。
+ * 2) 动态注册内容脚本：目标域名不再硬编码在 manifest，改由弹窗（popup）写入 storage，
+ *    这里按配置用 chrome.scripting 注册（MAIN + ISOLATED 两份）。
  */
 const HOST = 'com.oreate.ui_inspector';
 
-chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
-    if (!msg || typeof msg.type !== 'string') {
-        return;
-    }
+// localhost / 127.0.0.1 是通用开发地址，作默认种子；项目专属域名（如 local.oreateai.com）在弹窗里加。
+const DEFAULTS = {
+    domains: ['http://localhost/*', 'http://127.0.0.1/*'],
+    transport: 'native',
+    bridgeUrl: 'http://127.0.0.1:8917',
+};
 
-    if (msg.type === 'ingest') {
-        chrome.runtime.sendNativeMessage(HOST, {type: 'ingest', targets: msg.targets || []}, resp => {
+function getConfig() {
+    return chrome.storage.local.get(DEFAULTS);
+}
+
+// ---------- 传输 ----------
+function viaNative(message) {
+    return new Promise(resolve => {
+        chrome.runtime.sendNativeMessage(HOST, message, resp => {
             if (chrome.runtime.lastError) {
-                sendResponse({ok: false, error: chrome.runtime.lastError.message});
+                resolve({ok: false, error: chrome.runtime.lastError.message});
                 return;
             }
-            sendResponse(resp);
+            resolve(resp);
         });
+    });
+}
+
+async function viaHttp(bridgeUrl, message) {
+    const base = String(bridgeUrl || '').replace(/\/+$/, '');
+    try {
+        if (message.type === 'ingest') {
+            const r = await fetch(`${base}/ingest`, {
+                method: 'POST',
+                headers: {'content-type': 'application/json'},
+                body: JSON.stringify({targets: message.targets || []}),
+            });
+            return await r.json();
+        }
+        const r = await fetch(`${base}/state`);
+        return await r.json();
+    } catch (error) {
+        return {ok: false, error: String(error)};
+    }
+}
+
+async function dispatch(message) {
+    const cfg = await getConfig();
+    return cfg.transport === 'http' ? viaHttp(cfg.bridgeUrl, message) : viaNative(message);
+}
+
+chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+    if (!msg || typeof msg.type !== 'string') {
+        return;
+    }
+    if (msg.type === 'ingest' || msg.type === 'state') {
+        dispatch(msg).then(sendResponse);
         return true; // 异步 sendResponse
     }
+    if (msg.type === 'sync-scripts') {
+        syncScripts().then(() => sendResponse({ok: true}));
+        return true;
+    }
+});
 
-    if (msg.type === 'state') {
-        chrome.runtime.sendNativeMessage(HOST, {type: 'state'}, resp => {
-            if (chrome.runtime.lastError) {
-                sendResponse({ok: false, error: chrome.runtime.lastError.message});
-                return;
+// ---------- 动态内容脚本注册 ----------
+const SCRIPTS = [
+    {id: 'ui-inspector-main', js: ['inspector-main.js'], world: 'MAIN'},
+    {id: 'ui-inspector-bridge', js: ['bridge-content.js']},
+];
+
+async function syncScripts() {
+    const {domains} = await getConfig();
+    // 只注册已授予主机权限的域名；未授权的等弹窗 request 到权限后再同步。
+    const allowed = [];
+    for (const match of domains || []) {
+        try {
+            if (await chrome.permissions.contains({origins: [match]})) {
+                allowed.push(match);
             }
-            sendResponse(resp); // {ok, count}
-        });
-        return true;
+        } catch {
+            // 非法 match 模式，跳过
+        }
+    }
+    try {
+        const existing = await chrome.scripting.getRegisteredContentScripts({ids: SCRIPTS.map(s => s.id)});
+        if (existing.length) {
+            await chrome.scripting.unregisterContentScripts({ids: existing.map(s => s.id)});
+        }
+    } catch {
+        // 没注册过，忽略
+    }
+    if (!allowed.length) {
+        return;
+    }
+    await chrome.scripting.registerContentScripts(
+        SCRIPTS.map(s => ({
+            id: s.id,
+            js: s.js,
+            matches: allowed,
+            world: s.world,
+            runAt: 'document_idle',
+        }))
+    );
+}
+
+async function ensureDefaults() {
+    const stored = await chrome.storage.local.get(Object.keys(DEFAULTS));
+    const patch = {};
+    for (const key of Object.keys(DEFAULTS)) {
+        if (stored[key] === undefined) {
+            patch[key] = DEFAULTS[key];
+        }
+    }
+    if (Object.keys(patch).length) {
+        await chrome.storage.local.set(patch);
+    }
+}
+
+chrome.runtime.onInstalled.addListener(async () => {
+    await ensureDefaults();
+    await syncScripts();
+});
+chrome.runtime.onStartup.addListener(() => {
+    syncScripts();
+});
+chrome.storage.onChanged.addListener((changes, area) => {
+    if (area === 'local' && changes.domains) {
+        syncScripts();
     }
 });

package/extension/bridge-content.js

@@ -10,6 +10,7 @@
  */
 (function () {
     const alive = () => !!(chrome.runtime && chrome.runtime.id);
+    let lastStatusId; // 首轮只记录、不弹；之后 id 变化才弹 toast
 
     window.addEventListener('message', event => {
         if (event.source !== window || !event.data || event.data.__uiInspector !== 'selection') {
@@ -35,12 +36,22 @@
         }
         try {
             chrome.runtime.sendMessage({type: 'state'}, resp => {
-                if (chrome.runtime.lastError) {
+                if (chrome.runtime.lastError || !resp || !resp.ok) {
                     return;
                 }
-                if (resp && resp.ok && resp.count === 0) {
+                if (resp.count === 0) {
                     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;
+                }
             });
         } catch {
             clearInterval(timer);

package/extension/inspector-main.js

@@ -28,6 +28,8 @@
     document.body.appendChild(hint);
 
     function showHint(text) {
+        window.clearTimeout(showStatus._t);
+        hint.style.background = '#111';
         hint.textContent = text;
         hint.style.opacity = '1';
         window.clearTimeout(showHint._t);
@@ -35,6 +37,21 @@
             hint.style.opacity = '0';
         }, 1800);
     }
+
+    // MCP notify_browser 推送的状态，复用底部这颗 pill：
+    // 「修改中」(info) 常驻不消失，「已完成」(success) /「失败」(error) 自动淡出。
+    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);
+        }
+    }
     function cssPath(el) {
         var parts = [];
         var node = el;
@@ -162,7 +179,13 @@
         function (e) {
             if (e.key === 'Alt' && !active) {
                 active = true;
-                showHint('选择模式：点击元素可多选，再点取消；松开 Alt 退出');
+                showHint('选择模式：点击元素可多选，再点取消；松开 Alt 退出。点不动时按 Enter 选中当前悬停元素');
+            }
+            // 有些元素会吞掉 click（preventDefault/覆盖层），改用 Enter 选中当前 hover 的元素
+            if (e.key === 'Enter' && active && current && current !== overlay && current !== hint) {
+                e.preventDefault();
+                e.stopPropagation();
+                toggleSelect(current);
             }
         },
         true
@@ -210,14 +233,17 @@
     window.addEventListener('scroll', repositionBoxes, true);
     window.addEventListener('resize', repositionBoxes, true);
 
-    // bridge-content 轮询到服务端 pending 已清空时回发 cleared，撤掉全部高亮
+    // bridge-content 轮询回发的消息：cleared（撤高亮）/ status（toast 提示）
     window.addEventListener('message', function (event) {
-        if (event.source !== window) {
+        if (event.source !== window || !event.data) {
             return;
         }
-        if (event.data && event.data.__uiInspectorBridge === 'cleared' && selected.length) {
+        if (event.data.__uiInspectorBridge === 'cleared' && selected.length) {
             clearSelection();
-            showHint('已按 AI 指令取消全部选中');
+            showHint('已取消全部选中');
+        }
+        if (event.data.__uiInspectorBridge === 'status' && event.data.text) {
+            showStatus(event.data.text, event.data.level);
         }
     });
 })();

package/extension/manifest.json

@@ -1,24 +1,18 @@
 {
     "manifest_version": 3,
     "name": "ui-inspector bridge",
-    "version": "0.0.1",
-    "description": "按住 Alt 点元素多选，经 Native Messaging 交给本地 host，供 Comate 定位源码修改。仅开发用。",
+    "version": "0.1.0",
+    "description": "按住 Alt 点元素多选，交给本地 host / bridge，供 Comate 定位源码修改。目标域名与传输通路在扩展弹窗里配置。仅开发用。",
+    "minimum_chrome_version": "111",
     "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArHbA4zi22qf48xgfUtkMM6vXEtWiTtmhlppNAMlfG/uFjujAK9EEGssy6674woq5W9ugl+FlVE4rf477m9drGnGjnvaaFc9U8xCVqUoe/+vTmRyDWAtSPyu2aulAXd9P78WCia5ROSpecian7b0pG/iPyqvgZsyJfYk1qC3VyEBOnOqVeWawawKE23OaxUZJaci4wB10xNrWBHBIAztL8xmRDSkkByImwNshtlzbo2pE17LHZGr35FMbQXdRBKWxsdKlT1t0j7ezK73bCFjsYLWoAXVSpK+eAjltGTqKtOTvNxV94TXwr/j0v7ikgz80XD4ffzXV0qDbQ8HCxRSZMwIDAQAB",
-    "permissions": ["nativeMessaging"],
+    "permissions": ["nativeMessaging", "scripting", "storage"],
+    "host_permissions": ["http://localhost/*", "http://127.0.0.1/*"],
+    "optional_host_permissions": ["*://*/*"],
     "background": {
         "service_worker": "background.js"
     },
-    "content_scripts": [
-        {
-            "matches": ["https://local.oreateai.com/*", "http://localhost/*", "http://127.0.0.1/*"],
-            "js": ["inspector-main.js"],
-            "world": "MAIN",
-            "run_at": "document_idle"
-        },
-        {
-            "matches": ["https://local.oreateai.com/*", "http://localhost/*", "http://127.0.0.1/*"],
-            "js": ["bridge-content.js"],
-            "run_at": "document_idle"
-        }
-    ]
+    "action": {
+        "default_popup": "popup.html",
+        "default_title": "ui-inspector 配置"
+    }
 }

package/extension/native-host/host.mjs

@@ -7,7 +7,7 @@
  *
  * 消息：
  *   {type:'ingest', targets:[...]}  → replace 写入 .ui-inspector/pending.json，回 {ok,pending}
- *   {type:'state'}                  → 回 {ok,count}
+ *   {type:'state'}                  → 回 {ok,count,status}（status 为最近一条 notify_browser 推送）
  *
  * 数据文件与 MCP server / hook 共用：统一在用户主目录 ~/.ui-inspector/pending.json（与仓库位置无关）。
  */
@@ -17,6 +17,7 @@ import {homedir} from 'node:os';
 
 // 共享落盘：一台机器一份，放用户主目录，不绑定任何仓库——一份代码可服务多个项目。
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
+const statusFile = resolve(homedir(), '.ui-inspector/status.json');
 
 function readStore() {
     try {
@@ -27,6 +28,14 @@ function readStore() {
     }
 }
 
+function readStatus() {
+    try {
+        return JSON.parse(readFileSync(statusFile, 'utf8'));
+    } catch {
+        return null;
+    }
+}
+
 function writeStore(list) {
     mkdirSync(dirname(storeFile), {recursive: true});
     writeFileSync(storeFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
@@ -47,7 +56,7 @@ function handle(msg) {
         writeStore(targets.map(target => ({target, receivedAt: now})));
         resp = {ok: true, pending: targets.length};
     } else if (msg && msg.type === 'state') {
-        resp = {ok: true, count: readStore().length};
+        resp = {ok: true, count: readStore().length, status: readStatus()};
     } else {
         resp = {ok: false, error: 'unknown message'};
     }

package/extension/popup.html

@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="zh">
+    <head>
+        <meta charset="utf-8" />
+        <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;
+                color: #1f2328;
+            }
+            h1 {
+                font-size: 13px;
+                margin: 0 0 10px;
+            }
+            section {
+                margin-bottom: 14px;
+            }
+            .label {
+                font-weight: 600;
+                margin-bottom: 6px;
+            }
+            .row {
+                display: flex;
+                gap: 6px;
+                align-items: center;
+            }
+            input[type='text'] {
+                flex: 1;
+                min-width: 0;
+                padding: 5px 8px;
+                border: 1px solid #d0d7de;
+                border-radius: 6px;
+                font: inherit;
+            }
+            button {
+                padding: 5px 10px;
+                border: 1px solid #d0d7de;
+                border-radius: 6px;
+                background: #f6f8fa;
+                cursor: pointer;
+                font: inherit;
+            }
+            button.primary {
+                background: #1f6feb;
+                color: #fff;
+                border-color: #1f6feb;
+            }
+            ul {
+                list-style: none;
+                margin: 8px 0 0;
+                padding: 0;
+            }
+            li {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 4px 0;
+                border-top: 1px solid #f0f1f3;
+            }
+            li code {
+                font-size: 12px;
+                word-break: break-all;
+            }
+            .x {
+                border: none;
+                background: none;
+                color: #cf222e;
+                cursor: pointer;
+                padding: 0 4px;
+            }
+            label.radio {
+                display: flex;
+                gap: 6px;
+                align-items: center;
+                margin: 2px 0;
+                font-weight: 400;
+            }
+            .hint {
+                color: #656d76;
+                font-size: 12px;
+                margin-top: 4px;
+            }
+            #msg {
+                min-height: 16px;
+                color: #1a7f37;
+                font-size: 12px;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>ui-inspector 配置</h1>
+
+        <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>
+            </div>
+            <ul id="domain-list"></ul>
+            <div class="hint">添加时浏览器会请求该域名的访问权限，允许后即在该域名注入选取脚本。</div>
+        </section>
+
+        <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" />
+            </div>
+            <div class="hint">远程开发：在远程机跑 <code>ui-inspector bridge</code>，SSH 把端口转发到本地 127.0.0.1。</div>
+        </section>
+
+        <button id="save" class="primary">保存传输设置</button>
+        <div id="msg"></div>
+
+        <script src="popup.js"></script>
+    </body>
+</html>

package/extension/popup.js

@@ -0,0 +1,126 @@
+/* ui-inspector 弹窗（视图层配置）：生效域名 + 传输通路，写入 chrome.storage.local。 */
+const DEFAULTS = {
+    domains: ['http://localhost/*', 'http://127.0.0.1/*'],
+    transport: 'native',
+    bridgeUrl: 'http://127.0.0.1:8917',
+};
+const PROTECTED = new Set(DEFAULTS.domains); // 默认项不可删、不回收权限
+
+const $ = id => document.getElementById(id);
+
+function msg(text, ok = true) {
+    const el = $('msg');
+    el.textContent = text;
+    el.style.color = ok ? '#1a7f37' : '#cf222e';
+    if (text) {
+        setTimeout(() => (el.textContent = ''), 2600);
+    }
+}
+
+// 把用户输入规整成 match 模式：scheme://host/*（无 scheme 默认 https）
+function toMatch(raw) {
+    let s = String(raw || '').trim();
+    if (!s) {
+        return null;
+    }
+    if (!/^[a-z]+:\/\//i.test(s)) {
+        s = `https://${s}`;
+    }
+    let u;
+    try {
+        u = new URL(s);
+    } catch {
+        return null;
+    }
+    return `${u.protocol}//${u.host}/*`;
+}
+
+async function getConfig() {
+    return chrome.storage.local.get(DEFAULTS);
+}
+
+async function renderDomains() {
+    const {domains} = await getConfig();
+    const ul = $('domain-list');
+    ul.innerHTML = '';
+    for (const m of domains) {
+        const li = document.createElement('li');
+        const code = document.createElement('code');
+        code.textContent = m;
+        li.appendChild(code);
+        if (!PROTECTED.has(m)) {
+            const x = document.createElement('button');
+            x.className = 'x';
+            x.textContent = '删除';
+            x.onclick = () => removeDomain(m);
+            li.appendChild(x);
+        }
+        ul.appendChild(li);
+    }
+}
+
+async function addDomain() {
+    const match = toMatch($('domain-input').value);
+    if (!match) {
+        msg('域名格式不对', false);
+        return;
+    }
+    const {domains} = await getConfig();
+    if (domains.includes(match)) {
+        msg('已存在');
+        return;
+    }
+    let granted = true;
+    try {
+        granted = await chrome.permissions.request({origins: [match]});
+    } catch (error) {
+        msg(String(error), false);
+        return;
+    }
+    if (!granted) {
+        msg('未授予权限', false);
+        return;
+    }
+    await chrome.storage.local.set({domains: [...domains, match]});
+    $('domain-input').value = '';
+    await renderDomains();
+    msg(`已添加 ${match}`);
+}
+
+async function removeDomain(match) {
+    const {domains} = await getConfig();
+    await chrome.storage.local.set({domains: domains.filter(m => m !== match)});
+    try {
+        await chrome.permissions.remove({origins: [match]});
+    } catch {
+        // 权限回收失败不影响功能
+    }
+    await renderDomains();
+    msg(`已删除 ${match}`);
+}
+
+async function renderTransport() {
+    const {transport, bridgeUrl} = await getConfig();
+    for (const r of document.querySelectorAll('input[name="transport"]')) {
+        r.checked = r.value === transport;
+    }
+    $('bridge-url').value = bridgeUrl;
+}
+
+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});
+    msg('已保存传输设置');
+}
+
+$('add-domain').onclick = addDomain;
+$('save').onclick = saveTransport;
+$('domain-input').addEventListener('keydown', e => {
+    if (e.key === 'Enter') {
+        addDomain();
+    }
+});
+
+renderDomains();
+renderTransport();

package/hooks/inject-ui-inspector.mjs

@@ -5,13 +5,13 @@
  * 流程：浏览器里按住 Alt 点元素（可多选，持久高亮）→ 落盘 .ui-inspector/pending.json；
  * 回到 Comate 写修改意见提交 → 本 hook 读取**全部**选中元素，作为 additionalContext 注入给 Agent。
  *
- * 注意：这里**不清空** pending —— 选中态要一直保持到 AI 改完、主动调 MCP clear_pending_edits
- * 才取消（页面轮询到 count=0 后撤掉高亮）。否则第一轮提交就会把多选清掉、页面提前取消高亮。
+ * 注入后立即**清空** pending —— 「agent 拿到元素即取消选中」：页面轮询到 count=0 会撤掉高亮，
+ * 不必等 AI 改完。改动过程中/完成的状态由 AI 调 MCP 的 notify_browser 推给页面 toast。
  *
  * 入参由 stdin 传入（UserPromptSubmit 的 JSON），这里用不到；输出 JSON 到 stdout。
  */
-import {readFileSync} from 'node:fs';
-import {resolve} from 'node:path';
+import {readFileSync, writeFileSync, mkdirSync} from 'node:fs';
+import {dirname, resolve} from 'node:path';
 import {homedir} from 'node:os';
 
 // 共享落盘：读用户主目录下的 pending（与 host / mcp 同一路径），一份代码可服务多个仓库。
@@ -52,7 +52,15 @@ const body = list.map((entry, index) => describe(entry?.target ?? {}, index, tot
 const additionalContext = [
     `【ui-inspector】用户在页面上选中了 ${total} 个元素，接下来这条消息是针对它们的修改意见：`,
     body,
-    '请据此定位源码并按用户意见修改；改完调用 MCP 工具 clear_pending_edits 取消页面选中。',
+    '请据此定位源码并按用户意见修改。页面选中态已自动取消；改动过程中可调用 MCP 工具 notify_browser 向页面推送状态（如「修改中…」「已完成」），会在浏览器弹 toast。',
 ].join('\n');
 
+// 「拿到即取消选中」：注入后清空 pending，页面轮询到 count=0 即撤掉高亮
+try {
+    mkdirSync(dirname(storeFile), {recursive: true});
+    writeFileSync(storeFile, '[]\n', 'utf8');
+} catch {
+    // 清空失败不影响注入
+}
+
 emit({decision: 'allow', additionalContext});

package/mcp/server.mjs

@@ -15,6 +15,7 @@ import {homedir} from 'node:os';
 import {createInterface} from 'node:readline';
 
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
+const statusFile = resolve(homedir(), '.ui-inspector/status.json');
 
 function readStore() {
     try {
@@ -32,6 +33,14 @@ function clearStore() {
     return count;
 }
 
+// 写一条状态供扩展轮询 → 页面 toast。id 单调递增（用时间戳），扩展据此判断是否是新状态。
+function writeStatus(message, level) {
+    mkdirSync(dirname(statusFile), {recursive: true});
+    const status = {text: String(message ?? ''), level: level || 'info', id: Date.now()};
+    writeFileSync(statusFile, `${JSON.stringify(status)}\n`, 'utf8');
+    return status;
+}
+
 const TOOLS = [
     {
         name: 'list_pending_edits',
@@ -45,12 +54,24 @@ const TOOLS = [
     },
     {
         name: 'clear_pending_edits',
-        description: '处理完后清空待处理列表，返回被清空的条数。',
+        description: '清空待处理选中列表（取消页面高亮），返回被清空的条数。',
         inputSchema: {type: 'object', properties: {}},
     },
+    {
+        name: 'notify_browser',
+        description: '向浏览器页面推送一条状态提示（toast），用于告知进度，如「修改中…」「已完成」。',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                message: {type: 'string', description: '要在页面 toast 显示的文案'},
+                level: {type: 'string', enum: ['info', 'success', 'error'], description: '提示级别，默认 info'},
+            },
+            required: ['message'],
+        },
+    },
 ];
 
-function callTool(name) {
+function callTool(name, args) {
     if (name === 'list_pending_edits') {
         return readStore();
     }
@@ -61,6 +82,9 @@ function callTool(name) {
     if (name === 'clear_pending_edits') {
         return {cleared: clearStore()};
     }
+    if (name === 'notify_browser') {
+        return writeStatus(args?.message, args?.level);
+    }
     throw new Error('unknown tool: ' + name);
 }
 
@@ -90,7 +114,7 @@ function handle(msg) {
     }
     if (msg.method === 'tools/call') {
         try {
-            const result = callTool(msg.params?.name);
+            const result = callTool(msg.params?.name, msg.params?.arguments);
             send({
                 jsonrpc: '2.0',
                 id: msg.id,

package/package.json

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