Element Explorer - 网页元素探查工具

一个强大的Chrome浏览器扩展，用于自动探索和导出网页中的交互元素（按钮、链接、输入框等）及其位置信息。

功能特性

• 🔍 自动扫描: 智能识别网页中的所有交互元素
• 📍 位置定位: 精确获取元素的坐标和CSS选择器
• 🎯 元素高亮: 实时高亮显示选中的元素
• 📊 详细信息: 查看元素的属性、样式和定位器
• 📤 多格式导出: 支持JSON、CSV、XML格式导出
• ⚙️ 灵活配置: 可自定义扫描选项和显示设置

安装方法

开发者模式安装

1. 克隆或下载此项目到本地
2. 运行构建命令：

   npm install
   npm run build

3. 打开Chrome浏览器，进入扩展管理页面：
   • 地址栏输入 chrome://extensions/
   • 或者点击右上角三点菜单 → 更多工具 → 扩展程序
4. 开启右上角的"开发者模式"
5. 点击"加载已解压的扩展程序"
6. 选择项目的 dist 文件夹
7. 扩展安装完成！

使用方法

基本操作

1. 启动扫描：点击浏览器工具栏中的扩展图标，在弹出窗口中点击"开始扫描"
2. 查看结果：扫描完成后，点击"查看元素列表"查看所有发现的元素
3. 元素详情：点击任意元素可查看详细信息，包括：
   • 基本信息（标签、文本、类型等）
   • 元素属性
   • CSS样式
   • 定位器（CSS选择器、XPath、JavaScript代码）
4. 元素高亮：在详情页面点击"高亮元素"可在网页中突出显示该元素
5. 导出数据：在导出配置页面选择格式和字段，下载元素数据

高级功能

• 筛选元素：在元素列表中按类型筛选（按钮、链接、输入框等）
• 搜索功能：通过关键词快速查找特定元素
• 批量操作：选择多个元素进行批量导出
• 自定义设置：在设置页面配置扫描选项和显示偏好

技术架构

• 前端框架: React + TypeScript
• 构建工具: Vite
• 样式框架: Tailwind CSS
• 状态管理: Zustand
• 扩展API: Chrome Extension Manifest V3

项目结构

src/
├── components/          # React组件
│   ├── ControlPanel.tsx # 主控制面板
│   ├── ElementList.tsx  # 元素列表
│   ├── ElementDetail.tsx# 元素详情
│   ├── ExportConfig.tsx # 导出配置
│   └── Settings.tsx     # 设置页面
├── services/            # 服务层
│   └── chromeService.ts # Chrome API服务
├── store/               # 状态管理
│   └── elementStore.ts  # 元素数据存储
├── types/               # TypeScript类型定义
│   └── index.ts
├── App.tsx              # 主应用组件
└── main.tsx             # 应用入口

public/
├── manifest.json        # 扩展清单文件
├── background.js        # 后台脚本
└── content.js           # 内容脚本

开发说明

本地开发

# 安装依赖
npm install

# 启动开发服务器（用于UI开发）
npm run dev

# 构建扩展
npm run build

注意事项

• 开发环境下的预览页面会显示"Chrome API not available"错误，这是正常现象
• 扩展的完整功能只能在Chrome浏览器中作为扩展运行时才能使用
• 修改代码后需要重新构建并在Chrome扩展管理页面刷新扩展

许可证

MIT License

贡献

欢迎提交Issue和Pull Request来改进这个项目！