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

news2025/7/17 16:41:16

从零开发一个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