comate-ui-inspector 0.1.5-alpha.3 → 0.1.5-alpha.4

package/bridge/server.mjs

@@ -10,13 +10,15 @@
  * 安全：只绑 127.0.0.1，不暴露到网络；远程访问一律走 `ssh -L` 把端口转发到本地 127.0.0.1。
  */
 import {createServer} from 'node:http';
-import {readFileSync, writeFileSync, mkdirSync} from 'node:fs';
+import {readFileSync, writeFileSync, appendFileSync, 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');
+// 录制：元信息 + append-only 事件流分离，避免多请求读改写竞态把 active 盖回 true。
 const recordingFile = resolve(homedir(), '.ui-inspector/recording.json');
+const eventsFile = resolve(homedir(), '.ui-inspector/recording-events.ndjson');
 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';
@@ -43,51 +45,43 @@ function writeStore(list) {
     writeFileSync(storeFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
 }
 
-// 录制累积：跨刷新/跨页面逐条追加进 recording.json（缓冲在后端，不在页面内存）。
-const REC_CAP = 1000;
-function readRecording() {
+// 录制累积：元信息与事件流分离，避免多请求读改写竞态。
+function readMeta() {
     try {
         return JSON.parse(readFileSync(recordingFile, 'utf8'));
     } catch {
         return null;
     }
 }
-function writeRecording(rec) {
+function writeMeta(meta) {
     mkdirSync(dirname(recordingFile), {recursive: true});
-    writeFileSync(recordingFile, `${JSON.stringify(rec ?? null, null, 4)}\n`, 'utf8');
+    writeFileSync(recordingFile, `${JSON.stringify(meta ?? null, null, 4)}\n`, 'utf8');
 }
 function recStart(startedAt, pageUrl) {
-    const cur = readRecording();
+    const cur = readMeta();
     if (cur && cur.active && cur.startedAt === startedAt) {
-        return; // 同一会话重复 start（多标签页），忽略
+        return; // 同一会话重复 start，忽略
     }
-    writeRecording({active: true, startedAt, pageUrl, clicks: [], console: [], network: []});
+    writeMeta({active: true, startedAt, pageUrl});
+    mkdirSync(dirname(eventsFile), {recursive: true});
+    writeFileSync(eventsFile, '', 'utf8');
 }
 function recEvent(kind, item) {
-    const cur = readRecording();
+    const cur = readMeta();
     if (!cur || !cur.active) {
         return;
     }
-    const key = kind === 'click' ? 'clicks' : kind === 'console' ? 'console' : kind === 'network' ? 'network' : null;
-    if (!key) {
-        return;
-    }
-    if (!Array.isArray(cur[key])) {
-        cur[key] = [];
-    }
-    if (cur[key].length < REC_CAP) {
-        cur[key].push(item);
-        writeRecording(cur);
-    }
+    mkdirSync(dirname(eventsFile), {recursive: true});
+    appendFileSync(eventsFile, `${JSON.stringify({kind, item})}\n`, 'utf8');
 }
 function recStop(endedAt) {
-    const cur = readRecording();
+    const cur = readMeta();
     if (!cur) {
         return;
     }
     cur.active = false;
     cur.endedAt = endedAt || Date.now();
-    writeRecording(cur);
+    writeMeta(cur);
 }
 
 function readBody(req, cb) {

package/enhancements/recorder/pane.html

@@ -4,7 +4,7 @@
         id="rec-console"
         checked
     />
-    录制控制台输出（console）
+    录制控制台输出
 </label>
 <label class="radio">
     <input
@@ -12,7 +12,7 @@
         id="rec-network"
         checked
     />
-    录制网络请求（仅同域）
+    录制网络请求
 </label>
 <button
     id="rec-toggle"

package/enhancements/recorder/pane.js

@@ -19,6 +19,7 @@
         const {recording} = await chrome.storage.local.get({recording: null});
         if (recording && recording.active) {
             await chrome.storage.local.set({recording: {active: false}});
+            refresh();
         } else {
             await chrome.storage.local.set({
                 recording: {
@@ -28,8 +29,9 @@
                     startedAt: Date.now(),
                 },
             });
+            // 开始录制后关闭 popup，让用户直接去页面操作；页面顶部会出现「正在录制」提示条。
+            window.close();
         }
-        refresh();
     };
 
     refresh();

package/extension/enhancements/recorder/pane.html

@@ -0,0 +1,28 @@
+<label class="radio">
+    <input
+        type="checkbox"
+        id="rec-console"
+        checked
+    />
+    录制控制台输出
+</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/extension/enhancements/recorder/pane.js

@@ -0,0 +1,38 @@
+/*
+ * 录制增强包的弹窗面板逻辑（随 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}});
+            refresh();
+        } else {
+            await chrome.storage.local.set({
+                recording: {
+                    active: true,
+                    console: byId('rec-console').checked,
+                    network: byId('rec-network').checked,
+                    startedAt: Date.now(),
+                },
+            });
+            // 开始录制后关闭 popup，让用户直接去页面操作；页面顶部会出现「正在录制」提示条。
+            window.close();
+        }
+    };
+
+    refresh();
+})();

package/extension/enhancements/recorder/plugin.json

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

package/extension/enhancements/recorder/recorder-main.js

@@ -0,0 +1,224 @@
+/*
+ * MAIN world 录制脚本（增强包）：录制期间抓取并**逐条上报**
+ *   - 点击的元素（含 Vue 组件源码链，和选择模式同源）
+ *   - console.log/info/warn/error
+ *   - 同域名下的 fetch / XMLHttpRequest（方法/URL/状态/发起与完成时间）
+ * 每个事件即时 postMessage 出去，经 bridge→background→host/bridge 追加进 recording.json。
+ * 这样页面刷新/跳转也不丢数据：缓冲在后端，不在页面内存，录制可跨页面连续进行。
+ * 本脚本自身无状态缓冲；未开始录制时完全惰性，不打补丁、无开销。
+ */
+(function () {
+    if (window.__oreateRecorder) {
+        return;
+    }
+    window.__oreateRecorder = true;
+
+    var on = null; // 录制中：{console, network}；未录制：null
+    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;
+        }
+    }
+
+    // 逐条上报：kind = click | console | network
+    function emit(kind, item) {
+        window.postMessage({__uiInspector: 'rec-event', kind: kind, item: item}, '*');
+    }
+
+    function onClick(e) {
+        if (!on) {
+            return;
+        }
+        var el = e.target;
+        if (!el || el.nodeType !== 1) {
+            return;
+        }
+        emit('click', {
+            selector: cssPath(el),
+            tag: el.nodeName.toLowerCase(),
+            text: (el.textContent || '').trim().slice(0, 80),
+            componentChain: componentChain(el),
+            pageUrl: location.href,
+            ts: Date.now(),
+        });
+    }
+
+    function startConsole() {
+        ['log', 'info', 'warn', 'error'].forEach(function (level) {
+            saved['c_' + level] = console[level];
+            console[level] = function () {
+                try {
+                    if (on) {
+                        emit('console', {
+                            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 (on && sameHost(url)) {
+                    p.then(
+                        function (r) {
+                            var t1 = Date.now();
+                            emit('network', {method: method, url: url, status: r.status, startTs: t0, endTs: t1, ms: t1 - t0});
+                        },
+                        function () {
+                            var t1 = Date.now();
+                            emit('network', {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 (on && sameHost(info.url)) {
+                        var t1 = Date.now();
+                        emit('network', {
+                            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 (on) {
+            return;
+        }
+        on = {console: !!opts.console, network: !!opts.network};
+        document.addEventListener('click', onClick, true);
+        if (on.console) {
+            startConsole();
+        }
+        if (on.network) {
+            startNetwork();
+        }
+    }
+
+    function stop() {
+        if (!on) {
+            return;
+        }
+        document.removeEventListener('click', onClick, true);
+        stopConsole();
+        stopNetwork();
+        on = null;
+    }
+
+    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/enhancements.json

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

package/extension/native-host/host.mjs

@@ -11,14 +11,17 @@
  *
  * 数据文件与 MCP server / hook 共用：统一在用户主目录 ~/.ui-inspector/pending.json（与仓库位置无关）。
  */
-import {readFileSync, writeFileSync, mkdirSync} from 'node:fs';
+import {readFileSync, writeFileSync, appendFileSync, 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');
+// 录制拆成两份：元信息（active/startedAt/pageUrl/endedAt）与事件流（append-only，每行一条）。
+// 分开是为了避免「每条事件读改写整份 JSON」的多进程竞态把 active 盖回 true——事件只追加，不碰 active。
 const recordingFile = resolve(homedir(), '.ui-inspector/recording.json');
+const eventsFile = resolve(homedir(), '.ui-inspector/recording-events.ndjson');
 
 function readStore() {
     try {
@@ -42,52 +45,44 @@ function writeStore(list) {
     writeFileSync(storeFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
 }
 
-// 录制累积：跨刷新/跨页面逐条追加进 recording.json（缓冲在后端，不在页面内存）。
-const REC_CAP = 1000; // 每类事件上限，防爆
-function readRecording() {
+// 录制累积：跨刷新/跨页面逐条追加。元信息与事件流分离，避免多进程读改写竞态。
+function readMeta() {
     try {
         return JSON.parse(readFileSync(recordingFile, 'utf8'));
     } catch {
         return null;
     }
 }
-function writeRecording(rec) {
+function writeMeta(meta) {
     mkdirSync(dirname(recordingFile), {recursive: true});
-    writeFileSync(recordingFile, `${JSON.stringify(rec ?? null, null, 4)}\n`, 'utf8');
+    writeFileSync(recordingFile, `${JSON.stringify(meta ?? null, null, 4)}\n`, 'utf8');
 }
 function recStart(startedAt, pageUrl) {
-    const cur = readRecording();
-    // 同一会话（startedAt 相同）重复 start（多标签页）直接忽略，避免互相清空。
+    const cur = readMeta();
+    // 同一会话（startedAt 相同）重复 start（多标签页/弹窗+页面双触发）直接忽略，避免清空已录数据。
     if (cur && cur.active && cur.startedAt === startedAt) {
         return;
     }
-    writeRecording({active: true, startedAt, pageUrl, clicks: [], console: [], network: []});
+    writeMeta({active: true, startedAt, pageUrl});
+    mkdirSync(dirname(eventsFile), {recursive: true});
+    writeFileSync(eventsFile, '', 'utf8'); // 清空事件流
 }
 function recEvent(kind, item) {
-    const cur = readRecording();
+    const cur = readMeta();
     if (!cur || !cur.active) {
         return; // 未在录制，丢弃
     }
-    const key = kind === 'click' ? 'clicks' : kind === 'console' ? 'console' : kind === 'network' ? 'network' : null;
-    if (!key) {
-        return;
-    }
-    if (!Array.isArray(cur[key])) {
-        cur[key] = [];
-    }
-    if (cur[key].length < REC_CAP) {
-        cur[key].push(item);
-        writeRecording(cur);
-    }
+    mkdirSync(dirname(eventsFile), {recursive: true});
+    appendFileSync(eventsFile, `${JSON.stringify({kind, item})}\n`, 'utf8'); // 追加，原子、无竞态
 }
 function recStop(endedAt) {
-    const cur = readRecording();
+    const cur = readMeta();
     if (!cur) {
         return;
     }
     cur.active = false;
     cur.endedAt = endedAt || Date.now();
-    writeRecording(cur);
+    writeMeta(cur); // 只有 start/stop 动 active，事件追加不碰它 → stop 后 active 不会被盖回
 }
 
 function send(obj) {

package/hooks/inject-ui-inspector.mjs

@@ -16,7 +16,9 @@ import {homedir} from 'node:os';
 
 // 共享落盘：读用户主目录下的 pending / recording（与 host / bridge / mcp 同一路径），一份代码可服务多个仓库。
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
+// 录制：元信息（active/startedAt/pageUrl/endedAt）+ append-only 事件流（每行一条 {kind,item}）。
 const recordingFile = resolve(homedir(), '.ui-inspector/recording.json');
+const eventsFile = resolve(homedir(), '.ui-inspector/recording-events.ndjson');
 
 function emit(output) {
     process.stdout.write(JSON.stringify(output));
@@ -31,17 +33,50 @@ function readJson(file, fallback) {
     }
 }
 
+// 读 append-only 事件流，按类型归并
+function readEvents() {
+    const clicks = [];
+    const con = [];
+    const network = [];
+    let text = '';
+    try {
+        text = readFileSync(eventsFile, 'utf8');
+    } catch {
+        return {clicks, console: con, network};
+    }
+    for (const line of text.split('\n')) {
+        if (!line.trim()) {
+            continue;
+        }
+        let ev;
+        try {
+            ev = JSON.parse(line);
+        } catch {
+            continue;
+        }
+        if (!ev || !ev.item) {
+            continue;
+        }
+        if (ev.kind === 'click') {
+            clicks.push(ev.item);
+        } else if (ev.kind === 'console') {
+            con.push(ev.item);
+        } else if (ev.kind === 'network') {
+            network.push(ev.item);
+        }
+    }
+    return {clicks, console: con, network};
+}
+
 const parsed = readJson(storeFile, []);
 const list = Array.isArray(parsed) ? parsed : [];
-const recording = readJson(recordingFile, null);
+const meta = readJson(recordingFile, null);
 // 只注入**已停止**的录制（active === false）。录制进行中（跨刷新/跨页面累积）时不消费、不清空，
 // 以免中途给 Comate 发消息把整段会话吞掉。
-const recDone = recording && recording.active === false;
-const hasRec =
-    recDone &&
-    ((recording.clicks && recording.clicks.length) ||
-        (recording.console && recording.console.length) ||
-        (recording.network && recording.network.length));
+const recDone = meta && meta.active === false;
+const events = recDone ? readEvents() : {clicks: [], console: [], network: []};
+const recording = recDone ? {...meta, ...events} : null;
+const hasRec = recDone && (events.clicks.length || events.console.length || events.network.length);
 
 if (!list.length && !hasRec) {
     emit({decision: 'allow'});
@@ -113,12 +148,13 @@ sections.push(
     '请据此定位源码并按用户意见修改。页面选中态已自动取消；改动过程中可调用 MCP 工具 notify_browser 向页面推送状态（如「修改中…」「已完成」），会在浏览器弹 toast。'
 );
 
-// 「拿到即消费」：注入后清空 pending；录制仅在确实注入（已停止）时清空，进行中的保留。
+// 「拿到即消费」：注入后清空 pending；录制仅在确实注入（已停止）时清空元信息与事件流，进行中的保留。
 try {
     mkdirSync(dirname(storeFile), {recursive: true});
     writeFileSync(storeFile, '[]\n', 'utf8');
     if (hasRec) {
         writeFileSync(recordingFile, 'null\n', 'utf8');
+        writeFileSync(eventsFile, '', 'utf8');
     }
 } catch {
     // 清空失败不影响注入

package/package.json

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