Element Namer

点击网页元素，识别其前端组件名称，一键复制与 AI 编程 Agent 沟通的标准描述。

功能

• 组件识别：793 条组件库类名 + MUI/Mantine 动态规则，覆盖 AntD / Element / MUI / Bootstrap / Carbon / Vant / TDesign / PrimeNG 等 30+ 组件库
• 框架检测：React / Vue / Svelte / Solid / Preact / Angular / Web Components 真实组件名 + 源码 file:line
• 定位信息：所属区块、组件树路径、唯一 CSS 选择器（实测验证）、源码路径建议
• AI 沟通：单行紧凑英文格式，含文本/位置/命名/置信度，Agent 可直接用于 getByRole / querySelector
• 细节：重叠元素层级切换、Accessible Name、data-testid、置信度百分比、自定义快捷键

安装

1. chrome://extensions → 打开开发者模式
2. 点击「加载已解压的扩展程序」
3. 选择本目录 element-namer/

使用

• 快捷键进入拾取（默认 Alt+Shift+E，popup 内可录制自定义）
• 悬停高亮 + 实时组件名，点击锁定，卡牌在鼠标下方展开
• 「复制」输出给 Agent 的描述；「选择器 / JSON / 命名」按需复制
• Esc 退出，点击面板外部关闭

开发

node test_dict.js        # 字典完整性（无依赖）
npm i jsdom && node test_content.js   # 集成测试（jsdom）

调试：页面控制台 window.__elementNamerDebug.analyze(el) 手动验证分析。

加组件库：编辑 dictionary.js 的 libPrefixes / libClassMap，跑 node test_dict.js。

License

MIT