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

package/bridge/server.mjs

@@ -3,11 +3,7 @@
  * 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。
+ * ~/.ui-inspector/*.json。浏览器扩展（transport=http）直连本服务。
  */
 import {createServer} from 'node:http';
 import {readFileSync, writeFileSync, appendFileSync, mkdirSync} from 'node:fs';
@@ -19,8 +15,9 @@ 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');
+// figma「带入对话」采集的节点结构。
+const figmaPendingFile = resolve(homedir(), '.ui-inspector/figma-pending.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';
 
 function readStore() {
@@ -45,7 +42,9 @@ function writeStore(list) {
     writeFileSync(storeFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
 }
 
-// 录制累积：元信息与事件流分离，避免多请求读改写竞态。
+// PLACEHOLDER_HELPERS
+
+// 录制累积：元信息与事件流分离。
 function readMeta() {
     try {
         return JSON.parse(readFileSync(recordingFile, 'utf8'));
@@ -60,7 +59,7 @@ function writeMeta(meta) {
 function recStart(startedAt, pageUrl) {
     const cur = readMeta();
     if (cur && cur.active && cur.startedAt === startedAt) {
-        return; // 同一会话重复 start，忽略
+        return;
     }
     writeMeta({active: true, startedAt, pageUrl});
     mkdirSync(dirname(eventsFile), {recursive: true});
@@ -84,6 +83,26 @@ function recStop(endedAt) {
     writeMeta(cur);
 }
 
+// figma 节点采集：追加到 figma-pending.json（上限 10 个，防爆）。
+function figmaCapture(node) {
+    if (!node) {
+        return;
+    }
+    let list = [];
+    try {
+        const p = JSON.parse(readFileSync(figmaPendingFile, 'utf8'));
+        list = Array.isArray(p) ? p : [];
+    } catch {
+        list = [];
+    }
+    list.push({node, ts: Date.now()});
+    if (list.length > 10) {
+        list = list.slice(-10);
+    }
+    mkdirSync(dirname(figmaPendingFile), {recursive: true});
+    writeFileSync(figmaPendingFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
+}
+
 function readBody(req, cb) {
     let body = '';
     req.on('data', chunk => (body += chunk));
@@ -117,18 +136,15 @@ const server = createServer((req, res) => {
     }
     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)});
+        readBody(req, (data, err) => {
+            if (err) {
+                return json(res, 400, {ok: false, error: String(err)});
             }
+            const targets = Array.isArray(data.targets) ? data.targets : [];
+            const now = new Date().toISOString();
+            const list = targets.map(target => ({target, receivedAt: now}));
+            writeStore(list);
+            json(res, 200, {ok: true, pending: list.length});
         });
         return;
     }
@@ -166,6 +182,16 @@ const server = createServer((req, res) => {
         });
         return;
     }
+    if (req.method === 'POST' && url.pathname === '/figma/capture') {
+        readBody(req, (data, err) => {
+            if (err) {
+                return json(res, 400, {ok: false, error: String(err)});
+            }
+            figmaCapture(data.node);
+            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-exec.js

@@ -0,0 +1,49 @@
+/*
+ * Figma 命令执行器（MAIN world，figma.com）：响应「带入对话」——把当前选中节点转成 F2C HTML 结构，
+ * 回传给 figma-ui 落盘待 hook 注入。页面内已解锁的 window.figma / window.F2CConverter 由
+ * rewrite.js + browser.global.js 提供。
+ */
+(function () {
+    if (window.__oreateFigmaExec) {
+        return;
+    }
+    window.__oreateFigmaExec = true;
+
+    function resolveNode() {
+        var fig = window.figma;
+        if (!fig) {
+            throw new Error('window.figma 不可用（请确认在 figma.com 设计稿页，且扩展已解锁）');
+        }
+        var sel = fig.currentPage && fig.currentPage.selection;
+        if (sel && sel.length) {
+            return sel[0];
+        }
+        throw new Error('未选中节点：请先在画布选中一个节点');
+    }
+
+    window.addEventListener('message', function (ev) {
+        if (ev.source !== window || !ev.data || ev.data.__uiInspectorFigmaCapture !== true) {
+            return;
+        }
+        Promise.resolve()
+            .then(async function () {
+                if (!window.F2CConverter || typeof window.F2CConverter.convertFigmaNodeToHtml !== 'function') {
+                    throw new Error('F2CConverter 不可用');
+                }
+                var node = resolveNode();
+                var html = await window.F2CConverter.convertFigmaNodeToHtml(node, {});
+                return {
+                    nodeId: node.id,
+                    name: node.name,
+                    type: node.type,
+                    html: typeof html === 'string' ? html : JSON.stringify(html),
+                };
+            })
+            .then(function (node) {
+                window.postMessage({__uiInspectorFigmaCaptured: {node: node}}, '*');
+            })
+            .catch(function (err) {
+                window.postMessage({__uiInspectorFigmaCaptured: {error: String(err)}}, '*');
+            });
+    });
+})();

package/enhancements/figma/figma-ui.js

@@ -0,0 +1,74 @@
+/*
+ * Figma「带入对话」浮层（ISOLATED world，figma.com）：页面右下角一个按钮，点一下把当前选中节点
+ * 的 F2C HTML 结构采集下来，经 background 落盘 figma-pending.json；下次在 Comate 发消息时，
+ * hook 会把该结构注入对话，Agent 据此生成代码——用户无需手动调工具、无需填路径。
+ */
+(function () {
+    if (window.__oreateFigmaUi) {
+        return;
+    }
+    window.__oreateFigmaUi = true;
+    const alive = () => !!(chrome.runtime && chrome.runtime.id);
+
+    const btn = document.createElement('button');
+    btn.textContent = '带入 Comate 生成代码';
+    btn.style.cssText =
+        'position:fixed;right:16px;bottom:16px;z-index:2147483647;border:none;border-radius:999px;' +
+        'padding:8px 14px;background:#0d99ff;color:#fff;font:12px/1.4 sans-serif;cursor:pointer;' +
+        'box-shadow:0 2px 12px rgba(0,0,0,0.25);';
+
+    let tip = null;
+    function toast(text, ok) {
+        if (!tip) {
+            tip = document.createElement('div');
+            tip.style.cssText =
+                'position:fixed;right:16px;bottom:56px;z-index:2147483647;max-width:280px;padding:6px 10px;' +
+                'border-radius:8px;background:#111;color:#fff;font:12px/1.4 sans-serif;box-shadow:0 2px 12px rgba(0,0,0,0.25);';
+            document.documentElement.appendChild(tip);
+        }
+        tip.textContent = text;
+        tip.style.background = ok === false ? '#dc2626' : ok ? '#16a34a' : '#111';
+        tip.style.display = 'block';
+        clearTimeout(toast._t);
+        toast._t = setTimeout(() => (tip.style.display = 'none'), 3000);
+    }
+
+    btn.onclick = () => {
+        toast('采集选中节点…');
+        window.postMessage({__uiInspectorFigmaCapture: true}, '*');
+    };
+
+    window.addEventListener('message', event => {
+        if (event.source !== window || !event.data || !event.data.__uiInspectorFigmaCaptured) {
+            return;
+        }
+        const payload = event.data.__uiInspectorFigmaCaptured;
+        if (payload.error) {
+            toast('采集失败：' + payload.error, false);
+            return;
+        }
+        if (!alive()) {
+            return;
+        }
+        try {
+            chrome.runtime.sendMessage({type: 'figma-capture', node: payload.node}, resp => {
+                if (chrome.runtime.lastError || !resp || !resp.ok) {
+                    toast('落盘失败，请重试', false);
+                    return;
+                }
+                toast(`已带入「${payload.node.name || payload.node.nodeId}」，去 Comate 发消息即可生成代码`, true);
+            });
+        } catch {
+            toast('扩展上下文失效，请刷新页面', false);
+        }
+    });
+
+    function mount() {
+        if (document.body && !btn.isConnected) {
+            document.body.appendChild(btn);
+        }
+    }
+    mount();
+    document.addEventListener('DOMContentLoaded', mount);
+    setInterval(mount, 2000); // figma 频繁重渲染，兜底保证按钮在
+})();

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,18 @@
+<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": "ui",
+            "js": ["figma-ui.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,14 @@ async function viaHttp(target, message) {
             });
             return await r.json();
         }
+        if (message.type === 'figma-capture') {
+            const r = await fetch(`${base}/figma/capture`, {
+                method: 'POST',
+                headers: {'content-type': 'application/json'},
+                body: JSON.stringify({node: message.node}),
+            });
+            return await r.json();
+        }
         const r = await fetch(`${base}/state`);
         return await r.json();
     } catch (error) {
@@ -104,7 +112,8 @@ 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 === 'figma-capture'
     ) {
         dispatch(msg).then(sendResponse);
         return true; // 异步 sendResponse
@@ -137,48 +146,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,8 @@ 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');
+// figma「带入对话」采集的节点结构，等 hook 注入下一条消息。
+const figmaPendingFile = resolve(homedir(), '.ui-inspector/figma-pending.json');
 
 function readStore() {
     try {
@@ -85,6 +87,26 @@ function recStop(endedAt) {
     writeMeta(cur); // 只有 start/stop 动 active，事件追加不碰它 → stop 后 active 不会被盖回
 }
 
+// figma 节点采集：追加到 figma-pending.json（上限 10 个，防爆）。
+function figmaCapture(node) {
+    if (!node) {
+        return;
+    }
+    let list = [];
+    try {
+        const p = JSON.parse(readFileSync(figmaPendingFile, 'utf8'));
+        list = Array.isArray(p) ? p : [];
+    } catch {
+        list = [];
+    }
+    list.push({node, ts: Date.now()});
+    if (list.length > 10) {
+        list = list.slice(-10);
+    }
+    mkdirSync(dirname(figmaPendingFile), {recursive: true});
+    writeFileSync(figmaPendingFile, `${JSON.stringify(list, null, 4)}\n`, 'utf8');
+}
+
 function send(obj) {
     const body = Buffer.from(JSON.stringify(obj), 'utf8');
     const header = Buffer.alloc(4);
@@ -110,6 +132,9 @@ function handle(msg) {
     } else if (msg && msg.type === 'rec-stop') {
         recStop(msg.endedAt);
         resp = {ok: true};
+    } else if (msg && msg.type === 'figma-capture') {
+        figmaCapture(msg.node);
+        resp = {ok: true};
     } else {
         resp = {ok: false, error: 'unknown message'};
     }

package/hooks/inject-ui-inspector.mjs

@@ -19,6 +19,8 @@ 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');
+// figma「带入对话」采集的节点结构（页面按钮触发落盘），注入后让 Agent 据结构生成代码。
+const figmaPendingFile = resolve(homedir(), '.ui-inspector/figma-pending.json');
 
 function emit(output) {
     process.stdout.write(JSON.stringify(output));
@@ -67,8 +69,11 @@ const meta = readJson(recordingFile, null);
 const recDone = meta && meta.active === false;
 const recEvents = recDone ? readEvents() : [];
 const hasRec = recDone && recEvents.length > 0;
+const figmaParsed = readJson(figmaPendingFile, []);
+const figmaNodes = Array.isArray(figmaParsed) ? figmaParsed : [];
+const hasFigma = figmaNodes.length > 0;
 
-if (!list.length && !hasRec) {
+if (!list.length && !hasRec && !hasFigma) {
     emit({decision: 'allow'});
 }
 
@@ -135,6 +140,23 @@ function describeRecording(meta, evs) {
     return parts.join('\n');
 }
 
+// figma「带入对话」节点：把每个节点的 F2C HTML 结构铺开，供 Agent 据此生成代码。
+function describeFigma(nodes) {
+    const parts = [
+        `【ui-inspector Figma】用户在 Figma 选中并带入了 ${nodes.length} 个节点，请据下面的结构（F2C 导出的 HTML）生成对应前端代码：`,
+    ];
+    nodes.forEach((entry, i) => {
+        const n = (entry && entry.node) || {};
+        const html = String(n.html || '').slice(0, 20000);
+        parts.push(`—— 节点 ${i + 1}：${n.name || ''}（id ${n.nodeId || '?'}，${n.type || ''}）——`);
+        parts.push(html || '(无 HTML)');
+        if ((n.html || '').length > 20000) {
+            parts.push('…（结构过长已截断）');
+        }
+    });
+    return parts.join('\n');
+}
+
 const sections = [];
 if (list.length) {
     const total = list.length;
@@ -148,11 +170,14 @@ if (list.length) {
 if (hasRec) {
     sections.push(describeRecording(meta, recEvents));
 }
+if (hasFigma) {
+    sections.push(describeFigma(figmaNodes));
+}
 sections.push(
     '请据此定位源码并按用户意见修改。页面选中态已自动取消；改动过程中可调用 MCP 工具 notify_browser 向页面推送状态（如「修改中…」「已完成」），会在浏览器弹 toast。'
 );
 
-// 「拿到即消费」：注入后清空 pending；录制仅在确实注入（已停止）时清空元信息与事件流，进行中的保留。
+// 「拿到即消费」：注入后清空 pending / figma；录制仅在确实注入（已停止）时清空，进行中的保留。
 try {
     mkdirSync(dirname(storeFile), {recursive: true});
     writeFileSync(storeFile, '[]\n', 'utf8');
@@ -160,6 +185,9 @@ try {
         writeFileSync(recordingFile, 'null\n', 'utf8');
         writeFileSync(eventsFile, '', 'utf8');
     }
+    if (hasFigma) {
+        writeFileSync(figmaPendingFile, '[]\n', 'utf8');
+    }
 } catch {
     // 清空失败不影响注入
 }

package/mcp/server.mjs

@@ -113,16 +113,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.2",
     "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"