提取并展示网页上的指标数据（浏览量、评论数、点赞数、收藏数、转发数）（聪明豆专属）。
当前为
// ==UserScript==
// @name Metrics Extractor
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 提取并展示网页上的指标数据（浏览量、评论数、点赞数、收藏数、转发数）（聪明豆专属）。
// @author duz
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 定义指标的顺序
const metrics = ['浏览量', '评论数', '点赞数', '收藏数', '转发数'];
// 选择所有具有class "icon" 的div元素
const iconDivs = document.querySelectorAll('div.icon');
// 用于存储提取的数字
const numbers = [];
// 遍历每个div，提取span中的数字
iconDivs.forEach(div => {
const span = div.querySelector('span');
if (span) {
const number = span.textContent.trim();
numbers.push(number);
}
});
// 检查numbers数组的长度是否为5的倍数
if (numbers.length % 5 !== 0) {
console.warn('提取的数字数量不是5的倍数，可能存在数据缺失或多余。');
}
// 用于存储分类后的数据
const categorizedData = [];
// 遍历numbers数组，每五个数字为一组
for (let i = 0; i < numbers.length; i += 5) {
const item = {};
metrics.forEach((metric, index) => {
if (i + index < numbers.length) {
const num = parseInt(numbers[i + index], 10);
item[metric] = isNaN(num) ? null : num;
} else {
item[metric] = null;
}
});
categorizedData.push(item);
}
// 统计各指标的总数
const totals = {
'浏览量': 0,
'评论数': 0,
'点赞数': 0,
'收藏数': 0,
'转发数': 0
};
categorizedData.forEach(item => {
metrics.forEach(metric => {
const value = item[metric];
if (typeof value === 'number') {
totals[metric] += value;
}
});
});
// 创建样式
const style = document.createElement('style');
style.innerHTML = `
#metrics-extractor-container {
position: fixed;
top: 20px;
right: 20px;
width: 300px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
padding: 15px;
z-index: 10000;
font-family: Arial, sans-serif;
}
#metrics-extractor-container h2 {
text-align: center;
margin-top: 0;
}
#metrics-extractor-container table {
width: 100%;
border-collapse: collapse;
margin-bottom: 15px;
}
#metrics-extractor-container th, #metrics-extractor-container td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
#metrics-extractor-container th {
background-color: #f2f2f2;
}
#metrics-extractor-container button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
#metrics-extractor-container button:hover {
background-color: #45a049;
}
#metrics-extractor-details {
display: none;
max-height: 200px;
overflow-y: auto;
margin-top: 10px;
}
`;
document.head.appendChild(style);
// 创建容器
const container = document.createElement('div');
container.id = 'metrics-extractor-container';
// 创建标题
const title = document.createElement('h2');
title.textContent = '指标总数';
container.appendChild(title);
// 创建总数表格
const totalsTable = document.createElement('table');
const totalsThead = document.createElement('thead');
const totalsHeaderRow = document.createElement('tr');
const metricHeader = document.createElement('th');
metricHeader.textContent = '指标';
const totalHeader = document.createElement('th');
totalHeader.textContent = '总数';
totalsHeaderRow.appendChild(metricHeader);
totalsHeaderRow.appendChild(totalHeader);
totalsThead.appendChild(totalsHeaderRow);
totalsTable.appendChild(totalsThead);
const totalsTbody = document.createElement('tbody');
for (const [metric, total] of Object.entries(totals)) {
const row = document.createElement('tr');
const metricCell = document.createElement('td');
metricCell.textContent = metric;
const totalCell = document.createElement('td');
totalCell.textContent = total;
row.appendChild(metricCell);
row.appendChild(totalCell);
totalsTbody.appendChild(row);
}
totalsTable.appendChild(totalsTbody);
container.appendChild(totalsTable);
// 创建按钮
const toggleButton = document.createElement('button');
toggleButton.id = 'metrics-extractor-toggle';
toggleButton.textContent = '显示详细数据';
container.appendChild(toggleButton);
// 创建详细数据部分
const detailsSection = document.createElement('div');
detailsSection.id = 'metrics-extractor-details';
const detailsTitle = document.createElement('h2');
detailsTitle.textContent = '详细数据';
detailsSection.appendChild(detailsTitle);
const detailsTable = document.createElement('table');
const detailsThead = document.createElement('thead');
const detailsHeaderRow = document.createElement('tr');
const projectHeader = document.createElement('th');
projectHeader.textContent = '项目';
detailsHeaderRow.appendChild(projectHeader);
metrics.forEach(metric => {
const th = document.createElement('th');
th.textContent = metric;
detailsHeaderRow.appendChild(th);
});
detailsThead.appendChild(detailsHeaderRow);
detailsTable.appendChild(detailsThead);
const detailsTbody = document.createElement('tbody');
categorizedData.forEach((item, index) => {
const row = document.createElement('tr');
const projectCell = document.createElement('td');
projectCell.textContent = index + 1;
row.appendChild(projectCell);
metrics.forEach(metric => {
const cell = document.createElement('td');
cell.textContent = item[metric] !== null ? item[metric] : '-';
row.appendChild(cell);
});
detailsTbody.appendChild(row);
});
detailsTable.appendChild(detailsTbody);
detailsSection.appendChild(detailsTable);
container.appendChild(detailsSection);
document.body.appendChild(container);
// 添加按钮点击事件
toggleButton.addEventListener('click', () => {
if (detailsSection.style.display === 'none' || detailsSection.style.display === '') {
detailsSection.style.display = 'block';
toggleButton.textContent = '隐藏详细数据';
} else {
detailsSection.style.display = 'none';
toggleButton.textContent = '显示详细数据';
}
});
})();