虾仁Xpath-CSS

## 用途：
前端调试效率提升：一键生成任意元素的精确 XPath，无需手动编写或复杂选择器，加速页面元素定位与测试。
自动化测试脚本编写：为 Selenium、Playwright等自动化工具快速提供定位表达式，减少编写和维护成本。

## 功能特点：
1、元素高亮与定位：激活插件后，Windows系统下按下Ctrl键并点击页面元素，Mac系统下按下Shift键并点击页面元素，插件会以半透明遮罩高亮目标元素，同时在提示框中显示元素标签名与简化 XPath 路径，支持在 iframe 嵌套场景中自动适配元素位置，解决跨框架元素定位问题。
2、多维度 XPath 生成：针对选中元素生成 7 类 XPath 表达式，包括：
2.1 绝对路径（如/html/body/div[2]/div），虽不建议使用但提供完整层级参考；
2.2 基于 ID 定位（如//div[@id="main-content"]），利用唯一 ID 精准匹配；
2.3 类名匹配（如//div[contains(@class,"content-box")]），支持多类名组合与部分匹配；
2.4 属性定位（如//a[@href="/about"]），可基于任意非事件属性生成；
2.5 文本内容匹配（如//span[text()="登录"]），支持完整文本与前 5 字符模糊匹配；
2.6 层级位置路径（如(//li)[3]），通过兄弟元素排序定位；
2.7 智能优化路径（如//div[@class="card"]/h3），自动生成最短唯一路径。
3、双模式显示控制：
3.1 基础模式：仅展示智能优化的 XPath，过滤冗余信息，适合快速获取可用路径；
3.2 完整模式：展示所有 7 类 XPath，当基础模式无结果时自动切换，满足复杂场景需求。
4、实时搜索验证：支持手动输入 XPath 表达式，插件会实时搜索页面匹配元素，显示匹配数量并高亮结果，帮助用户验证路径有效性，例如输入//button[contains(text(),"提交")]可快速定位相关按钮。
5、数据持久化存储：自动保存最近选中元素的 XPath 数据、匹配结果及模式设置，支持跨标签页恢复上次操作状态，避免重复操作。
6、兼容性与错误处理：
6.1 自动检测 浏览器内部页面、about:blank 等不兼容场景并显示错误提示；
6.2 处理跨域 iframe 元素时，自动生成包含框架路径的 XPath（如//iframe[1]//div）；
6.3 对无效 XPath 表达式进行异常捕获，避免插件崩溃。
7、便捷交互设计：
7.1 点击复制按钮一键复制 XPath 到剪贴板，伴随 "Copied!" 提示，自动填充Xpath至搜索输入框 触发主动搜索，并使页面定位到的元素高亮；
7.2 支持回车键触发搜索，重置按钮清空当前操作；
7.3 工具栏图标随插件激活状态切换样式，橙色表示激活，灰色表示关闭。
8、响应式界面：弹窗采用 Tailwind CSS 布局，适配不同浏览器窗口尺寸，XPath 列表按类型分组展示，每个路径附带描述说明（如 "使用父元素类名与相对层级匹配"），提升可读性。

## 安装说明：
方法一：从 浏览器 应用商店安装（推荐）
打开浏览器，访问 XPath 生成器插件页面。
点击「添加至 」按钮。
在弹出的确认对话框中，点击「添加扩展程序」。
安装完成后，浏览器右上角会出现插件图标（是一个 XPath 标识）。