fe-selector

框架无关的前端元素选择 SDK。按住修饰键悬停任意 DOM 元素，自动提取组件名、props、样式、源码位置，通过回调或 postMessage 传递给 AI 聊天面板。

支持 React 18/19、Vue 3 及原生 JS，自动检测框架，无需手动配置。

功能

• 元素高亮选择：按住 Alt（或自定义修饰键）悬停元素即可高亮，点击选中
• 深度上下文提取：自动提取组件名、props、CSS 样式、DOM 路径、源码文件 & 行号
• 框架自动检测：无缝支持 React 18/19 Fiber、Vue 3 devtools 及原生 DOM
• Shadow DOM 覆盖层：高亮层通过 Shadow DOM 隔离，不污染用户页面样式
• postMessage 通信：与 opt-ui Shell 集成时，通过标准握手协议传递元素上下文
• 手动模式 API：支持通过 activate() / deactivate() 以编程方式控制选择模式
• Tree-shakable：提供 ./core（纯 JS）、./react（React 专属）多个导出路径，按需引入

安装

npm install fe-selector
# 或
pnpm add fe-selector

快速上手

import { init } from 'fe-selector'

// 仅在开发环境启用
if (import.meta.env.DEV) {
  init({ activationKey: 'alt' })
}

按住 Alt 键悬停元素 → 高亮 → 点击选中 → 触发 onSelect 回调或向 opt-ui Shell 发送 postMessage。

与 opt-ui Shell 配合使用

opt-ui Shell 将你的项目运行在 iframe 沙箱内，AI 聊天面板独立存活、不受 iframe 崩溃影响。配置 SDK 后选中元素，元素上下文自动填入聊天输入框。

License

MIT