PageMiner 功能演示

核心功能演示

了解PageMiner如何改变您的数据采集工作流程

🎯

可视化选择

通过鼠标悬停和点击操作，直接在网页上选择需要提取的数据元素。系统会自动高亮显示可选择的元素，并生成唯一的CSS选择器。

体验选择

🧠

智能规则生成

无需手动编写CSS选择器，PageMiner会自动分析页面结构，生成精确的提取规则，支持文本、图片、链接等多种数据类型。

查看规则

⚡

自动执行

配置完成后，系统会自动在相似页面上执行数据提取，无需重复操作，大大提高工作效率。

测试执行

📊

数据管理

提取的数据以结构化形式展示，支持多种格式导出，方便后续分析和处理。

查看数据

交互式演示

通过模拟操作体验PageMiner的核心功能

模拟数据提取

选择要提取的数据类型，体验PageMiner的智能提取功能

目标网站URL

数据类型

提取数量

提取结果

已提取: 0 条成功率: 0% 用时: 0s

序号	内容	状态

视频演示

通过视频演示了解PageMiner的核心功能

功能演示视频

通过实际操作演示，了解PageMiner的完整工作流程

本视频展示了PageMiner插件的完整使用流程，包括可视化选择、智能规则生成、数据提取和结果管理等核心功能。

🎨可视化选择

演示如何通过鼠标悬停和点击操作选择页面元素，系统自动高亮显示可选择的元素。

🧠智能规则生成

展示系统如何自动分析页面结构，生成精确的CSS选择器和提取规则。

⚡数据提取执行

演示配置完成后如何自动执行数据提取，显示实时进度和结果。

📊结果管理

展示提取数据的结构化展示、导出功能和本地存储管理。

功能特性展示

深入了解PageMiner的技术优势和使用方法

🔍智能元素识别

PageMiner能够智能识别页面中的列表结构、表格数据、重复元素等，自动生成最优的提取策略。支持多种元素类型检测。


// 自动识别的选择器示例
.product-list .product-item:nth-of-type(1) {
.title: .product-title
.price: .product-price
.image: .product-image
}

// 智能类型检测
function detectElementType(element) {
if (element.tagName === 'IMG') return 'image';
if (element.tagName === 'A') return 'link';
return 'text';
}

⚙️规则配置

支持多种选择器类型，包括CSS选择器、XPath、DOM路径等，满足不同场景的需求。自动生成唯一选择器。


// 支持的规则类型
CSS: .product-title
XPath: //div[@class='product-title']
DOM: body > div.product > h1

// 自动生成唯一选择器
function getUniqueSelector(el) {
const path = [];
while (el && el.nodeType === Node.ELEMENT_NODE) {
let selector = el.nodeName.toLowerCase();
if (el.id) {
selector += `#${el.id}`;
break;
} else {
let sibling = el;
let nth = 1;
while (sibling = sibling.previousElementSibling) {
if (sibling.nodeName === el.nodeName) nth++;
}
selector += `:nth-of-type(${nth})`;
}
path.unshift(selector);
el = el.parentNode;
}
return path.join(" > ");
}

🔄规则复用

一次配置，多处使用。支持规则的导入导出，团队协作更高效。


// 规则导出格式
{
"name": "电商产品信息",
"key": "product-info",
"fields": ["title", "price", "image"],
"selectors": {...}
}

📈数据导出

支持CSV、Excel、JSON等多种格式导出，数据可直接用于分析工具或数据库。


// 导出格式示例
CSV: title,price,image
Excel: 表格形式
JSON: 结构化数据

插件功能特性

基于实际代码实现的核心功能展示

🎨可视化提取模式

启动提取模式后，鼠标悬停页面元素会显示红色边框高亮，点击元素即可选择并配置提取规则。


// 提取模式启动
function enableExtractionMode() {
document.addEventListener("mouseover", mouseoverHandler, true);
document.addEventListener("mouseout", mouseoutHandler, true);
document.addEventListener("click", clickHandler, true);
}

// 元素高亮效果
function highlight(el) {
if (el) {
el.style.outline = "2px solid red";
highlightedElement = el;
}
}

🔍智能类型检测

自动检测元素类型，智能推荐字段类型，支持文本、图片、链接等多种数据类型。


// 智能类型检测
function detectElementType(target) {
if (target.tagName === 'IMG') return 'image';
if (target.tagName === 'A') return 'link';
if (target.tagName === 'INPUT') return 'input';
return 'text';
}

// 支持的数据类型
const supportedTypes = ['text', 'image', 'link', 'input', 'auto'];

⚡实时提取进度

提取过程中显示实时进度，高亮正在提取的元素，提供视觉反馈和状态指示。


// 提取进度高亮
function highlightExtractingElement(selector, fieldName) {
const element = document.querySelector(selector);
if (!element) return null;

const highlightContainer = document.createElement('div');
highlightContainer.className = 'pageminer-extraction-highlight';
highlightContainer.setAttribute('data-pageminer-highlight', fieldName);

// 设置高亮样式和动画
Object.assign(highlightContainer.style, {
border: '3px solid #10b981',
backgroundColor: 'rgba(16, 185, 129, 0.08)',
animation: 'pageminer-pulse 1.5s ease-in-out infinite'
});
}

💾本地数据存储

所有提取规则和数据默认保存在本地，保护用户隐私，支持规则导入导出。


// 数据存储结构
const ruleData = {
name: "电商产品信息",
key: "product-info",
url: "https://example.com",
fields: [
{ name: "产品名称", selector: ".product-title", type: "text" },
{ name: "产品价格", selector: ".product-price", type: "text" },
{ name: "产品图片", selector: ".product-image", type: "image" }
]
};

// 保存到本地存储
chrome.storage.local.set({ [ruleData.key]: ruleData });

🚀 PageMiner 功能演示