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

package/README.md

@@ -33,13 +33,13 @@ ui-inspector install           # 注册 native host + 个人级 hook，并打印
 - **生效域名**：默认已含 `localhost` / `127.0.0.1`；项目域名（如 `https://local.oreateai.com`）自己加，添加时浏览器会弹权限申请，允许后即在该域名注入选取脚本。
 - **传输通路**：
     - `本地（Native Messaging）`——默认，浏览器按需拉起 `host.mjs`，零常驻。
-    - `远程（HTTP bridge）`——填开发机 bridge 的**完整地址**（如 `devlocal.oreateai.com:8917`），用于远程开发（见下）。
+    - `远程（HTTP bridge）`——填开发机 bridge 的**完整地址**（如 `<remote-ip>:<port>`），用于远程开发（见下）。
 
 ## 远程开发（HTTP bridge 直连）
 
 浏览器在本地、代码与 Comate 在远程开发机时，Native Messaging 跨不了机，改用 **HTTP bridge 直连**：在开发机把 bridge 暴露到网卡，浏览器用开发机可达地址直接连，无需 SSH 隧道。
 
-前提：你的笔记本能直连开发机的内网地址（通常 `/etc/hosts` 把 `devlocal.oreateai.com` 指到开发机 IP，浏览器本来就能打开 dev 页）。
+前提：你的笔记本能直连开发机的内网地址（通常 `/etc/hosts` 把 `<remote-ip>:<port>` 指到开发机 IP，浏览器本来就能打开 dev 页）。
 
 ```bash
 # 开发机上（和 Comate hook/MCP 同机）：装 hook/MCP 并后台起 bridge（默认绑 0.0.0.0）
@@ -52,9 +52,11 @@ ui-inspector install --remote
 然后在浏览器（笔记本）：加载扩展（`chrome://extensions` 选 `extension` 目录）→ 点扩展图标，弹窗里把**传输通路**选「远程（HTTP bridge）」、地址填**完整地址** `devlocal.oreateai.com:8917`、生效域名加上你的 dev 域名。
 
 验证直连：
+
 ```bash
-curl http://devlocal.oreateai.com:8917/state     # 回 {"ok":true,...} 即通
+curl http://<remote-ip>:<port>/state     # 回 {"ok":true,...} 即通
 ```
+
 不通多半是开发机防火墙没放行该端口，或 bridge 没起（看 `~/.ui-inspector/bridge.log`）。
 
 > 注意：`--host 0.0.0.0` 会把 bridge 暴露在内网，谁能访问到这个端口谁就能写 pending；仅在可信内网用。dev 页若是 https、扩展连 http bridge 被浏览器拦，则给 bridge 上 https。

package/bridge/server.mjs

@@ -16,6 +16,7 @@ import {homedir} from 'node:os';
 
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
 const statusFile = resolve(homedir(), '.ui-inspector/status.json');
+const recordingFile = resolve(homedir(), '.ui-inspector/recording.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';
@@ -82,6 +83,21 @@ const server = createServer((req, res) => {
         json(res, 200, {ok: true, count: readStore().length, status: readStatus()});
         return;
     }
+    if (req.method === 'POST' && url.pathname === '/recording') {
+        let body = '';
+        req.on('data', chunk => (body += chunk));
+        req.on('end', () => {
+            try {
+                const {recording} = JSON.parse(body || '{}');
+                mkdirSync(dirname(recordingFile), {recursive: true});
+                writeFileSync(recordingFile, `${JSON.stringify(recording ?? null, null, 4)}\n`, 'utf8');
+                json(res, 200, {ok: true});
+            } catch (error) {
+                json(res, 400, {ok: false, error: String(error)});
+            }
+        });
+        return;
+    }
     json(res, 404, {ok: false, error: 'not found'});
 });
 

package/cli.mjs

@@ -12,7 +12,17 @@
  * 全部按「整机一份、个人级」接入，不绑定任何仓库。仅 macOS / Linux。
  * 目标域名与传输通路（native/http）在扩展弹窗里配置，不写死在代码库。
  */
-import {chmodSync, existsSync, mkdirSync, openSync, readFileSync, writeFileSync, rmSync} from 'node:fs';
+import {
+    chmodSync,
+    cpSync,
+    existsSync,
+    mkdirSync,
+    openSync,
+    readdirSync,
+    readFileSync,
+    writeFileSync,
+    rmSync,
+} from 'node:fs';
 import {dirname, join, resolve} from 'node:path';
 import {fileURLToPath} from 'node:url';
 import {homedir, platform} from 'node:os';
@@ -26,6 +36,9 @@ const hostPath = resolve(pkgRoot, 'extension/native-host/host.mjs');
 const serverPath = resolve(pkgRoot, 'mcp/server.mjs');
 const hookPath = resolve(pkgRoot, 'hooks/inject-ui-inspector.mjs');
 const extensionDir = resolve(pkgRoot, 'extension');
+const enhanceSrcDir = resolve(pkgRoot, 'enhancements'); // 包内增强包源目录（每个子目录一个插件）
+const enhanceDstDir = resolve(extensionDir, 'enhancements'); // 拷贝进扩展的已装增强包
+const enhanceRegistry = resolve(extensionDir, 'enhancements.json'); // 已装增强包清单（数组）
 const home = homedir();
 const hooksFile = resolve(home, '.comate/hooks.json');
 const pendingDir = resolve(home, '.ui-inspector');
@@ -129,7 +142,9 @@ function install({remote, port, host}) {
         const bindHost = host || '0.0.0.0';
         out('\n== 远程开发机：跳过 native host/扩展（这台没浏览器），后台启动 bridge ==');
         startBridgeDetached(port, bindHost);
-        out(`\n浏览器在扩展弹窗里把传输设为「远程（HTTP bridge）」、地址填「本机可达地址:${port}」（如 devlocal.oreateai.com:${port}）即可直连。`);
+        out(
+            `\n浏览器在扩展弹窗里把传输设为「远程（HTTP bridge）」、地址填「本机可达地址:${port}」（如 devlocal.oreateai.com:${port}）即可直连。`
+        );
         return;
     }
     installNativeHost();
@@ -149,6 +164,108 @@ function bridge() {
     import(resolve(pkgRoot, 'bridge/server.mjs'));
 }
 
+// ---------- 增强包（多插件）----------
+// 源在包内 enhancements/<名>/（含 plugin.json）。`add` 把整目录拷进 extension/enhancements/<名>/，
+// 并把描述写进 extension/enhancements.json；弹窗与 background 读该清单动态加载。需重新加载扩展生效。
+function readRegistry() {
+    try {
+        const j = JSON.parse(readFileSync(enhanceRegistry, 'utf8'));
+        return Array.isArray(j) ? j : [];
+    } catch {
+        return [];
+    }
+}
+
+function writeRegistry(list) {
+    if (!list.length) {
+        if (existsSync(enhanceRegistry)) {
+            rmSync(enhanceRegistry);
+        }
+        return;
+    }
+    writeFileSync(enhanceRegistry, `${JSON.stringify(list, null, 4)}\n`);
+}
+
+function availableEnhancements() {
+    try {
+        return readdirSync(enhanceSrcDir, {withFileTypes: true})
+            .filter(d => d.isDirectory() && existsSync(join(enhanceSrcDir, d.name, 'plugin.json')))
+            .map(d => d.name);
+    } catch {
+        return [];
+    }
+}
+
+function addEnhancement(name) {
+    if (!name) {
+        out(`用法：ui-inspector add <名>。可用：${availableEnhancements().join(', ') || '（无）'}`);
+        return;
+    }
+    const src = join(enhanceSrcDir, name);
+    const manifestPath = join(src, 'plugin.json');
+    if (!existsSync(manifestPath)) {
+        out(`未找到增强包「${name}」。可用：${availableEnhancements().join(', ') || '（无）'}`);
+        return;
+    }
+    let descriptor;
+    try {
+        descriptor = JSON.parse(readFileSync(manifestPath, 'utf8'));
+    } catch (error) {
+        out(`增强包 plugin.json 解析失败：${String(error)}`);
+        return;
+    }
+    const id = descriptor.id || name;
+    cpSync(src, join(enhanceDstDir, id), {recursive: true});
+    const list = readRegistry().filter(p => p.id !== id);
+    list.push(descriptor);
+    writeRegistry(list);
+    out(`已安装增强包「${descriptor.name || id}」(${id}) -> ${join(enhanceDstDir, id)}`);
+    out('在 chrome://extensions 点「刷新」重新加载扩展后生效：弹窗出现对应「模式」tab。');
+}
+
+function removeEnhancement(name) {
+    if (!name) {
+        out('用法：ui-inspector remove <名>');
+        return;
+    }
+    const dir = join(enhanceDstDir, name);
+    let removed = false;
+    if (existsSync(dir)) {
+        rmSync(dir, {recursive: true, force: true});
+        removed = true;
+    }
+    const before = readRegistry();
+    const after = before.filter(p => p.id !== name);
+    if (after.length !== before.length) {
+        removed = true;
+    }
+    writeRegistry(after);
+    out(removed ? `已移除增强包「${name}」` : `未安装增强包「${name}」`);
+    if (removed) {
+        out('在 chrome://extensions 点「刷新」重新加载扩展后生效。');
+    }
+}
+
+function listEnhancements() {
+    const available = availableEnhancements();
+    const installed = readRegistry();
+    const installedIds = new Set(installed.map(p => p.id));
+    out('可用增强包（包内 enhancements/）：');
+    for (const name of available) {
+        out(`  ${installedIds.has(name) ? '●' : '○'} ${name}${installedIds.has(name) ? '（已安装）' : ''}`);
+    }
+    if (!available.length) {
+        out('  （无）');
+    }
+    out('\n已安装（extension/enhancements.json）：');
+    for (const p of installed) {
+        out(`  ${p.id} — ${p.name || ''}`);
+    }
+    if (!installed.length) {
+        out('  （无）');
+    }
+}
+
 function uninstall({purge}) {
     for (const dir of nmDirs()) {
         const file = join(dir, `${HOST_NAME}.json`);
@@ -204,12 +321,15 @@ function getOpt(name, def) {
 }
 
 function help() {
-    out('用法：ui-inspector <install|uninstall|status|bridge>');
+    out('用法：ui-inspector <install|uninstall|status|bridge|add|remove|list>');
     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，--host 默认 0.0.0.0 供直连）');
+    out('  add <名>         安装增强包（拷进扩展并登记，如 add recorder）；需重新加载扩展');
+    out('  remove <名>      卸载增强包');
+    out('  list             列出可用与已安装的增强包');
 }
 
 const cmd = process.argv[2] || 'help';
@@ -221,6 +341,12 @@ if (cmd === 'install') {
     status();
 } else if (cmd === 'bridge') {
     bridge();
+} else if (cmd === 'add') {
+    addEnhancement(process.argv[3]);
+} else if (cmd === 'remove') {
+    removeEnhancement(process.argv[3]);
+} else if (cmd === 'list') {
+    listEnhancements();
 } else {
     help();
 }

package/enhancements/recorder/pane.html

@@ -0,0 +1,28 @@
+<label class="radio">
+    <input
+        type="checkbox"
+        id="rec-console"
+        checked
+    />
+    录制控制台输出（console）
+</label>
+<label class="radio">
+    <input
+        type="checkbox"
+        id="rec-network"
+        checked
+    />
+    录制网络请求（仅同域）
+</label>
+<button
+    id="rec-toggle"
+    class="primary"
+    style="margin-top: 6px"
+>
+    开始录制
+</button>
+<div
+    id="rec-status"
+    class="hint"
+></div>
+<div class="hint">录制点击的元素（含组件源码）+ 勾选项；停止后在下次发消息时自动带给 Agent。</div>

package/enhancements/recorder/pane.js

@@ -0,0 +1,36 @@
+/*
+ * 录制增强包的弹窗面板逻辑（随 pane.html 一起由 popup.js 注入后加载）。
+ * 自包含：读写 chrome.storage.local.recording {active,console,network,startedAt}，
+ * bridge-content 监听该键的变化，驱动 MAIN 世界的 recorder-main.js 起停。
+ */
+(function () {
+    const byId = id => document.getElementById(id);
+
+    async function refresh() {
+        const {recording} = await chrome.storage.local.get({recording: null});
+        const active = !!(recording && recording.active);
+        byId('rec-toggle').textContent = active ? '停止录制' : '开始录制';
+        byId('rec-status').textContent = active ? '录制中…（操作页面后点停止）' : '';
+        byId('rec-console').disabled = active;
+        byId('rec-network').disabled = active;
+    }
+
+    byId('rec-toggle').onclick = async () => {
+        const {recording} = await chrome.storage.local.get({recording: null});
+        if (recording && recording.active) {
+            await chrome.storage.local.set({recording: {active: false}});
+        } else {
+            await chrome.storage.local.set({
+                recording: {
+                    active: true,
+                    console: byId('rec-console').checked,
+                    network: byId('rec-network').checked,
+                    startedAt: Date.now(),
+                },
+            });
+        }
+        refresh();
+    };
+
+    refresh();
+})();

package/enhancements/recorder/plugin.json

@@ -0,0 +1,7 @@
+{
+    "id": "recorder",
+    "name": "录制",
+    "main": ["recorder-main.js"],
+    "pane": "pane.html",
+    "paneJs": "pane.js"
+}

package/enhancements/recorder/recorder-main.js

@@ -0,0 +1,221 @@
+/*
+ * MAIN world 录制脚本（增强包）：录制期间抓取
+ *   - 点击的元素（含 Vue 组件源码链，和选择模式同源）
+ *   - console.log/info/warn/error
+ *   - 同域名下的 fetch / XMLHttpRequest（方法/URL/状态/耗时）
+ * 由 bridge-content 依据 chrome.storage.recording 发来的 rec-control 起停；
+ * 停止时把整段录制 postMessage 出去，经 bridge→background→host/bridge 落盘 recording.json。
+ * 未开始录制时完全惰性，不打补丁、无开销。
+ */
+(function () {
+    if (window.__oreateRecorder) {
+        return;
+    }
+    window.__oreateRecorder = true;
+
+    var rec = null; // 进行中的录制 {clicks,console,network,startedAt,pageUrl,opts}
+    var saved = {}; // 被打补丁的原函数
+
+    function cssPath(el) {
+        var parts = [];
+        var node = el;
+        while (node && node.nodeType === 1 && parts.length < 6) {
+            var seg = node.nodeName.toLowerCase();
+            if (node.id) {
+                parts.unshift(seg + '#' + node.id);
+                break;
+            }
+            var cls = (node.getAttribute('class') || '').trim().split(/\s+/).filter(Boolean).slice(0, 2);
+            if (cls.length) {
+                seg += '.' + cls.join('.');
+            }
+            parts.unshift(seg);
+            node = node.parentElement;
+        }
+        return parts.join(' > ');
+    }
+
+    function componentChain(el) {
+        var chain = [];
+        var instance = el.__vueParentComponent;
+        while (instance && chain.length < 6) {
+            var type = instance.type || {};
+            var file = type.__file || null;
+            var name = type.__name || type.name || null;
+            if (file || name) {
+                chain.push({name: name, file: file});
+            }
+            instance = instance.parent;
+        }
+        return chain;
+    }
+
+    function fmt(a) {
+        if (typeof a === 'string') {
+            return a;
+        }
+        try {
+            return JSON.stringify(a);
+        } catch (e) {
+            return String(a);
+        }
+    }
+
+    function sameHost(url) {
+        try {
+            return new URL(url, location.href).host === location.host;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    function onClick(e) {
+        if (!rec) {
+            return;
+        }
+        var el = e.target;
+        if (!el || el.nodeType !== 1) {
+            return;
+        }
+        rec.clicks.push({
+            selector: cssPath(el),
+            tag: el.nodeName.toLowerCase(),
+            text: (el.textContent || '').trim().slice(0, 80),
+            componentChain: componentChain(el),
+            ts: Date.now(),
+        });
+    }
+
+    function startConsole() {
+        ['log', 'info', 'warn', 'error'].forEach(function (level) {
+            saved['c_' + level] = console[level];
+            console[level] = function () {
+                try {
+                    if (rec) {
+                        rec.console.push({
+                            level: level,
+                            text: Array.prototype.map.call(arguments, fmt).join(' ').slice(0, 2000),
+                            ts: Date.now(),
+                        });
+                    }
+                } catch (e) {
+                    // 记录失败不影响原 console
+                }
+                return saved['c_' + level].apply(console, arguments);
+            };
+        });
+    }
+
+    function stopConsole() {
+        ['log', 'info', 'warn', 'error'].forEach(function (level) {
+            if (saved['c_' + level]) {
+                console[level] = saved['c_' + level];
+                delete saved['c_' + level];
+            }
+        });
+    }
+
+    function startNetwork() {
+        if (window.fetch) {
+            saved.fetch = window.fetch;
+            window.fetch = function (input, init) {
+                var url = typeof input === 'string' ? input : (input && input.url) || '';
+                var method = (init && init.method) || (input && input.method) || 'GET';
+                var t0 = Date.now();
+                var p = saved.fetch.apply(this, arguments);
+                if (rec && sameHost(url)) {
+                    p.then(
+                        function (r) {
+                            var t1 = Date.now();
+                            rec.network.push({method: method, url: url, status: r.status, startTs: t0, endTs: t1, ms: t1 - t0});
+                        },
+                        function () {
+                            var t1 = Date.now();
+                            rec.network.push({method: method, url: url, status: 0, startTs: t0, endTs: t1, ms: t1 - t0, error: true});
+                        }
+                    );
+                }
+                return p;
+            };
+        }
+        saved.xhrOpen = XMLHttpRequest.prototype.open;
+        saved.xhrSend = XMLHttpRequest.prototype.send;
+        XMLHttpRequest.prototype.open = function (method, url) {
+            this.__rec = {method: method, url: url, t0: Date.now()};
+            return saved.xhrOpen.apply(this, arguments);
+        };
+        XMLHttpRequest.prototype.send = function () {
+            var xhr = this;
+            var info = xhr.__rec;
+            if (info) {
+                xhr.addEventListener('loadend', function () {
+                    if (rec && sameHost(info.url)) {
+                        var t1 = Date.now();
+                        rec.network.push({
+                            method: info.method,
+                            url: info.url,
+                            status: xhr.status,
+                            startTs: info.t0,
+                            endTs: t1,
+                            ms: t1 - info.t0,
+                        });
+                    }
+                });
+            }
+            return saved.xhrSend.apply(this, arguments);
+        };
+    }
+
+    function stopNetwork() {
+        if (saved.fetch) {
+            window.fetch = saved.fetch;
+            delete saved.fetch;
+        }
+        if (saved.xhrOpen) {
+            XMLHttpRequest.prototype.open = saved.xhrOpen;
+            delete saved.xhrOpen;
+        }
+        if (saved.xhrSend) {
+            XMLHttpRequest.prototype.send = saved.xhrSend;
+            delete saved.xhrSend;
+        }
+    }
+
+    function start(opts) {
+        if (rec) {
+            return;
+        }
+        rec = {clicks: [], console: [], network: [], startedAt: Date.now(), pageUrl: location.href, opts: opts};
+        document.addEventListener('click', onClick, true);
+        if (opts.console) {
+            startConsole();
+        }
+        if (opts.network) {
+            startNetwork();
+        }
+    }
+
+    function stop() {
+        if (!rec) {
+            return;
+        }
+        document.removeEventListener('click', onClick, true);
+        stopConsole();
+        stopNetwork();
+        rec.endedAt = Date.now();
+        var payload = rec;
+        rec = null;
+        window.postMessage({__uiInspector: 'recording', recording: payload}, '*');
+    }
+
+    window.addEventListener('message', function (ev) {
+        if (ev.source !== window || !ev.data || ev.data.__uiInspectorBridge !== 'rec-control') {
+            return;
+        }
+        if (ev.data.active) {
+            start({console: !!ev.data.console, network: !!ev.data.network});
+        } else {
+            stop();
+        }
+    });
+})();

package/extension/background.js

@@ -59,6 +59,14 @@ async function viaHttp(target, message) {
             });
             return await r.json();
         }
+        if (message.type === 'ingest-recording') {
+            const r = await fetch(`${base}/recording`, {
+                method: 'POST',
+                headers: {'content-type': 'application/json'},
+                body: JSON.stringify({recording: message.recording || null}),
+            });
+            return await r.json();
+        }
         const r = await fetch(`${base}/state`);
         return await r.json();
     } catch (error) {
@@ -75,7 +83,7 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
     if (!msg || typeof msg.type !== 'string') {
         return;
     }
-    if (msg.type === 'ingest' || msg.type === 'state') {
+    if (msg.type === 'ingest' || msg.type === 'state' || msg.type === 'ingest-recording') {
         dispatch(msg).then(sendResponse);
         return true; // 异步 sendResponse
     }
@@ -86,13 +94,38 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
 });
 
 // ---------- 动态内容脚本注册 ----------
-const SCRIPTS = [
-    {id: 'ui-inspector-main', js: ['inspector-main.js'], world: 'MAIN'},
-    {id: 'ui-inspector-bridge', js: ['bridge-content.js']},
-];
+// MAIN 世界脚本 = 基础选取脚本 + 各增强包的 main 脚本（enhancements.json，由 `ui-inspector add` 写入）；
+// ISOLATED 世界固定一份 bridge-content。增强包脚本路径相对扩展根：enhancements/<id>/<file>。
+const BASE_MAIN_JS = ['inspector-main.js'];
+const BRIDGE_SCRIPT = {id: 'ui-inspector-bridge', js: ['bridge-content.js']};
+
+async function readEnhancements() {
+    try {
+        const r = await fetch(chrome.runtime.getURL('enhancements.json'));
+        if (!r.ok) {
+            return [];
+        }
+        const j = await r.json().catch(() => []);
+        return Array.isArray(j) ? j.filter(p => p && p.id) : [];
+    } catch {
+        return [];
+    }
+}
+
+async function buildScripts() {
+    const plugins = await readEnhancements();
+    const mainJs = [...BASE_MAIN_JS];
+    for (const p of plugins) {
+        for (const file of p.main || []) {
+            mainJs.push(`enhancements/${p.id}/${file}`);
+        }
+    }
+    return [{id: 'ui-inspector-main', js: mainJs, world: 'MAIN'}, BRIDGE_SCRIPT];
+}
 
 async function syncScripts() {
     const {domains} = await getConfig();
+    const scripts = await buildScripts();
     // 只注册已授予主机权限的域名；未授权的等弹窗 request 到权限后再同步。
     const allowed = [];
     for (const match of domains || []) {
@@ -105,7 +138,7 @@ async function syncScripts() {
         }
     }
     try {
-        const existing = await chrome.scripting.getRegisteredContentScripts({ids: SCRIPTS.map(s => s.id)});
+        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)});
         }
@@ -116,7 +149,7 @@ async function syncScripts() {
         return;
     }
     await chrome.scripting.registerContentScripts(
-        SCRIPTS.map(s => ({
+        scripts.map(s => ({
             id: s.id,
             js: s.js,
             matches: allowed,

package/extension/bridge-content.js

@@ -30,6 +30,52 @@
         }
     });
 
+    // 录制（增强包）：MAIN 的录制结果 → background 落盘 recording.json
+    window.addEventListener('message', event => {
+        if (event.source !== window || !event.data || event.data.__uiInspector !== 'recording') {
+            return;
+        }
+        if (!alive()) {
+            return;
+        }
+        try {
+            chrome.runtime.sendMessage(
+                {type: 'ingest-recording', recording: event.data.recording},
+                () => void chrome.runtime.lastError
+            );
+        } catch {
+            // 上下文失效
+        }
+    });
+
+    // 录制起停：弹窗写 chrome.storage.recording，这里转成 rec-control 发给 MAIN 的 recorder。
+    function relayRecControl(r) {
+        window.postMessage(
+            {
+                __uiInspectorBridge: 'rec-control',
+                active: !!(r && r.active),
+                console: !!(r && r.console),
+                network: !!(r && r.network),
+            },
+            '*'
+        );
+    }
+    try {
+        chrome.storage.local.get({recording: null}, o => {
+            if (chrome.runtime.lastError || !o || !o.recording || !o.recording.active) {
+                return;
+            }
+            relayRecControl(o.recording); // 页面在录制中途加载：补发开始
+        });
+        chrome.storage.onChanged.addListener((changes, area) => {
+            if (area === 'local' && changes.recording) {
+                relayRecControl(changes.recording.newValue);
+            }
+        });
+    } catch {
+        // 上下文失效
+    }
+
     const timer = setInterval(() => {
         if (!alive()) {
             clearInterval(timer);

package/extension/native-host/host.mjs

@@ -18,6 +18,7 @@ import {homedir} from 'node:os';
 // 共享落盘：一台机器一份，放用户主目录，不绑定任何仓库——一份代码可服务多个项目。
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
 const statusFile = resolve(homedir(), '.ui-inspector/status.json');
+const recordingFile = resolve(homedir(), '.ui-inspector/recording.json');
 
 function readStore() {
     try {
@@ -57,6 +58,10 @@ function handle(msg) {
         resp = {ok: true, pending: targets.length};
     } else if (msg && msg.type === 'state') {
         resp = {ok: true, count: readStore().length, status: readStatus()};
+    } else if (msg && msg.type === 'ingest-recording') {
+        mkdirSync(dirname(recordingFile), {recursive: true});
+        writeFileSync(recordingFile, `${JSON.stringify(msg.recording ?? null, null, 4)}\n`, 'utf8');
+        resp = {ok: true};
     } else {
         resp = {ok: false, error: 'unknown message'};
     }

package/extension/popup.html

@@ -95,76 +95,135 @@
                 color: #1a7f37;
                 font-size: 12px;
             }
+            .tabs {
+                display: flex;
+                gap: 6px;
+                margin-bottom: 8px;
+            }
+            .tab {
+                flex: 1;
+                padding: 6px 0;
+                border: 1px solid #d0d7de;
+                border-radius: 6px;
+                background: #f6f8fa;
+                cursor: pointer;
+                font: inherit;
+            }
+            .tab.active {
+                background: #1f6feb;
+                color: #fff;
+                border-color: #1f6feb;
+            }
         </style>
     </head>
     <body>
         <h1>ui-inspector 配置</h1>
 
-        <section>
-            <div class="label">生效域名</div>
-            <div class="row">
-                <input
-                    id="domain-input"
-                    type="text"
-                    placeholder="如 https://example.com"
-                />
-                <button
-                    id="add-domain"
-                    class="primary"
-                >
-                    添加
-                </button>
-            </div>
-            <ul id="domain-list"></ul>
-            <div class="hint">添加时浏览器会请求该域名的访问权限，允许后即在该域名注入选取脚本。</div>
-        </section>
+        <!-- 顶层 tab：模式 / 设置 -->
+        <div
+            class="tabs"
+            id="top-tabs"
+        >
+            <button
+                class="tab active"
+                data-top="mode"
+            >
+                模式
+            </button>
+            <button
+                class="tab"
+                data-top="settings"
+            >
+                设置
+            </button>
+        </div>
+
+        <!-- 「模式」页：选择 Element + 各增强包模式（popup.js 读 enhancements.json 动态填充子 tab） -->
+        <div id="top-mode">
+            <div
+                class="tabs"
+                id="mode-tabs"
+            ></div>
+            <section
+                id="pane-select"
+                class="mode-pane"
+            >
+                <div class="hint">按住 Alt 点选页面元素（可多选），回 Comate 写修改意见即可。</div>
+            </section>
+            <div id="mode-panes"></div>
+        </div>
 
-        <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 id="bridge-config">
-                <div
-                    class="row"
-                    style="margin-top: 6px"
-                >
+        <!-- 「设置」页：生效域名 + 传输通路 -->
+        <div
+            id="top-settings"
+            style="display: none"
+        >
+            <section>
+                <div class="label">生效域名</div>
+                <div class="row">
                     <input
-                        id="bridge-target"
+                        id="domain-input"
                         type="text"
-                        placeholder="devlocal.oreateai.com:8917"
+                        placeholder="如 https://example.com"
                     />
+                    <button
+                        id="add-domain"
+                        class="primary"
+                    >
+                        添加
+                    </button>
                 </div>
-                <div class="hint">
-                    填开发机 bridge 的完整地址（如
-                    <code>devlocal.oreateai.com:8917</code>
-                    ）。开发机上
-                    <code>ui-inspector install --remote</code>
-                    起 bridge（默认绑 0.0.0.0 供直连）。
+                <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 id="bridge-config">
+                    <div
+                        class="row"
+                        style="margin-top: 6px"
+                    >
+                        <input
+                            id="bridge-target"
+                            type="text"
+                            placeholder="devlocal.oreateai.com:8917"
+                        />
+                    </div>
+                    <div class="hint">
+                        填开发机 bridge 的完整地址（如
+                        <code>devlocal.oreateai.com:8917</code>
+                        ）。开发机上
+                        <code>ui-inspector install --remote</code>
+                        起 bridge（默认绑 0.0.0.0 供直连）。
+                    </div>
                 </div>
-            </div>
-        </section>
+            </section>
 
-        <button
-            id="save"
-            class="primary"
-        >
-            保存传输设置
-        </button>
-        <div id="msg"></div>
+            <button
+                id="save"
+                class="primary"
+            >
+                保存传输设置
+            </button>
+            <div id="msg"></div>
+        </div>
 
         <script src="popup.js"></script>
     </body>

package/extension/popup.js

@@ -138,3 +138,92 @@ $('domain-input').addEventListener('keydown', e => {
 
 renderDomains();
 renderTransport();
+
+// ---------- 顶层 tab：模式 / 设置 ----------
+function initTopTabs() {
+    const topTabs = [...document.querySelectorAll('#top-tabs .tab')];
+    const panes = {mode: $('top-mode'), settings: $('top-settings')};
+    for (const b of topTabs) {
+        b.onclick = () => {
+            for (const x of topTabs) {
+                x.classList.toggle('active', x === b);
+            }
+            for (const [key, el] of Object.entries(panes)) {
+                el.style.display = b.dataset.top === key ? 'block' : 'none';
+            }
+        };
+    }
+}
+initTopTabs();
+
+// ---------- 「模式」页：选择 Element + 增强包子 tab ----------
+// 读 extension/enhancements.json（由 `ui-inspector add <名>` 拷贝插件并写入）。
+// 子 tab 第一项固定「选择 Element」，其后每个增强包一项；无增强包时隐藏子 tab 条只留默认提示。
+// 面板 HTML 片段从 enhancements/<id>/<pane> 拉取内嵌，随后加载 enhancements/<id>/<paneJs>。
+async function initModes() {
+    let plugins = [];
+    try {
+        const r = await fetch(chrome.runtime.getURL('enhancements.json'));
+        if (r.ok) {
+            const j = await r.json().catch(() => []);
+            if (Array.isArray(j)) {
+                plugins = j.filter(p => p && p.id);
+            }
+        }
+    } catch {
+        plugins = [];
+    }
+
+    const tabsEl = $('mode-tabs');
+    const panesEl = $('mode-panes');
+    const paneEls = {select: $('pane-select')};
+
+    function makeTab(key, label, active) {
+        const b = document.createElement('button');
+        b.className = active ? 'tab active' : 'tab';
+        b.textContent = label;
+        b.dataset.mode = key;
+        b.onclick = () => switchMode(key);
+        tabsEl.appendChild(b);
+        return b;
+    }
+
+    function switchMode(key) {
+        for (const b of tabsEl.querySelectorAll('.tab')) {
+            b.classList.toggle('active', b.dataset.mode === key);
+        }
+        for (const [k, el] of Object.entries(paneEls)) {
+            el.style.display = k === key ? 'block' : 'none';
+        }
+    }
+
+    makeTab('select', '选择 Element', true);
+
+    for (const p of plugins) {
+        const pane = document.createElement('section');
+        pane.className = 'mode-pane';
+        pane.style.display = 'none';
+        if (p.pane) {
+            try {
+                const html = await fetch(chrome.runtime.getURL(`enhancements/${p.id}/${p.pane}`)).then(x => x.text());
+                pane.innerHTML = html;
+            } catch {
+                pane.textContent = `加载 ${p.id} 面板失败`;
+            }
+        }
+        panesEl.appendChild(pane);
+        paneEls[p.id] = pane;
+        makeTab(p.id, p.name || p.id, false);
+        if (p.paneJs) {
+            const s = document.createElement('script');
+            s.src = `enhancements/${p.id}/${p.paneJs}`;
+            document.body.appendChild(s);
+        }
+    }
+
+    // 只有「选择 Element」一个模式时，子 tab 条没有意义，隐藏它。
+    if (!plugins.length) {
+        tabsEl.style.display = 'none';
+    }
+}
+initModes();

package/hooks/inject-ui-inspector.mjs

@@ -14,23 +14,33 @@ import {readFileSync, writeFileSync, mkdirSync} from 'node:fs';
 import {dirname, resolve} from 'node:path';
 import {homedir} from 'node:os';
 
-// 共享落盘：读用户主目录下的 pending（与 host / mcp 同一路径），一份代码可服务多个仓库。
+// 共享落盘：读用户主目录下的 pending / recording（与 host / bridge / mcp 同一路径），一份代码可服务多个仓库。
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
+const recordingFile = resolve(homedir(), '.ui-inspector/recording.json');
 
 function emit(output) {
     process.stdout.write(JSON.stringify(output));
     process.exit(0);
 }
 
-let list = [];
-try {
-    const parsed = JSON.parse(readFileSync(storeFile, 'utf8'));
-    list = Array.isArray(parsed) ? parsed : [];
-} catch {
-    emit({decision: 'allow'});
+function readJson(file, fallback) {
+    try {
+        return JSON.parse(readFileSync(file, 'utf8'));
+    } catch {
+        return fallback;
+    }
 }
 
-if (!list.length) {
+const parsed = readJson(storeFile, []);
+const list = Array.isArray(parsed) ? parsed : [];
+const recording = readJson(recordingFile, null);
+const hasRec =
+    recording &&
+    ((recording.clicks && recording.clicks.length) ||
+        (recording.console && recording.console.length) ||
+        (recording.network && recording.network.length));
+
+if (!list.length && !hasRec) {
     emit({decision: 'allow'});
 }
 
@@ -47,20 +57,66 @@ function describe(target, index, total) {
         .join('\n');
 }
 
-const total = list.length;
-const body = list.map((entry, index) => describe(entry?.target ?? {}, index, total)).join('\n');
-const additionalContext = [
-    `【ui-inspector】用户在页面上选中了 ${total} 个元素，接下来这条消息是针对它们的修改意见：`,
-    body,
-    '请据此定位源码并按用户意见修改。页面选中态已自动取消；改动过程中可调用 MCP 工具 notify_browser 向页面推送状态（如「修改中…」「已完成」），会在浏览器弹 toast。',
-].join('\n');
+function describeRecording(r) {
+    const base = r.startedAt || 0;
+    const secs = Math.round(((r.endedAt || 0) - base || 0) / 1000);
+    const rel = t => (typeof t === 'number' ? `+${((t - base) / 1000).toFixed(2)}s` : '+?');
+
+    // 把点击 / 控制台 / 网络归并成一条按时间排序的时间线；网络拆成「发起」「完成」两个事件。
+    const events = [];
+    (r.clicks || []).forEach(c => {
+        const files = (c.componentChain || []).map(x => x && x.file).filter(Boolean);
+        events.push({
+            ts: c.ts,
+            text:
+                `点击 <${c.tag}> ${JSON.stringify((c.text || '').slice(0, 40))} @ ${c.selector}` +
+                (files.length ? ` | 源码 ${files.join(' <- ')}` : ''),
+        });
+    });
+    (r.console || []).forEach(l => {
+        events.push({ts: l.ts, text: `控制台[${l.level}] ${String(l.text).slice(0, 300)}`});
+    });
+    (r.network || []).forEach(n => {
+        events.push({ts: n.startTs, text: `网络→发起 ${n.method} ${n.url}`});
+        events.push({ts: n.endTs, text: `网络←完成 ${n.method} ${n.url} → ${n.status} (${n.ms}ms)`});
+    });
+    // V8 的 sort 稳定：同一时刻保持插入序（发起在完成之前）。
+    events.sort((a, b) => (a.ts || 0) - (b.ts || 0));
+
+    const parts = [
+        `【ui-inspector 录制】用户录制了一段操作（页面 ${r.pageUrl || ''}，约 ${secs}s，共 ${events.length} 个事件，时间为相对录制起点的偏移）：`,
+    ];
+    events.slice(0, 120).forEach(e => parts.push(`  ${rel(e.ts)} ${e.text}`));
+    if (events.length > 120) {
+        parts.push(`  …（其余 ${events.length - 120} 个事件省略）`);
+    }
+    return parts.join('\n');
+}
+
+const sections = [];
+if (list.length) {
+    const total = list.length;
+    sections.push(
+        [
+            `【ui-inspector】用户在页面上选中了 ${total} 个元素，接下来这条消息是针对它们的修改意见：`,
+            list.map((entry, index) => describe(entry?.target ?? {}, index, total)).join('\n'),
+        ].join('\n')
+    );
+}
+if (hasRec) {
+    sections.push(describeRecording(recording));
+}
+sections.push(
+    '请据此定位源码并按用户意见修改。页面选中态已自动取消；改动过程中可调用 MCP 工具 notify_browser 向页面推送状态（如「修改中…」「已完成」），会在浏览器弹 toast。'
+);
 
-// 「拿到即取消选中」：注入后清空 pending，页面轮询到 count=0 即撤掉高亮
+// 「拿到即消费」：注入后清空 pending 与 recording
 try {
     mkdirSync(dirname(storeFile), {recursive: true});
     writeFileSync(storeFile, '[]\n', 'utf8');
+    writeFileSync(recordingFile, 'null\n', 'utf8');
 } catch {
     // 清空失败不影响注入
 }
 
-emit({decision: 'allow', additionalContext});
+emit({decision: 'allow', additionalContext: sections.join('\n\n')});

package/package.json

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