# xpath-tool

**Repository Path**: moonandpoetry/xpath-tool

## Basic Information

- **Project Name**: xpath-tool
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-30
- **Last Updated**: 2025-11-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XPath工具 - Chrome插件

这是一个基于React开发的Chrome插件，用于输入XPath表达式并获取网页上对应元素的内容。插件使用manifest_version 3规范。

## 功能特点

- 输入XPath表达式，实时获取匹配的元素内容
- 显示元素标签、属性和文本内容
- 提供常用XPath表达式快速选择
- 获取单个元素的XPATH路径

## 安装方法

### 开发模式安装

1. 克隆或下载本项目到本地
2. 安装依赖：
   ```bash
   npm install
   ```
3. 构建项目：
   ```bash
   npm run build
   ```
4. 在Chrome浏览器中打开扩展管理页面：`chrome://extensions/`
5. 开启右上角的"开发者模式"
6. 点击"加载已解压的扩展程序"，选择项目根目录下的`dist`文件夹

## 使用说明

1. 点击浏览器工具栏中的插件图标打开XPath工具
2. 在输入框中输入XPath表达式（例如：`//div[@class='example']`）
4. 点击"检索"按钮执行XPath查询
5. 查看查询结果，包括元素类型、属性和文本内容

### 主要功能按钮

- **获取单个元素**：只返回第一个匹配的元素
- **常用表达式**：提供一些预设的常用XPath表达式

### 常用XPath表达式示例

- `//title` - 获取页面标题
- `//a` - 获取所有链接
- `//img` - 获取所有图片
- `//div[@class='container']` - 获取class为container的div元素
- `//h1` - 获取所有一级标题

## 项目结构

```
├── public/             # 静态资源文件
│   ├── icons/          # 插件图标
│   ├── manifest.json   # 插件配置文件
│   └── content.js      # 内容脚本（用于在网页中执行XPath查询）
├── src/                # React源代码
│   ├── App.jsx         # 主应用组件
│   ├── App.css         # 样式文件
│   └── main.jsx        # 应用入口
├── index.html          # popup页面HTML
├── package.json        # 项目配置和依赖
├── vite.config.js      # Vite构建配置
└── .gitignore          # Git忽略文件
```

## 开发说明

### 启动开发服务器

```bash
npm run dev
```

### 构建生产版本

```bash
npm run build
```

构建后的文件将输出到`dist`目录，可以直接加载到Chrome中使用。

## 技术栈

- React 18
- Vite
- Chrome Extension API (Manifest V3)

## 注意事项

- 插件图标当前使用SVG格式，实际使用时建议转换为PNG格式以获得更好的兼容性
- 在某些受限制的网页上，内容脚本可能无法正常注入
- XPath查询结果数量过大会影响性能，建议合理设置结果限制

## 许可证

MIT