comate-ui-inspector 0.1.5 → 0.1.6-alpha.1

package/bridge/server.mjs

@@ -10,7 +10,7 @@
  * 安全：只绑 127.0.0.1，不暴露到网络；远程访问一律走 `ssh -L` 把端口转发到本地 127.0.0.1。
  */
 import {createServer} from 'node:http';
-import {readFileSync, writeFileSync, appendFileSync, mkdirSync} from 'node:fs';
+import {readFileSync, writeFileSync, appendFileSync, mkdirSync, readdirSync} from 'node:fs';
 import {dirname, resolve} from 'node:path';
 import {homedir} from 'node:os';
 
@@ -19,6 +19,8 @@ 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');
+// Agent→浏览器命令队列：每条命令一个文件 commands/<id>.json。
+const cmdDir = resolve(homedir(), '.ui-inspector/commands');
 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';
@@ -84,6 +86,64 @@ function recStop(endedAt) {
     writeMeta(cur);
 }
 
+// 命令队列：浏览器轮询取 pending（标记 taken），写回结果。
+function cmdId(id) {
+    return String(id || '').replace(/[^\w.-]/g, '');
+}
+function cmdPoll() {
+    const out = [];
+    let files = [];
+    try {
+        files = readdirSync(cmdDir);
+    } catch {
+        return out;
+    }
+    for (const f of files) {
+        if (!f.endsWith('.json')) {
+            continue;
+        }
+        const fp = resolve(cmdDir, f);
+        let c;
+        try {
+            c = JSON.parse(readFileSync(fp, 'utf8'));
+        } catch {
+            continue;
+        }
+        if (c && c.status === 'pending') {
+            c.status = 'taken';
+            try {
+                writeFileSync(fp, JSON.stringify(c), 'utf8');
+            } catch {
+                // 忽略
+            }
+            out.push({id: c.id, type: c.type, params: c.params || {}});
+        }
+    }
+    return out;
+}
+function cmdResult(id, result, error) {
+    const fp = resolve(cmdDir, `${cmdId(id)}.json`);
+    let c;
+    try {
+        c = JSON.parse(readFileSync(fp, 'utf8'));
+    } catch {
+        return;
+    }
+    c.status = error ? 'error' : 'done';
+    if (error) {
+        c.error = String(error);
+    } else {
+        c.result = result;
+    }
+    c.doneAt = Date.now();
+    try {
+        mkdirSync(cmdDir, {recursive: true});
+        writeFileSync(fp, JSON.stringify(c), 'utf8');
+    } catch {
+        // 忽略
+    }
+}
+
 function readBody(req, cb) {
     let body = '';
     req.on('data', chunk => (body += chunk));
@@ -166,6 +226,20 @@ const server = createServer((req, res) => {
         });
         return;
     }
+    if (req.method === 'GET' && url.pathname === '/cmd/poll') {
+        json(res, 200, {ok: true, commands: cmdPoll()});
+        return;
+    }
+    if (req.method === 'POST' && url.pathname === '/cmd/result') {
+        readBody(req, (data, err) => {
+            if (err) {
+                return json(res, 400, {ok: false, error: String(err)});
+            }
+            cmdResult(data.id, data.result, data.error);
+            json(res, 200, {ok: true});
+        });
+        return;
+    }
     json(res, 404, {ok: false, error: 'not found'});
 });
 

package/cli.mjs

@@ -20,6 +20,7 @@ import {
     openSync,
     readdirSync,
     readFileSync,
+    statSync,
     writeFileSync,
     rmSync,
 } from 'node:fs';
@@ -196,7 +197,7 @@ function availableEnhancements() {
     }
 }
 
-function addEnhancement(name) {
+async function addEnhancement(name) {
     if (!name) {
         out(`用法：ui-inspector add <名>。可用：${availableEnhancements().join(', ') || '（无）'}`);
         return;
@@ -215,11 +216,45 @@ function addEnhancement(name) {
         return;
     }
     const id = descriptor.id || name;
-    cpSync(src, join(enhanceDstDir, id), {recursive: true});
+    const dst = join(enhanceDstDir, id);
+    cpSync(src, dst, {recursive: true});
+    // 按需下载大文件（如 figma 引擎）：主包不内置以保持精简，首次 add 时拉取。
+    // 本地源目录已带该文件（开发/仓库场景）则跳过，离线可用。
+    for (const d of descriptor.download || []) {
+        const target = join(dst, d.file);
+        let haveLocal = false;
+        try {
+            haveLocal = existsSync(target) && statSync(target).size >= (d.minBytes || 1);
+        } catch {
+            haveLocal = false;
+        }
+        if (haveLocal) {
+            continue;
+        }
+        out(`按需下载 ${d.file} …（${d.url}）`);
+        try {
+            const resp = await fetch(d.url);
+            if (!resp.ok) {
+                throw new Error(`HTTP ${resp.status}`);
+            }
+            const buf = Buffer.from(await resp.arrayBuffer());
+            if (d.minBytes && buf.length < d.minBytes) {
+                throw new Error(`文件过小（${buf.length}B），疑似下载失败`);
+            }
+            mkdirSync(dirname(target), {recursive: true});
+            writeFileSync(target, buf);
+            out(`  已写入 ${d.file}（${buf.length}B）`);
+        } catch (error) {
+            rmSync(dst, {recursive: true, force: true});
+            out(`下载 ${d.file} 失败：${String(error)}`);
+            out(`增强包「${id}」安装已回滚。请检查网络后重试，或手动把该文件放到 ${target}。`);
+            return;
+        }
+    }
     const list = readRegistry().filter(p => p.id !== id);
     list.push(descriptor);
     writeRegistry(list);
-    out(`已安装增强包「${descriptor.name || id}」(${id}) -> ${join(enhanceDstDir, id)}`);
+    out(`已安装增强包「${descriptor.name || id}」(${id}) -> ${dst}`);
     out('在 chrome://extensions 点「刷新」重新加载扩展后生效：弹窗出现对应「模式」tab。');
 }
 

package/enhancements/figma/figma-bridge.js

@@ -0,0 +1,46 @@
+/*
+ * Figma 命令中继（ISOLATED world，figma.com）：轮询 background 要 Agent 下发的命令，转给 MAIN 的
+ * figma-exec 执行；把执行结果回传 background（写回命令队列，供 MCP server 取回）。
+ * 只在 figma.com 运行，故命令只在真正能执行的页面被取走。
+ */
+(function () {
+    const alive = () => !!(chrome.runtime && chrome.runtime.id);
+
+    // MAIN 执行完的结果 → background → 命令队列
+    window.addEventListener('message', event => {
+        if (event.source !== window || !event.data || !event.data.__uiInspectorCmdResult) {
+            return;
+        }
+        if (!alive()) {
+            return;
+        }
+        const r = event.data.__uiInspectorCmdResult;
+        try {
+            chrome.runtime.sendMessage(
+                {type: 'cmd-result', id: r.id, result: r.result, error: r.error},
+                () => void chrome.runtime.lastError
+            );
+        } catch {
+            // 上下文失效
+        }
+    });
+
+    const timer = setInterval(() => {
+        if (!alive()) {
+            clearInterval(timer);
+            return;
+        }
+        try {
+            chrome.runtime.sendMessage({type: 'cmd-poll'}, resp => {
+                if (chrome.runtime.lastError || !resp || !resp.ok || !Array.isArray(resp.commands)) {
+                    return;
+                }
+                for (const cmd of resp.commands) {
+                    window.postMessage({__uiInspectorCmd: cmd}, '*');
+                }
+            });
+        } catch {
+            clearInterval(timer);
+        }
+    }, 1200);
+})();

package/enhancements/figma/figma-exec.js

@@ -0,0 +1,83 @@
+/*
+ * Figma 命令执行器（MAIN world，figma.com）：收 figma-bridge 转来的命令，调用页面内已解锁的
+ * window.figma / window.F2CConverter 完成导出，再把结果 postMessage 回 figma-bridge。
+ * 注意：window.figma / F2CConverter 的具体形态由 rewrite.js + browser.global.js 解锁后提供，
+ * 这里按官方扩展观察到的 API 名调用（convertFigmaNodeToHtml / exportAsync），真机可能需微调。
+ */
+(function () {
+    if (window.__oreateFigmaExec) {
+        return;
+    }
+    window.__oreateFigmaExec = true;
+
+    function reply(id, result, error) {
+        window.postMessage({__uiInspectorCmdResult: {id: id, result: result, error: error ? String(error) : undefined}}, '*');
+    }
+
+    function resolveNode(params) {
+        var fig = window.figma;
+        if (!fig) {
+            throw new Error('window.figma 不可用（请确认已在 figma.com 设计稿页，且扩展已解锁）');
+        }
+        if (params && params.nodeId && typeof fig.getNodeById === 'function') {
+            var n = fig.getNodeById(params.nodeId);
+            if (n) {
+                return n;
+            }
+        }
+        var sel = fig.currentPage && fig.currentPage.selection;
+        if (sel && sel.length) {
+            return sel[0];
+        }
+        throw new Error('未找到目标节点：传入 nodeId 或先在画布选中一个节点');
+    }
+
+    function toBase64(bytes) {
+        var bin = '';
+        var arr = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
+        for (var i = 0; i < arr.length; i++) {
+            bin += String.fromCharCode(arr[i]);
+        }
+        return btoa(bin);
+    }
+
+    async function exec(cmd) {
+        var type = cmd.type;
+        var params = cmd.params || {};
+        if (type === 'figma_export_node_html') {
+            if (!window.F2CConverter || typeof window.F2CConverter.convertFigmaNodeToHtml !== 'function') {
+                throw new Error('window.F2CConverter.convertFigmaNodeToHtml 不可用');
+            }
+            var node = resolveNode(params);
+            var html = await window.F2CConverter.convertFigmaNodeToHtml(node, params.options || {});
+            return {html: typeof html === 'string' ? html : JSON.stringify(html)};
+        }
+        if (type === 'figma_export_node_image') {
+            var n = resolveNode(params);
+            if (!n || typeof n.exportAsync !== 'function') {
+                throw new Error('该节点不支持 exportAsync 导出');
+            }
+            var format = (params.format || 'PNG').toUpperCase();
+            var bytes = await n.exportAsync({format: format});
+            return {base64: toBase64(bytes), format: format};
+        }
+        throw new Error('未知命令类型：' + type);
+    }
+
+    window.addEventListener('message', function (ev) {
+        if (ev.source !== window || !ev.data || !ev.data.__uiInspectorCmd) {
+            return;
+        }
+        var cmd = ev.data.__uiInspectorCmd;
+        Promise.resolve()
+            .then(function () {
+                return exec(cmd);
+            })
+            .then(function (result) {
+                reply(cmd.id, result, null);
+            })
+            .catch(function (err) {
+                reply(cmd.id, null, err);
+            });
+    });
+})();

package/enhancements/figma/figma.js

@@ -0,0 +1 @@
+var figma=(function(){function e(e){return e==null||typeof e==`function`?{main:e}:e}let t=[{markers:[`.appModel.isReadOnly`],replacements:[{pattern:`.appModel.isReadOnly`,replacer:`.appModel.__isReadOnly__`}]},{markers:[`const __html__ = (() => {`],replacements:[{pattern:/([A-Za-z_$][A-Za-z0-9_$]*)=\(0,([A-Za-z_$][A-Za-z0-9_$]*\.[A-Za-z_$][A-Za-z0-9_$]*)\)\(\)\|\|([A-Za-z_$][A-Za-z0-9_$]*);if\(!\1\)/,replacer:`$1=(0,$2)()||$3;if(false)`},{pattern:/if\(\(0,([A-Za-z_$][A-Za-z0-9_$]*\.[A-Za-z_$][A-Za-z0-9_$]*)\)\(\)\)return;([A-Za-z_$][A-Za-z0-9_$]*)&&/,replacer:`if((0,$1)())return;true&&`}]},{markers:[`dispnf.fyufotjpo;00`,`np{.fyufotjpo;00`],replacements:[{pattern:/dispnf\.fyufotjpo;00|np{\.fyufotjpo;00/g,replacer:`FIGMA_PLEASE_STOP`}]},{markers:[`{type:"global",closePluginFunc:`],replacements:[{pattern:/{type:"global",closePluginFunc:[A-Za-z_$][A-Za-z0-9_$]*}/,replacer:`{type:"global",closePluginFunc:()=>{}}`}]},{markers:[`ext_init_wdf`],replacements:[{pattern:`ext_init_wdf`,replacer:`__ext_init_wdf__`}]},{markers:[`let{canRunExtensions:`],replacements:[{pattern:/let\{canRunExtensions:([A-Za-z_$][A-Za-z0-9_$]*),canAccessFullDevMode:([A-Za-z_$][A-Za-z0-9_$]*)\}=([A-Za-z_$][A-Za-z0-9_$]*).openFile;/,replacer:`let{canRunExtensions:$1,canAccessFullDevMode:$2}=$3.openFile;$1=true;`}]}];var n=`[tempad-dev]`,r=e=>{if(!e.length)return[n];let[t,...r]=e;return typeof t==`string`?t.startsWith(n)?e:[`${n} ${t}`,...r]:[n,...e]};let i={log:(...e)=>{console.log(...r(e))},warn:(...e)=>{console.warn(...r(e))},error:(...e)=>{console.error(...r(e))},debug:(...e)=>{}};function a(e,t){return(t.markers||[]).every(t=>e.includes(t))}function o(e,t){let n=e,r=[],o=[];for(let[e,s]of t.entries()){if(!a(n,s))continue;r.push(e);let t=!1;for(let{pattern:e,replacer:r}of s.replacements){let a=n;n=typeof e==`string`?n.replaceAll(e,r):n.replace(e,r),n===a?i.warn(`Replacement had no effect: ${e} -> ${r}`):(t=!0,i.log(`Applied replacement: ${e} -> ${r}`))}t&&o.push(e)}return{content:n,changed:n!==e,matchedGroups:r,rewrittenGroups:o}}var s=e(()=>{async function e(){let e=document.currentScript,n=e?.src;if(!e||!n)return;let r=Object.getOwnPropertyDescriptor(Document.prototype,`currentScript`);function a(t){let n=document.createElement(`script`);n.src=t,n.defer=!0,e.replaceWith(n)}try{let{content:r,changed:a}=o(await(await fetch(n)).text(),t);a&&i.log(`Rewrote script: ${n}`);let s=r.replaceAll(`delete window.figma`,`window.figma = undefined`);Object.defineProperty(document,`currentScript`,{configurable:!0,get(){return e}}),Function(s)()}catch(e){i.error(e),a(`${n}?fallback`)}finally{r?Object.defineProperty(document,`currentScript`,r):delete document.currentScript}}e()}),c={debug:(...e)=>(console.debug,[...e],void 0),log:(...e)=>(console.log,[...e],void 0),warn:(...e)=>(console.warn,[...e],void 0),error:(...e)=>(console.error,[...e],void 0)};return(()=>{let e;try{e=s.main(),e instanceof Promise&&(e=e.catch(e=>{throw c.error(`The unlisted script "figma" crashed on startup!`,e),e}))}catch(e){throw c.error(`The unlisted script "figma" crashed on startup!`,e),e}return e})()})();figma;

package/enhancements/figma/pane.html

@@ -0,0 +1,9 @@
+<div class="hint">在 <code>www.figma.com</code> 打开设计稿后，本模式会在页面注入 F2C 引擎（解锁 Dev Mode / 插件能力）。</div>
+<div
+    id="figma-status"
+    class="hint"
+    style="margin-top: 6px"
+></div>
+<div class="hint" style="margin-top: 6px">
+    需先在上方「设置 → 生效域名」添加 <code>https://www.figma.com</code> 并授权，然后重载扩展。
+</div>

package/enhancements/figma/pane.js

@@ -0,0 +1,17 @@
+/*
+ * Figma 增强包弹窗面板：只做状态提示。真正的注入在 figma.com 页面内由 rewrite.js + browser.global.js
+ * （MAIN world，document_start）完成；导出能力（节点→HTML/图片）由后续的命令通道 + MCP 工具提供。
+ */
+(function () {
+    const el = document.getElementById('figma-status');
+    if (!el) {
+        return;
+    }
+    chrome.permissions.contains({origins: ['https://www.figma.com/*']}, granted => {
+        if (chrome.runtime.lastError) {
+            return;
+        }
+        el.textContent = granted ? '✓ 已授权 figma.com，打开设计稿即生效' : '✗ 尚未授权 figma.com';
+        el.style.color = granted ? '#1a7f37' : '#cf222e';
+    });
+})();

package/enhancements/figma/plugin.json

@@ -0,0 +1,43 @@
+{
+    "id": "figma",
+    "name": "Figma 转代码",
+    "scripts": [
+        {
+            "id": "rewrite",
+            "js": ["rewrite.js"],
+            "matches": ["https://www.figma.com/*"],
+            "world": "MAIN",
+            "runAt": "document_start"
+        },
+        {
+            "id": "converter",
+            "js": ["browser.global.js"],
+            "matches": ["https://www.figma.com/*"],
+            "world": "MAIN",
+            "runAt": "document_start"
+        },
+        {
+            "id": "exec",
+            "js": ["figma-exec.js"],
+            "matches": ["https://www.figma.com/*"],
+            "world": "MAIN",
+            "runAt": "document_idle"
+        },
+        {
+            "id": "bridge",
+            "js": ["figma-bridge.js"],
+            "matches": ["https://www.figma.com/*"],
+            "world": "ISOLATED",
+            "runAt": "document_idle"
+        }
+    ],
+    "pane": "pane.html",
+    "paneJs": "pane.js",
+    "download": [
+        {
+            "file": "browser.global.js",
+            "url": "https://cdn.jsdelivr.net/npm/comate-ui-inspector-figma@latest/browser.global.js",
+            "minBytes": 100000
+        }
+    ]
+}

package/enhancements/figma/rewrite.js

@@ -0,0 +1,2 @@
+var rewrite=function(){"use strict";function j(r){return r}const b={matches:["https://www.figma.com/*"],runAt:"document_start",world:"MAIN",main(){const r="https://ecomfe.github.io/tempad-dev/figma.json",v=[{markers:[".appModel.isReadOnly"],replacements:[{pattern:".appModel.isReadOnly",replacer:".appModel.__isReadOnly__"}]},{markers:['{type:"global",closePluginFunc:'],replacements:[{pattern:/{type:"global",closePluginFunc:[A-Za-z_$][A-Za-z0-9_$]*}/,replacer:'{type:"global",closePluginFunc:()=>{}}'}]},{markers:["let{canRunExtensions:"],replacements:[{pattern:/let\{canRunExtensions:([A-Za-z_$][A-Za-z0-9_$]*),canAccessFullDevMode:([A-Za-z_$][A-Za-z0-9_$]*)\}=([A-Za-z_$][A-Za-z0-9_$]*).openFile;/,replacer:"let{canRunExtensions:$1,canAccessFullDevMode:$2}=$3.openFile;$1=true;"}]}],L=[{id:2,priority:1,action:{type:"redirect",redirect:{extensionPath:"/figma.js"}},condition:{regexFilter:"/webpack-artifacts/assets/(?:figma_app[^.]+|[0-9a-zA-Z-]+)\\.min\\.js(?:\\.br)?$",resourceTypes:["script"]}}];function U(e,t){return(t.markers||[]).every(c=>e.includes(c))}function F(e,t){let n=e;const c=[],o=[];for(const[l,i]of t.entries()){if(!U(n,i))continue;c.push(l);let E=!1;for(const{pattern:f,replacer:A}of i.replacements){const S=n;typeof f=="string"?n=n.replaceAll(f,A):n=n.replace(f,A),n!==S&&(E=!0)}E&&o.push(l)}return{content:n,changed:n!==e,matchedGroups:c,rewrittenGroups:o}}function d(e){var t;try{const n=e.find(c=>c.id===2);return(t=n==null?void 0:n.condition)!=null&&t.regexFilter?new RegExp(n.condition.regexFilter,"i"):null}catch{return null}}async function k(e){try{const t=await fetch(e,{credentials:"omit",cache:"no-cache"});return t.ok?d(await t.json()):null}catch{return null}}let g;Reflect.defineProperty(window,"figma",{set(e){e!==void 0&&(g=e)},get(){return g}});let u=d(L);k(r).then(e=>{e&&(u=e)});const{appendChild:h,insertBefore:m}=Element.prototype,y=new WeakSet,s=new Map;function z(e){return!!u&&u.test(e)}function w(e){return e instanceof HTMLScriptElement&&typeof e.src=="string"&&e.src.length>0}function R(e,t){const n=s.get(e);if(!(!n||n.url!==t)&&(n.ref-=1,n.ref<=0)){try{URL.revokeObjectURL(n.url)}catch{}s.delete(e)}}async function M(e){const t=s.get(e);if(t)return t.ref+=1,{url:t.url,release:()=>R(e,t.url)};const c=await(await fetch(e,{credentials:"include",cache:"force-cache"})).text(),{content:o}=F(c,v),l=new Blob([o],{type:"application/javascript; charset=utf-8"}),i=URL.createObjectURL(l);return s.set(e,{url:i,ref:1}),{url:i,release:()=>R(e,i)}}function p(e,t,n){n?m.call(e,t,n):h.call(e,t)}async function _(e,t,n){if(y.has(t)){p(e,t,n);return}if(y.add(t),!z(t.src)){p(e,t,n);return}try{const{url:c,release:o}=await M(t.src);t.removeAttribute("integrity"),t.addEventListener("load",o,{once:!0}),t.addEventListener("error",o,{once:!0}),t.src=c}catch{}p(e,t,n)}const Z=function(e){return w(e)?(_(this,e,null),e):(h.call(this,e),e)},I=function(e,t){return w(e)?(_(this,e,t),e):(m.call(this,e,t),e)};Element.prototype.appendChild=Z,Element.prototype.insertBefore=I}};function P(){}function a(r,...$){}const x={debug:(...r)=>a(console.debug,...r),log:(...r)=>a(console.log,...r),warn:(...r)=>a(console.warn,...r),error:(...r)=>a(console.error,...r)};return(async()=>{try{return await b.main()}catch(r){throw x.error('The content script "rewrite" crashed on startup!',r),r}})()}();
+rewrite;

package/extension/background.js

@@ -83,6 +83,18 @@ async function viaHttp(target, message) {
             });
             return await r.json();
         }
+        if (message.type === 'cmd-poll') {
+            const r = await fetch(`${base}/cmd/poll`);
+            return await r.json();
+        }
+        if (message.type === 'cmd-result') {
+            const r = await fetch(`${base}/cmd/result`, {
+                method: 'POST',
+                headers: {'content-type': 'application/json'},
+                body: JSON.stringify({id: message.id, result: message.result, error: message.error}),
+            });
+            return await r.json();
+        }
         const r = await fetch(`${base}/state`);
         return await r.json();
     } catch (error) {
@@ -104,7 +116,9 @@ chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
         msg.type === 'state' ||
         msg.type === 'rec-start' ||
         msg.type === 'rec-event' ||
-        msg.type === 'rec-stop'
+        msg.type === 'rec-stop' ||
+        msg.type === 'cmd-poll' ||
+        msg.type === 'cmd-result'
     ) {
         dispatch(msg).then(sendResponse);
         return true; // 异步 sendResponse
@@ -137,48 +151,76 @@ async function readEnhancements() {
 async function buildScripts() {
     const plugins = await readEnhancements();
     const mainJs = [...BASE_MAIN_JS];
+    const extra = []; // 插件专用脚本：各自 matches/world/runAt（如 figma 的 figma.com + document_start + MAIN）
     for (const p of plugins) {
         for (const file of p.main || []) {
             mainJs.push(`enhancements/${p.id}/${file}`);
         }
+        for (const s of p.scripts || []) {
+            extra.push({
+                id: `enh-${p.id}-${s.id}`,
+                js: (s.js || []).map(f => `enhancements/${p.id}/${f}`),
+                matches: s.matches || [],
+                world: s.world || 'ISOLATED',
+                runAt: s.runAt || 'document_idle',
+            });
+        }
     }
-    return [{id: 'ui-inspector-main', js: mainJs, world: 'MAIN'}, BRIDGE_SCRIPT];
+    const base = [
+        {id: 'ui-inspector-main', js: mainJs, world: 'MAIN', runAt: 'document_idle'},
+        {id: BRIDGE_SCRIPT.id, js: BRIDGE_SCRIPT.js, world: 'ISOLATED', runAt: 'document_idle'},
+    ];
+    return {base, extra};
 }
 
-async function syncScripts() {
-    const {domains} = await getConfig();
-    const scripts = await buildScripts();
-    // 只注册已授予主机权限的域名；未授权的等弹窗 request 到权限后再同步。
-    const allowed = [];
-    for (const match of domains || []) {
+// 过滤出已授予主机权限的 match（未授权的等弹窗 request 后再同步）。
+async function filterGranted(matches) {
+    const out = [];
+    for (const match of matches || []) {
         try {
             if (await chrome.permissions.contains({origins: [match]})) {
-                allowed.push(match);
+                out.push(match);
             }
         } catch {
             // 非法 match 模式，跳过
         }
     }
+    return out;
+}
+
+async function syncScripts() {
+    const {domains} = await getConfig();
+    const {base, extra} = await buildScripts();
+    const grantedPopup = await filterGranted(domains);
+
+    const regs = [];
+    // 基础脚本（选取 + 录制 main + bridge）→ 弹窗配置的生效域名
+    if (grantedPopup.length) {
+        for (const s of base) {
+            regs.push({id: s.id, js: s.js, matches: grantedPopup, world: s.world, runAt: s.runAt});
+        }
+    }
+    // 插件专用脚本 → 各自声明的 matches（按授权过滤）
+    for (const s of extra) {
+        const m = await filterGranted(s.matches);
+        if (m.length) {
+            regs.push({id: s.id, js: s.js, matches: m, world: s.world, runAt: s.runAt});
+        }
+    }
+
+    // 先清掉我们注册过的所有脚本（前缀 ui-inspector- / enh-），再按最新结果注册。
     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)});
+        const existing = await chrome.scripting.getRegisteredContentScripts();
+        const ours = existing.filter(s => /^(ui-inspector-|enh-)/.test(s.id)).map(s => s.id);
+        if (ours.length) {
+            await chrome.scripting.unregisterContentScripts({ids: ours});
         }
     } catch {
         // 没注册过，忽略
     }
-    if (!allowed.length) {
-        return;
+    if (regs.length) {
+        await chrome.scripting.registerContentScripts(regs);
     }
-    await chrome.scripting.registerContentScripts(
-        scripts.map(s => ({
-            id: s.id,
-            js: s.js,
-            matches: allowed,
-            world: s.world,
-            runAt: 'document_idle',
-        }))
-    );
 }
 
 async function ensureDefaults() {

package/extension/native-host/host.mjs

@@ -11,7 +11,7 @@
  *
  * 数据文件与 MCP server / hook 共用：统一在用户主目录 ~/.ui-inspector/pending.json（与仓库位置无关）。
  */
-import {readFileSync, writeFileSync, appendFileSync, mkdirSync} from 'node:fs';
+import {readFileSync, writeFileSync, appendFileSync, mkdirSync, readdirSync} from 'node:fs';
 import {dirname, resolve} from 'node:path';
 import {homedir} from 'node:os';
 
@@ -22,6 +22,9 @@ const statusFile = resolve(homedir(), '.ui-inspector/status.json');
 // 分开是为了避免「每条事件读改写整份 JSON」的多进程竞态把 active 盖回 true——事件只追加，不碰 active。
 const recordingFile = resolve(homedir(), '.ui-inspector/recording.json');
 const eventsFile = resolve(homedir(), '.ui-inspector/recording-events.ndjson');
+// Agent→浏览器命令队列：每条命令一个文件 commands/<id>.json（避免单文件读改写竞态）。
+// MCP server 写入 pending；浏览器轮询取走执行；host 写回 done/error 结果。
+const cmdDir = resolve(homedir(), '.ui-inspector/commands');
 
 function readStore() {
     try {
@@ -85,6 +88,64 @@ function recStop(endedAt) {
     writeMeta(cur); // 只有 start/stop 动 active，事件追加不碰它 → stop 后 active 不会被盖回
 }
 
+// 命令队列：浏览器轮询取 pending（取走即标记 taken，避免重复执行）；host 写回结果。
+function cmdId(id) {
+    return String(id || '').replace(/[^\w.-]/g, ''); // 防路径穿越
+}
+function cmdPoll() {
+    const out = [];
+    let files = [];
+    try {
+        files = readdirSync(cmdDir);
+    } catch {
+        return out;
+    }
+    for (const f of files) {
+        if (!f.endsWith('.json')) {
+            continue;
+        }
+        const fp = resolve(cmdDir, f);
+        let c;
+        try {
+            c = JSON.parse(readFileSync(fp, 'utf8'));
+        } catch {
+            continue;
+        }
+        if (c && c.status === 'pending') {
+            c.status = 'taken';
+            try {
+                writeFileSync(fp, JSON.stringify(c), 'utf8');
+            } catch {
+                // 忽略
+            }
+            out.push({id: c.id, type: c.type, params: c.params || {}});
+        }
+    }
+    return out;
+}
+function cmdResult(id, result, error) {
+    const fp = resolve(cmdDir, `${cmdId(id)}.json`);
+    let c;
+    try {
+        c = JSON.parse(readFileSync(fp, 'utf8'));
+    } catch {
+        return;
+    }
+    c.status = error ? 'error' : 'done';
+    if (error) {
+        c.error = String(error);
+    } else {
+        c.result = result;
+    }
+    c.doneAt = Date.now();
+    try {
+        mkdirSync(cmdDir, {recursive: true});
+        writeFileSync(fp, JSON.stringify(c), 'utf8');
+    } catch {
+        // 忽略
+    }
+}
+
 function send(obj) {
     const body = Buffer.from(JSON.stringify(obj), 'utf8');
     const header = Buffer.alloc(4);
@@ -110,6 +171,11 @@ function handle(msg) {
     } else if (msg && msg.type === 'rec-stop') {
         recStop(msg.endedAt);
         resp = {ok: true};
+    } else if (msg && msg.type === 'cmd-poll') {
+        resp = {ok: true, commands: cmdPoll()};
+    } else if (msg && msg.type === 'cmd-result') {
+        cmdResult(msg.id, msg.result, msg.error);
+        resp = {ok: true};
     } else {
         resp = {ok: false, error: 'unknown message'};
     }

package/mcp/server.mjs

@@ -16,6 +16,8 @@ import {createInterface} from 'node:readline';
 
 const storeFile = resolve(homedir(), '.ui-inspector/pending.json');
 const statusFile = resolve(homedir(), '.ui-inspector/status.json');
+// Agent→浏览器命令队列（每条一个文件）。MCP 写 pending，浏览器 figma-bridge 取走执行并写回结果。
+const cmdDir = resolve(homedir(), '.ui-inspector/commands');
 
 function readStore() {
     try {
@@ -41,6 +43,41 @@ function writeStatus(message, level) {
     return status;
 }
 
+// 下发一条命令到队列，返回 id。
+function enqueueCmd(type, params) {
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+    mkdirSync(cmdDir, {recursive: true});
+    writeFileSync(resolve(cmdDir, `${id}.json`), JSON.stringify({id, type, params: params || {}, status: 'pending', ts: Date.now()}), 'utf8');
+    return id;
+}
+
+// 轮询命令结果，直到 done/error 或超时。浏览器需在 figma.com 页打开才会有执行者。
+function waitCmd(id, timeoutMs = 30000) {
+    const fp = resolve(cmdDir, `${id}.json`);
+    const deadline = Date.now() + timeoutMs;
+    return new Promise((res, rej) => {
+        const tick = () => {
+            let c = null;
+            try {
+                c = JSON.parse(readFileSync(fp, 'utf8'));
+            } catch {
+                c = null;
+            }
+            if (c && c.status === 'done') {
+                return res(c.result);
+            }
+            if (c && c.status === 'error') {
+                return rej(new Error(c.error || 'command failed'));
+            }
+            if (Date.now() > deadline) {
+                return rej(new Error('命令超时（确认已在 figma.com 设计稿页打开，且扩展已授权 figma.com 并重载）'));
+            }
+            setTimeout(tick, 400);
+        };
+        tick();
+    });
+}
+
 const TOOLS = [
     {
         name: 'list_pending_edits',
@@ -69,6 +106,32 @@ const TOOLS = [
             required: ['message'],
         },
     },
+    {
+        name: 'figma_export_node_html',
+        description:
+            '把 figma.com 当前设计稿里的某个节点导出为 HTML（F2C），写入本地文件。需浏览器已在 figma.com 设计稿页、扩展安装 figma 增强包并授权 figma.com。',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                nodeId: {type: 'string', description: '目标节点 id；省略则用画布当前选中节点'},
+                outputPath: {type: 'string', description: '导出 HTML 写入的本地绝对路径'},
+            },
+            required: ['outputPath'],
+        },
+    },
+    {
+        name: 'figma_export_node_image',
+        description: '把 figma.com 当前设计稿里的某个节点导出为图片（PNG/JPG/SVG），写入本地文件。前置条件同上。',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                nodeId: {type: 'string', description: '目标节点 id；省略则用画布当前选中节点'},
+                outputPath: {type: 'string', description: '导出图片写入的本地绝对路径'},
+                format: {type: 'string', enum: ['PNG', 'JPG', 'SVG'], description: '图片格式，默认 PNG'},
+            },
+            required: ['outputPath'],
+        },
+    },
 ];
 
 function callTool(name, args) {
@@ -85,6 +148,32 @@ function callTool(name, args) {
     if (name === 'notify_browser') {
         return writeStatus(args?.message, args?.level);
     }
+    if (name === 'figma_export_node_html') {
+        const outputPath = args?.outputPath;
+        if (!outputPath) {
+            throw new Error('outputPath 必填');
+        }
+        const id = enqueueCmd('figma_export_node_html', {nodeId: args?.nodeId});
+        return waitCmd(id).then(result => {
+            const html = (result && result.html) || '';
+            mkdirSync(dirname(outputPath), {recursive: true});
+            writeFileSync(outputPath, html, 'utf8');
+            return {ok: true, path: outputPath, bytes: Buffer.byteLength(html)};
+        });
+    }
+    if (name === 'figma_export_node_image') {
+        const outputPath = args?.outputPath;
+        if (!outputPath) {
+            throw new Error('outputPath 必填');
+        }
+        const id = enqueueCmd('figma_export_node_image', {nodeId: args?.nodeId, format: args?.format});
+        return waitCmd(id).then(result => {
+            const base64 = (result && result.base64) || '';
+            mkdirSync(dirname(outputPath), {recursive: true});
+            writeFileSync(outputPath, Buffer.from(base64, 'base64'));
+            return {ok: true, path: outputPath, format: (result && result.format) || 'PNG'};
+        });
+    }
     throw new Error('unknown tool: ' + name);
 }
 
@@ -113,16 +202,16 @@ function handle(msg) {
         return;
     }
     if (msg.method === 'tools/call') {
-        try {
-            const result = callTool(msg.params?.name, msg.params?.arguments);
-            send({
-                jsonrpc: '2.0',
-                id: msg.id,
-                result: {content: [{type: 'text', text: JSON.stringify(result, null, 4)}]},
-            });
-        } catch (error) {
-            send({jsonrpc: '2.0', id: msg.id, error: {code: -32000, message: String(error)}});
-        }
+        Promise.resolve()
+            .then(() => callTool(msg.params?.name, msg.params?.arguments))
+            .then(result =>
+                send({
+                    jsonrpc: '2.0',
+                    id: msg.id,
+                    result: {content: [{type: 'text', text: JSON.stringify(result, null, 4)}]},
+                })
+            )
+            .catch(error => send({jsonrpc: '2.0', id: msg.id, error: {code: -32000, message: String(error)}}));
         return;
     }
     if (msg.id !== undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "comate-ui-inspector",
-    "version": "0.1.5",
+    "version": "0.1.6-alpha.1",
     "description": "按住 Alt 点选页面元素，把「元素 + Vue 组件源码路径」交给 Comate 定位源码修改。浏览器扩展 + Native Messaging host + MCP + hook。",
     "type": "module",
     "license": "MIT",
@@ -14,7 +14,11 @@
         "mcp",
         "bridge",
         "hooks",
-        "README.md"
+        "README.md",
+        "!extension/enhancements",
+        "!extension/enhancements.json",
+        "!extension/native-host/host-wrapper.sh",
+        "!enhancements/figma/browser.global.js"
     ],
     "engines": {
         "node": ">=18"