当前位置：首页 > article >正文

从零开发一个B站视频数据统计Chrome插件

article 2025/10/11 9:34:50

从零开发一个B站视频数据统计Chrome插件

前言

B站（哔哩哔哩）作为国内最大的弹幕视频网站之一，视频的播放量、点赞、投币、收藏等数据对于内容创作者和数据分析者来说非常重要。本文将带你一步步实现一个Chrome插件，自动统计并展示B站视频页面的核心数据，并以表格形式美观地呈现。

一、需求分析

目标：

在B站视频页面，自动抓取并统计该视频的播放量、点赞、投币、收藏、分享、转发等数据。
以表格形式展示，包含视频标题，表头清晰，数据一目了然。
支持新版B站页面的DOM结构，保证数据准确。

二、技术选型

Chrome扩展开发：基于Manifest V3，使用content script和popup页面。
JavaScript：实现数据抓取与页面交互。
HTML/CSS：负责弹窗UI和表格美化。
DOM选择器：精准定位B站页面各项数据。
调试工具：Chrome开发者工具（F12）辅助定位元素。

三、开发流程

1. 插件目录结构

bilibili-stats-extension/
├── manifest.json
├── content.js
├── popup.html
├── popup.js
├── style.css
└── icon.png

2. manifest.json 配置

声明插件基本信息、权限、注入脚本和弹窗页面：

{"manifest_version": 3,"name": "B站视频数据统计","version": "1.0","description": "统计B站视频的播放、点赞、投币、分享、收藏、转发等数据，并以表格展示。","permissions": ["activeTab", "scripting"],"host_permissions": ["https://www.bilibili.com/video/*"],"content_scripts": [{"matches": ["https://www.bilibili.com/video/*"],"js": ["content.js"],"css": ["style.css"]}],"action": {"default_popup": "popup.html","default_icon": "icon.png"},"icons": {"16": "icon.png","48": "icon.png","128": "icon.png"}
}

3. popup.html 设计

添加 <meta charset="UTF-8"> 解决中文乱码。
页面顶部显示主标题。
预留数据展示区域。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>B站视频数据统计</title><style>body { font-family: Arial, sans-serif; min-width: 200px; }table { width: 100%; border-collapse: collapse; }th, td { border: 1px solid #ddd; padding: 6px; }th { background: #f5f5f5; }</style></head><body><h2 style="text-align:center;margin-top:10px;">B站视频数据统计</h2><div id="stats">正在获取数据...</div><script src="popup.js"></script></body>
</html>

4. popup.js 核心逻辑

通过 chrome.scripting.executeScript 在B站页面上下文抓取数据。
精准选择器获取各项数据（如 .view-text、.video-like-info.video-toolbar-item-text 等）。
构建表格，标题单独一行，表头为“指标/数值”，数据逐项展示。

function getStatsFromContentScript() {chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {chrome.scripting.executeScript({target: {tabId: tabs[0].id},func: () => {// 获取视频标题let title = document.querySelector('h1[data-v-1b2c6b56], h1.video-title, h1')?.innerText?.trim() || document.title || 'N/A';const getText = (selector) => {const el = document.querySelector(selector);return el ? el.innerText.trim() : 'N/A';};// 选择器需根据实际页面结构调整let play = getText('.view-text');let like = getText('.video-like-info.video-toolbar-item-text');let coin = getText('.video-coin-info.video-toolbar-item-text');let favorite = getText('.video-fav-info.video-toolbar-item-text');let share = getText('.video-share-info-text');let repost = getText('.video-share-info-text'); // B站新版转发与分享合并return {标题: title,播放: play,点赞: like,投币: coin,收藏: favorite,分享: share,转发: repost};}},(results) => {if (results && results[0] && results[0].result) {showStats(results[0].result);} else {showStats({错误: "未获取到数据，请在B站视频页面使用"});}});});
}function showStats(stats) {const table = document.createElement('table');// 标题行if (stats["标题"]) {const titleRow = document.createElement('tr');const titleCell = document.createElement('th');titleCell.colSpan = 2;titleCell.innerText = stats["标题"];titleCell.style.textAlign = 'center';titleCell.style.fontSize = '16px';titleCell.style.background = '#e9e9e9';titleRow.appendChild(titleCell);table.appendChild(titleRow);delete stats["标题"];}// 表头const headerRow = document.createElement('tr');const th1 = document.createElement('th');th1.innerText = '指标';const th2 = document.createElement('th');th2.innerText = '数值';headerRow.appendChild(th1);headerRow.appendChild(th2);table.appendChild(headerRow);// 数据行for (const [key, value] of Object.entries(stats)) {const row = document.createElement('tr');const th = document.createElement('th');th.innerText = key;const td = document.createElement('td');td.innerText = value;row.appendChild(th);row.appendChild(td);table.appendChild(row);}const container = document.getElementById('stats');container.innerHTML = '';container.appendChild(table);
}document.addEventListener('DOMContentLoaded', function() {getStatsFromContentScript();
});

5. 选择器的确定与调试

通过 Chrome F12 检查元素，右键复制 selector，确保选择器准确。
例如：
- 播放量：.view-text
- 点赞：.video-like-info.video-toolbar-item-text
- 投币：.video-coin-info.video-toolbar-item-text
- 收藏：.video-fav-info.video-toolbar-item-text
- 分享/转发：.video-share-info-text

6. 兼容性与健壮性

若数据未能获取，显示“N/A”。
选择器随B站页面更新需适时调整。
插件支持新版B站视频页面。

四、效果展示

在这里插入图片描述

五、总结与展望

本文完整介绍了如何开发一个B站视频数据统计Chrome插件，从需求分析、技术选型、开发流程到选择器调试与UI优化。
该插件可帮助内容创作者、数据分析师快速获取视频核心数据。后续可扩展为批量采集、导出数据、支持更多平台等功能。

如果你也想开发类似插件，欢迎参考本教程并根据实际需求灵活调整！

从零开发一个B站视频数据统计Chrome插件

前言

一、需求分析

二、技术选型

三、开发流程

1. 插件目录结构

2. manifest.json 配置

3. popup.html 设计

4. popup.js 核心逻辑

5. 选择器的确定与调试

6. 兼容性与健壮性

四、效果展示

五、总结与展望

相关文章：