// ==UserScript== // @name bilibili 视频弹幕统计|下载|查询发送者 // @namespace https://github.com/ZBpine/bili-danmaku-statistic // @version 1.8.2 // @description 获取B站视频页弹幕数据，并生成统计页面 // @author ZBpine // @icon https://i0.hdslb.com/bfs/static/jinkela/long/images/favicon.ico // @match https://www.bilibili.com/video/* // @match https://www.bilibili.com/list/watchlater* // @match https://www.bilibili.com/bangumi/play/ep* // @match https://space.bilibili.com/* // @grant none // @license MIT // @run-at document-end // @downloadURL none // ==/UserScript== (function () { 'use strict'; // iframe里初始化统计面板应用 async function initIframeApp(iframe, dataParam, panelInfoParam) { const doc = iframe.contentDocument; const win = iframe.contentWindow; // 引入外部库 const addScript = (src) => new Promise(resolve => { const script = doc.createElement('script'); script.src = src; script.onload = resolve; doc.head.appendChild(script); }); const addCss = (href) => { const link = doc.createElement('link'); link.rel = 'stylesheet'; link.href = href; doc.head.appendChild(link); }; addCss('https://cdn.jsdelivr.net/npm/element-plus/dist/index.css'); await addScript('https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js'); await addScript('https://cdn.jsdelivr.net/npm/element-plus/dist/index.full.min.js'); await addScript('https://cdn.jsdelivr.net/npm/echarts@5'); await addScript('https://cdn.jsdelivr.net/npm/echarts-wordcloud@2/dist/echarts-wordcloud.min.js'); await addScript('https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js'); await addScript('https://cdn.jsdelivr.net/npm/dom-to-image-more@3.5.0/dist/dom-to-image-more.min.js'); // 创建挂载点 const appRoot = doc.createElement('div'); appRoot.id = 'danmaku-app'; doc.body.style.margin = '0'; doc.body.appendChild(appRoot); // 挂载Vue const { createApp, ref, reactive, onMounted, nextTick, h, computed, watch } = win.Vue; const ELEMENT_PLUS = win.ElementPlus; const ECHARTS = win.echarts; const app = createApp({ setup() { app.component('DanmukuTable', { props: { items: Array, itemHeight: { type: Number, default: 42 }, virtualThreshold: { type: Number, default: 2400 }, scrollToTime: Number }, setup(props) { const scrollTop = ref(0); const scrollbarRef = ref(null); const isVirtual = computed(() => props.items.length > props.virtualThreshold); const start = computed(() => isVirtual.value ? Math.floor(scrollTop.value / props.itemHeight) : 0); const visibleCount = computed(() => isVirtual.value ? 50 : props.items.length); const visibleItems = computed(() => props.items.slice(start.value, start.value + visibleCount.value) ); const offsetTop = computed(() => isVirtual.value ? start.value * props.itemHeight : 0); const onScroll = ({ scrollTop: st }) => { scrollTop.value = st; }; const highlightedRowIndex = ref(null); watch(() => props.scrollToTime, (val) => { if (typeof val !== 'number') return; if (!props.items.length) return; const idx = props.items.reduce((closestIdx, item, i) => { const currentDiff = Math.abs(item.progress - val); const closestDiff = Math.abs(props.items[closestIdx]?.progress - val); return currentDiff < closestDiff ? i : closestIdx; }, 0); nextTick(() => { if (isVirtual.value) { const top = Math.max(0, idx - 3) * props.itemHeight; scrollbarRef.value?.wrapRef?.scrollTo?.({ top, behavior: 'smooth' }); } else { const row = scrollbarRef.value?.$el?.querySelectorAll('.danmaku-row')[idx]; row?.scrollIntoView?.({ behavior: 'smooth', block: 'center' }); } highlightedRowIndex.value = idx; // 清除高亮 setTimeout(() => { highlightedRowIndex.value = null; }, 1500); }); }); function createCell(text, style = {}) { return h('div', { style: { padding: '8px', boxSizing: 'border-box', borderRight: '1px solid #ebeef5', ...style } }, text); } return () => h('div', { class: { 'danmuku-table': true, 'danmuku-table--virtual': isVirtual.value }, style: { display: 'flex', flexDirection: 'column', border: '1px solid #ebeef5', minHeight: 0 } }, [ // 表头 h('div', { style: { display: 'flex', fontWeight: 'bold', color: '#909399', backgroundColor: '#fdfdfd', borderBottom: '1px solid #ebeef5' } }, [ createCell('时间', { width: '80px' }), createCell('弹幕内容', { flex: 1 }), createCell('发送时间', { width: '160px', borderRight: 'none' }) ]), // 内容区域 h(ELEMENT_PLUS.ElScrollbar, { ref: scrollbarRef, onScroll }, { default: () => h('div', { style: { height: isVirtual.value ? (props.items.length * props.itemHeight + 'px') : 'auto', position: 'relative' } }, [ h('div', { style: { transform: `translateY(${offsetTop.value}px)` } }, visibleItems.value.map((item, i) => { const isHighlighted = start.value + i === highlightedRowIndex.value; return h('div', { class: 'danmaku-row', style: { display: 'flex', borderBottom: '1px solid #ebeef5', transition: 'background-color 0.2s', backgroundColor: isHighlighted ? '#ecf5ff' : undefined }, onMouseenter: (e) => e.currentTarget.style.backgroundColor = '#f5f7fa', onMouseleave: (e) => e.currentTarget.style.backgroundColor = '', onClick: () => handleRowClick(item) }, [ createCell(formatProgress(item.progress), { width: '80px' }), h(ELEMENT_PLUS.ElTooltip, { content: `发送用户: ${item.midHash}\n等级: ${item.weight}`, placement: 'top-start' }, { default: () => createCell(item.content, { flex: 1, wordBreak: 'break-word', whiteSpace: 'normal', overflowWrap: 'anywhere', }) }), createCell(formatCtime(item.ctime), { width: '160px', borderRight: 'none' }) ]) } )) ]) }) ]); } }); app.component('ImagePopoverLink', { props: { imgSrc: String, // 图片地址 alt: String, // 图片描述 width: { type: Number, default: 100 }, height: { type: Number, default: 100 }, rounded: { type: Boolean, default: false }, linkStyle: { type: String, default: '' } }, setup(props, { slots }) { const imgStyle = computed(() => ({ maxWidth: '100%', maxHeight: '100%', borderRadius: props.rounded ? '50%' : '0%' })); return () => { if (!props.imgSrc) return null; return h(ELEMENT_PLUS.ElPopover, { placement: 'right', popperStyle: `width: ${props.width}px; height: ${props.height}px; padding: 10px; box-sizing: content-box;` }, { default: () => h('div', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100%' } }, [ h('img', { src: props.imgSrc, alt: props.alt, style: imgStyle.value }) ]), reference: () => h(ELEMENT_PLUS.ElLink, { href: props.imgSrc, target: '_blank', type: 'primary', style: props.linkStyle }, slots.default ? slots.default() : '查看') }); }; } }); app.component('ActionTag', { props: { type: { type: String, default: 'info' }, title: String, onClick: Function }, setup(props, { slots }) { return () => h(win.ElementPlus.ElTag, { type: props.type, size: 'small', effect: 'light', round: true, title: props.title, style: { marginLeft: '4px', verticalAlign: 'baseline', cursor: 'pointer', aspectRatio: '1/1', padding: '0' }, onClick: props.onClick }, () => slots.default ? slots.default() : ''); } }); const converter = new BiliMidHashConverter(); const displayedDanmakus = ref([]); const filterText = ref('^(哈|呵|h|ha|H|HA|233+)+$'); const currentFilt = ref(''); const currentSubFilt = ref({}); const subFiltHistory = ref([]); const danmakuCount = ref({ origin: 0, filtered: 0 }); const videoData = reactive(dataParam.videoData || {}); const isTableVisible = ref(true); const isTableAutoH = ref(false); const scrollToTime = ref(null); const loading = ref(true); const panelInfo = ref(panelInfoParam); const danmakuList = { original: [], //原始 filtered: [], //正则筛选后 current: [] //子筛选提交后 }; const charts = { user: { instance: null, expandedH: false, actions: [ { key: 'locateUser', icon: '⚲', title: '定位用户', method: 'locate' } ], render(data) { const countMap = {}; for (const d of data) { countMap[d.midHash] = (countMap[d.midHash] || 0) + 1; } const stats = Object.entries(countMap) .map(([user, count]) => ({ user, count })) .sort((a, b) => b.count - a.count); const userNames = stats.map(item => item.user); const counts = stats.map(item => item.count); const maxCount = Math.max(...counts); const sc = this.expandedH ? 20 : 8; this.instance.setOption({ tooltip: {}, title: { text: '用户弹幕统计', subtext: `共 ${userNames.length} 位用户` }, grid: { left: 100 }, xAxis: { type: 'value', min: 0, max: Math.ceil(maxCount * 1.1), // 横轴最大值略大一点 scale: false }, yAxis: { type: 'category', data: userNames, inverse: true }, dataZoom: [ { type: 'slider', yAxisIndex: 0, startValue: 0, endValue: userNames.length >= sc ? sc - 1 : userNames.length, width: 20 } ], series: [{ type: 'bar', data: counts, label: { show: true, position: 'right', // 在条形右边显示 formatter: '{c}', // 显示数据本身 fontSize: 12 } }] }); }, async onClick({ params, applySubFilter }) { const selectedUser = params.name; await applySubFilter({ value: selectedUser, filterFn: (data) => data.filter(d => d.midHash === selectedUser), labelVNode: (h) => h('span', [ '用户', h(ELEMENT_PLUS.ElLink, { type: 'primary', onClick: () => queryMidFromHash(selectedUser), style: 'vertical-align: baseline;' }, selectedUser), '发送' ]) }); }, locateInChart(midHash) { if (!this.instance) return; const option = this.instance.getOption(); const index = option.yAxis[0].data.indexOf(midHash); if (index === -1) { ELEMENT_PLUS.ElMessageBox.alert( `未在当前图表中找到用户 ${midHash}`, '未找到用户', { type: 'warning', dangerouslyUseHTMLString: true, confirmButtonText: '确定' } ); return; } const sc = this.expandedH ? 20 : 8; const scup = this.expandedH ? 9 : 3; if (index >= 0) { this.instance.setOption({ yAxis: { axisLabel: { formatter: function (value) { if (value === midHash) { return '{a|' + value + '}'; } else { return value; } }, rich: { a: { color: '#5470c6', fontWeight: 'bold' } } } }, dataZoom: [{ startValue: Math.min(option.yAxis[0].data.length - sc, Math.max(0, index - scup)), endValue: Math.min(option.yAxis[0].data.length - 1, Math.max(0, index - scup) + sc - 1) }] }); } ELEMENT_PLUS.ElMessage.success(`已定位到用户 ${midHash}`); }, locate() { ELEMENT_PLUS.ElMessageBox.prompt('请输入要定位的 midHash 用户 ID：', '定位用户', { confirmButtonText: '定位', cancelButtonText: '取消', inputPattern: /^[a-fA-F0-9]{5,}$/, inputErrorMessage: '请输入正确的 midHash（十六进制格式）' }).then(({ value }) => { this.locateInChart(value.trim()); }).catch((err) => { if (err !== 'cancel') { console.error(err); ELEMENT_PLUS.ElMessage.error('定位失败'); } }); } }, wordcloud: { instance: null, expandedH: false, segmentWorker: null, usingSegmentit: false, actions: [ { key: 'deepSegment', icon: '📝', title: '使用深度分词', method: 'enableDeepSegment' } ], async enableDeepSegment() { this.usingSegmentit = !this.usingSegmentit; try { loading.value = true; await nextTick(); await this.render(danmakuList.current); ELEMENT_PLUS.ElMessage.success('已切换模式'); } catch (err) { console.error(err); ELEMENT_PLUS.ElMessage.error('渲染错误'); } finally { loading.value = false; } }, async initWorker() { if (this.segmentWorker) return; const workerCode = ` var startTime = new Date().getTime(); importScripts('https://cdn.jsdelivr.net/npm/segmentit@2.0.3/dist/umd/segmentit.min.js'); const segmentit = Segmentit.useDefault(new Segmentit.Segment()); console.log('Segmentit初始化耗时：' + (new Date().getTime() - startTime) + 'ms'); function compressRepeats(text, maxRepeat = 3) { for (let len = 1; len <= 8; len++) { const regex = new RegExp('((.{1,' + len + '}))\\\\1{' + maxRepeat + ',}', 'g'); text = text.replace(regex, (m, _1, word) => word.repeat(maxRepeat)); } return text; } onmessage = function (e) { startTime = new Date().getTime(); const data = e.data; const freq = {}; for (const d of data) { if (!d.content || d.content.length < 2) continue; const safeContent = compressRepeats(d.content); const words = segmentit .doSegment(safeContent) .map(w => w.w) .filter(w => w.length >= 2); new Set(words).forEach(word => { freq[word] = (freq[word] || 0) + 1; }); } const list = Object.entries(freq) .map(([name, value]) => ({ name, value })) .sort((a, b) => b.value - a.value) .slice(0, 1000); console.log('Segmentit分词耗时：' + (new Date().getTime() - startTime) + 'ms'); postMessage(list); }; `; const blob = new Blob([workerCode], { type: 'application/javascript' }); this.segmentWorker = new Worker(URL.createObjectURL(blob)); }, async render(data) { if (!this.usingSegmentit) { const freq = {}; data.forEach(d => { if (!d.content) return; const words = d.content.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, ' ') .split(/\s+/).filter(w => w.length >= 2); new Set(words).forEach(w => { freq[w] = (freq[w] || 0) + 1; }); }); const list = Object.entries(freq) .map(([name, value]) => ({ name, value })) .sort((a, b) => b.value - a.value) .slice(0, 1000); this.instance.setOption({ title: { text: '弹幕词云' }, tooltip: {}, series: [{ type: 'wordCloud', data: list, gridSize: 8, sizeRange: [12, 40], rotationRange: [0, 0], shape: 'circle', }] }); return; } // 深度模式：调用 Worker + Segmentit await this.initWorker(); return new Promise((resolve, reject) => { const timeout = setTimeout(() => reject(new Error('词云分词超时')), 10000); this.segmentWorker.onmessage = (e) => { clearTimeout(timeout); const list = e.data; this.instance.setOption({ title: { text: '弹幕词云[深度分词]' }, tooltip: {}, series: [{ type: 'wordCloud', gridSize: 8, sizeRange: [12, 40], rotationRange: [0, 0], shape: 'circle', data: list }] }); resolve(); }; this.segmentWorker.onerror = (err) => { clearTimeout(timeout); console.error('[词云Worker错误]', err); reject(err); }; this.segmentWorker.postMessage(data); }); }, async onClick({ params, applySubFilter }) { const keyword = params.name; await applySubFilter({ value: keyword, filterFn: (data) => data.filter(d => new RegExp(keyword, 'i').test(d.content)), labelVNode: (h) => h('span', [ '包含词语', h(ELEMENT_PLUS.ElTag, { type: 'info', size: 'small', style: 'vertical-align: baseline;' }, keyword) ]) }); } }, density: { instance: null, refresh: true, render(data) { const duration = videoData.duration * 1000; // ms const minutes = duration / 1000 / 60; // 动态设置 bin 数量 let binCount = 100; if (minutes <= 10) binCount = 60; else if (minutes <= 30) binCount = 90; else if (minutes <= 60) binCount = 60; else binCount = 30; const bins = new Array(binCount).fill(0); data.forEach(d => { const idx = Math.floor((d.progress / duration) * binCount); bins[Math.min(idx, bins.length - 1)]++; }); const dataPoints = []; for (let i = 0; i < binCount; i++) { const timeSec = Math.floor((i * duration) / binCount / 1000); dataPoints.push({ value: [timeSec, bins[i]], name: formatProgress(timeSec * 1000) }); } this.instance.setOption({ title: { text: '弹幕密度分布' }, tooltip: { trigger: 'axis', formatter: function (params) { const sec = params[0].value[0]; return `时间段：${formatProgress(sec * 1000)}
弹幕数：${params[0].value[1]}`; }, axisPointer: { type: 'line' } }, xAxis: { type: 'value', name: '时间', min: 0, max: Math.ceil(duration / 1000), axisLabel: { formatter: val => formatProgress(val * 1000) } }, yAxis: { type: 'value', name: '弹幕数量' }, series: [{ data: dataPoints, type: 'line', smooth: true, areaStyle: {} // 可选加背景区域 }] }); }, async onClick({ params }) { const targetTime = params.value[0] * 1000; scrollToTime.value = targetTime; } }, date: { instance: null, refresh: true, render(data) { const countMap = {}; data.forEach(d => { const date = formatTime(d.ctime).split(' ')[0]; countMap[date] = (countMap[date] || 0) + 1; }); // 按日期升序排序 const sorted = Object.entries(countMap).sort((a, b) => new Date(a[0]) - new Date(b[0])); const x = sorted.map(([date]) => date); const y = sorted.map(([, count]) => count); const totalDays = x.length; const startIdx = Math.max(0, totalDays - 30); // 只显示最近30天 this.instance.setOption({ title: { text: '发送日期分布' }, tooltip: {}, xAxis: { type: 'category', data: x }, yAxis: { type: 'value', name: '弹幕数量' }, dataZoom: [ { type: 'slider', startValue: startIdx, endValue: totalDays - 1, xAxisIndex: 0, height: 20 } ], series: [{ type: 'bar', data: y }] }); }, async onClick({ params, applySubFilter }) { const selectedDate = params.name; await applySubFilter({ value: selectedDate, filterFn: (data) => data.filter(d => formatTime(d.ctime).startsWith(selectedDate)), labelVNode: (h) => h('span', [ '日期', h(ELEMENT_PLUS.ElTag, { type: 'info', size: 'small', style: 'vertical-align: baseline;' }, selectedDate) ]) }); } }, hour: { instance: null, refresh: true, render(data) { const hours = new Array(24).fill(0); data.forEach(d => { const hour = new Date(d.ctime * 1000).getHours(); hours[hour]++; }); this.instance.setOption({ title: { text: '发送时间分布' }, tooltip: {}, xAxis: { type: 'category', data: hours.map((_, i) => i + '时') }, yAxis: { type: 'value', name: '弹幕数量' }, series: [{ type: 'bar', data: hours }] }); }, async onClick({ params, applySubFilter }) { const selectedHour = parseInt(params.name); await applySubFilter({ value: selectedHour, filterFn: (data) => data.filter(d => new Date(d.ctime * 1000).getHours() === selectedHour), labelVNode: (h) => h('span', [ '每天', h(ELEMENT_PLUS.ElTag, { type: 'info', size: 'small', style: 'vertical-align: baseline;' }, selectedHour), '点' ]) }); } }, pool: { instance: null, expandedH: false, render(data) { const labelMap = { 0: '普通池', 1: '字幕池', 2: '特殊池', 3: '互动池' }; // 动态统计出现过的 pool 值 const poolMap = {}; data.forEach(d => { const key = d.pool; poolMap[key] = (poolMap[key] || 0) + 1; }); const keys = Object.keys(poolMap); const xData = keys.map(k => labelMap[k] ?? `pool:${k}`); const yData = keys.map(k => poolMap[k]); this._poolIndexMap = Object.fromEntries(xData.map((label, i) => [label, Number(keys[i])])); this.instance.setOption({ title: { text: '弹幕池分布' }, tooltip: {}, xAxis: { type: 'category', data: xData }, yAxis: { type: 'value', name: '弹幕数量' }, series: [{ type: 'bar', data: yData }] }); }, async onClick({ params, applySubFilter }) { const poolLabel = params.name; const poolVal = this._poolIndexMap?.[poolLabel]; await applySubFilter({ value: poolLabel, filterFn: (data) => data.filter(d => d.pool === poolVal), labelVNode: (h) => h('span', [ h(ELEMENT_PLUS.ElTag, { type: 'info', size: 'small', style: 'vertical-align: baseline;' }, poolLabel) ]) }); } } }; const chartsVisible = ref(Object.keys(charts)); const chartsActions = reactive({ remove: { icon: '⨉', title: '移除图表', apply: () => true, handler: (chart) => { const idx = chartsVisible.value.indexOf(chart); if (idx !== -1) { chartsVisible.value.splice(idx, 1); disposeChart(chart); } } }, moveDown: { icon: '▼', title: '下移图表', apply: () => true, handler: async (chart) => { const idx = chartsVisible.value.indexOf(chart); if (idx < chartsVisible.value.length - 1) { chartsVisible.value.splice(idx, 1); chartsVisible.value.splice(idx + 1, 0, chart); await nextTick(); const el = doc.getElementById('chart-' + chart); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }); } } }, moveUp: { icon: '▲', title: '上移图表', apply: () => true, handler: async (chart) => { const idx = chartsVisible.value.indexOf(chart); if (idx > 0) { chartsVisible.value.splice(idx, 1); chartsVisible.value.splice(idx - 1, 0, chart); await nextTick(); const el = doc.getElementById('chart-' + chart); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } }, refresh: { icon: '↻', title: '刷新', apply: chart => 'refresh' in charts[chart], handler: async (chart) => { loading.value = true; await nextTick(); disposeChart(chart); await renderChart(chart); loading.value = false; } }, expandH: { icon: '⇕', title: '展开/收起', apply: chart => 'expandedH' in charts[chart], handler: async (chart) => { loading.value = true; await nextTick(); charts[chart].expandedH = !charts[chart].expandedH; disposeChart(chart); await renderChart(chart); loading.value = false; } } }); const chartHover = ref(null); function formatProgress(ms) { const s = Math.floor(ms / 1000); const min = String(Math.floor(s / 60)).padStart(2, '0'); const sec = String(s % 60).padStart(2, '0'); return `${min}:${sec}`; } function formatCtime(t) { const d = new Date(t * 1000); return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0') + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0'); } function formatTime(ts) { const d = new Date(ts * 1000); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`; } async function shareImage() { const html2canvas = win.html2canvas; const domtoimage = win.domtoimage; if (!html2canvas || !domtoimage) { ELEMENT_PLUS.ElMessage.error('截图库加载失败'); return; } const titleWrapper = doc.getElementById('wrapper-title'); const tableWrapper = doc.getElementById('wrapper-table'); const chartWrapper = doc.getElementById('wrapper-chart'); if (!titleWrapper || !tableWrapper || !chartWrapper) { ELEMENT_PLUS.ElMessage.error('找不到截图区域'); return; } loading.value = true; try { titleWrapper.style.paddingBottom = '10px'; //dom-to-image-more会少截 tableWrapper.style.paddingBottom = '40px'; await nextTick(); const loadImage = (blob) => new Promise((resolve) => { const img = new Image(); img.onload = () => resolve(img); img.src = URL.createObjectURL(blob); }); const scale = window.devicePixelRatio; //title使用dom-to-image-more截图，table和chart使用html2canvas截图 const titleBlob = await domtoimage.toBlob(titleWrapper, { style: { transform: `scale(${scale})`, transformOrigin: 'top left' }, width: titleWrapper.offsetWidth * scale, height: titleWrapper.offsetHeight * scale }); const titleImg = await loadImage(titleBlob); //foreignObjectRendering开启则Echart无法显示，关闭则el-tag没有文字。 // const [titleCanvas, tableCanvas, chartCanvas] = await Promise.all([ // html2canvas(titleWrapper, { // useCORS: true, backgroundColor: '#fff', scale: scale, // foreignObjectRendering: true // }), // html2canvas(tableWrapper, { useCORS: true, backgroundColor: '#fff', scale: scale }), // html2canvas(chartWrapper, { useCORS: true, backgroundColor: '#fff', scale: scale }) // ]); let tableCanvas = null; let chartCanvas = null; if (isTableVisible.value) { tableCanvas = await html2canvas(tableWrapper, { useCORS: true, backgroundColor: '#fff', scale }); } else { tableCanvas = document.createElement('canvas'); tableCanvas.width = 0; tableCanvas.height = 0; } chartCanvas = await html2canvas(chartWrapper, { useCORS: true, backgroundColor: '#fff', scale }); // 计算总大小 const totalWidth = Math.max(titleImg.width, tableCanvas.width, chartCanvas.width) * 1.1; const totalHeight = titleImg.height + tableCanvas.height + chartCanvas.height; // 合并成一张新 canvas const finalCanvas = document.createElement('canvas'); finalCanvas.width = totalWidth; finalCanvas.height = totalHeight; const ctx = finalCanvas.getContext('2d'); // 绘制 ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, totalWidth, totalHeight); let y = 0; ctx.drawImage(titleImg, (totalWidth - titleImg.width) / 2, y); y += titleImg.height; if (tableCanvas.height > 0) { ctx.drawImage(tableCanvas, (totalWidth - tableCanvas.width) / 2, y); y += tableCanvas.height; } if (chartCanvas.height > 0) { ctx.drawImage(chartCanvas, (totalWidth - chartCanvas.width) / 2, y); } // 输出图片 finalCanvas.toBlob(blob => { const blobUrl = URL.createObjectURL(blob); ELEMENT_PLUS.ElMessageBox({ title: '截图预览', dangerouslyUseHTMLString: true, message: ` `, showCancelButton: true, confirmButtonText: '保存图片', cancelButtonText: '关闭', }).then(() => { const link = doc.createElement('a'); link.download = `${videoData.bvid}_danmaku_statistics.png`; link.href = blobUrl; link.click(); URL.revokeObjectURL(blobUrl); // 可选：释放内存 }).catch(() => { URL.revokeObjectURL(blobUrl); }); }); } catch (err) { console.error(err); ELEMENT_PLUS.ElMessage.error('截图生成失败'); } finally { titleWrapper.style.paddingBottom = ''; tableWrapper.style.paddingBottom = ''; loading.value = false; } } function queryMidFromHash(midHash) { ELEMENT_PLUS.ElMessageBox.confirm( `是否尝试反查用户ID？

可能需要一段时间，且10位数以上ID容易查错

`, '提示', { dangerouslyUseHTMLString: true, confirmButtonText: '是', cancelButtonText: '否', type: 'warning', } ).then(() => { // 开始反查用户ID var result = converter.hashToMid(midHash); if (result && result !== -1) { ELEMENT_PLUS.ElMessageBox.alert( `已查到用户ID： 点击访问用户空间

此ID通过弹幕哈希本地计算得出，非官方公开数据，请谨慎使用

`, '查找成功', { dangerouslyUseHTMLString: true, confirmButtonText: '确定', type: 'success', } ); } else { ELEMENT_PLUS.ElMessage.error('未能查到用户ID或用户不存在'); } }).catch((err) => { if ((err !== 'cancel')) console.error(err); // 用户点击了取消，只复制midHash navigator.clipboard.writeText(midHash).then(() => { ELEMENT_PLUS.ElMessage.success('midHash已复制到剪贴板'); }).catch(() => { ELEMENT_PLUS.ElMessage.error('复制失败'); }); }); } function handleRowClick(row) { let el = doc.getElementById('wrapper-chart'); if (!el) return; while (el && el !== doc.body) { //寻找可以滚动的父级元素 const overflowY = getComputedStyle(el).overflowY; const canScroll = overflowY === 'scroll' || overflowY === 'auto'; if (canScroll && el.scrollHeight > el.clientHeight) { el.scrollTo({ top: 0, behavior: 'smooth' }); break; } el = el.parentElement; } charts.user.locateInChart(row.midHash); } async function renderChart(chart) { const el = doc.getElementById('chart-' + chart); if (!el) return; if (!charts[chart].instance) { el.style.height = charts[chart].expandedH ? '100%' : '50%'; charts[chart].instance = ECHARTS.init(el); charts[chart].instance.off('click'); if (typeof charts[chart].onClick === 'function') { charts[chart].instance.on('click', (params) => { charts[chart].onClick({ params, data: danmakuList.current, applySubFilter: (subFilt) => { const list = typeof subFilt.filterFn === 'function' ? subFilt.filterFn(danmakuList.current) : danmakuList.current; return updateDispDanmakus(false, list, { chart, ...subFilt }); }, ELEMENT_PLUS }); }); } } try { await charts[chart].render(danmakuList.current); } catch (err) { console.error(`图表${chart}渲染错误`, err); ELEMENT_PLUS.ElMessage.error(`图表${chart}渲染错误`); } await nextTick(); } function disposeChart(chart) { if (charts[chart].instance && charts[chart].instance.dispose) { charts[chart].instance.dispose(); charts[chart].instance = null; } } async function updateDispDanmakus(ifchart = false, data = danmakuList.current, subFilt = {}) { loading.value = true; await nextTick(); await new Promise(resolve => setTimeout(resolve, 10)); //等待v-loading渲染 try { displayedDanmakus.value = data; currentSubFilt.value = subFilt; danmakuCount.value.filtered = danmakuList.current.length; if (ifchart) { for (const chart of chartsVisible.value) { await renderChart(chart); } } await nextTick(); } catch (err) { console.error(err); ELEMENT_PLUS.ElMessage.error('数据显示错误'); } finally { loading.value = false; } } async function applyActiveSubFilters() { try { let filtered = danmakuList.filtered; const activeFilters = subFiltHistory.value.filter(f => f.enabled && typeof f.filterFn === 'function'); for (const filt of activeFilters) { filtered = filt.filterFn(filtered); } danmakuList.current = filtered; await updateDispDanmakus(true); } catch (e) { console.error(e); ELEMENT_PLUS.ElMessage.error('子筛选应用失败'); } } async function commitSubFilter() { try { if (Object.keys(currentSubFilt.value).length) { subFiltHistory.value.push({ ...currentSubFilt.value, enabled: true }); } danmakuList.current = [...displayedDanmakus.value]; await updateDispDanmakus(true); } catch (e) { console.error(e); ELEMENT_PLUS.ElMessage.error('提交子筛选失败'); } } async function clearSubFilter() { if (currentSubFilt.value.chart) { const chart = currentSubFilt.value.chart; if (typeof charts[chart]?.clearSubFilt === 'function') { charts[chart].clearSubFilt(); } } await updateDispDanmakus(); } async function applyFilter() { try { subFiltHistory.value = []; const regex = new RegExp(filterText.value, 'i'); danmakuList.filtered = danmakuList.original.filter(d => regex.test(d.content)); danmakuList.current = [...danmakuList.filtered]; currentFilt.value = regex; await updateDispDanmakus(true); } catch (e) { console.warn(e); alert('无效正则表达式'); } } async function resetFilter() { subFiltHistory.value = []; danmakuList.filtered = [...danmakuList.original]; danmakuList.current = [...danmakuList.filtered]; currentFilt.value = ''; await updateDispDanmakus(true); } onMounted(async () => { if ((!dataParam?.videoData && !dataParam?.episodeData) || !Array.isArray(dataParam?.danmakuData)) { ELEMENT_PLUS.ElMessageBox.alert( '初始化数据缺失，无法加载弹幕统计面板。请确认主页面传入了有效数据。', '错误', { type: 'error' } ); dataParam.danmakuData = []; } if (dataParam.epid && dataParam.episodeData) { let ep = null; let sectionTitle = null; if (Array.isArray(dataParam.episodeData.episodes)) { ep = dataParam.episodeData.episodes.find(e => e.ep_id === dataParam.epid || e.id === dataParam.epid); if (ep) { sectionTitle = ep.show_title; } } if (!ep && Array.isArray(dataParam.episodeData.section)) { for (const section of dataParam.episodeData.section) { ep = section.episodes?.find(e => e.ep_id === dataParam.epid || e.id === dataParam.epid); if (ep) { sectionTitle = section.title + '：' + ep.show_title; break; } } } if (ep) { Object.assign(videoData, { bvid: ep.bvid, cid: ep.cid, epid: ep.ep_id || ep.id, section_title: sectionTitle, title: ep.share_copy || ep.show_title || ep.long_title || ep.title, duration: ep.duration / 1000, pic: ep.cover, owner: { mid: dataParam.episodeData.up_info?.mid, name: dataParam.episodeData.up_info?.uname, face: dataParam.episodeData.up_info?.avatar }, pubdate: ep.pub_time, stat: { view: ep.stat?.play || dataParam.episodeData.stat.views, danmaku: ep.stat?.danmakus || dataParam.episodeData.stat.danmakus, reply: ep.stat?.reply || dataParam.episodeData.stat.reply, coin: ep.stat?.coin || dataParam.episodeData.stat.coins, like: ep.stat?.likes || dataParam.episodeData.stat.likes, } }); } } if (videoData?.pic?.startsWith('http:')) { videoData.pic = videoData.pic.replace(/^http:/, 'https:'); } if (videoData?.owner?.face?.startsWith('http:')) { videoData.owner.face = videoData.owner.face.replace(/^http:/, 'https:'); } if (videoData.pages) { if (!isNaN(dataParam.p) && videoData.pages[dataParam.p - 1]) { videoData.page_cur = videoData.pages[dataParam.p - 1]; videoData.duration = videoData.page_cur.duration; } else if (videoData.pages[0]) { videoData.duration = videoData.pages[0].duration; } } danmakuList.original = [...dataParam.danmakuData].sort((a, b) => a.progress - b.progress); danmakuList.filtered = [...danmakuList.original]; danmakuList.current = [...danmakuList.filtered]; danmakuCount.value.origin = danmakuList.original.length; await updateDispDanmakus(true); function registerChartAction(chartName, chartDef) { if (!Array.isArray(chartDef.actions)) return; chartDef.actions.forEach(({ key, icon, title, method }) => { if (!key || !method) return; chartsActions[`${chartName}:${key}`] = { icon, title, apply: chart => chart === chartName, handler: async chart => { try { await charts[chart][method](); } catch (e) { console.error(`[chartsActions] ${chart}.${method} 执行失败`, e); } } }; }); } for (const [chartName, chartDef] of Object.entries(charts)) { registerChartAction(chartName, chartDef); } window.__DMSTAT_CUSTOM_CHARTS__ = window.__DMSTAT_CUSTOM_CHARTS__ || {}; window.addCustomChart = function (chartName, chartDef) { if (!chartName || typeof chartDef !== 'object') { console.warn('chartName 必须为字符串，chartDef 必须为对象'); return; } if (chartsVisible.value.includes(chartName)) { console.warn(`图表 "${chartName}" 已存在`); return; } chartDef.ctx = { chartsActions, displayedDanmakus, danmakuCount, danmakuList, videoData, registerChartAction, formatProgress, formatCtime, formatTime } registerChartAction(chartName, chartDef); window.__DMSTAT_CUSTOM_CHARTS__[chartName] = chartDef; charts[chartName] = { instance: null, ...chartDef }; chartsVisible.value.push(chartName); nextTick(() => { renderChart(chartName); }); console.log(`✅ 已添加图表 "${chartName}"（仅保存在本页会话中）`); }; for (const [chartName, chartDef] of Object.entries(window.__DMSTAT_CUSTOM_CHARTS__)) { window.addCustomChart(chartName, chartDef);// 恢复本页面已有的自定义图表 } }); return { h, displayedDanmakus, filterText, applyFilter, resetFilter, videoData, danmakuCount, currentFilt, currentSubFilt, subFiltHistory, loading, isTableVisible, isTableAutoH, scrollToTime, panelInfo, chartsActions, chartsVisible, chartHover, clearSubFilter, commitSubFilter, applyActiveSubFilters, formatProgress, formatCtime, formatTime, shareImage }; }, template: `

{{ videoData.title || '加载中...' }}

第 {{ videoData.page_cur.page }} P：{{ videoData.page_cur.part }} {{ videoData.section_title }}

UP主： {{ videoData.owner.name }}
发布时间： {{ videoData.pubdate ? formatTime(videoData.pubdate) : '-' }}
截止 {{ formatTime(Math.floor(Date.now()/1000)) }} 播放量: {{ videoData.stat.view || '-' }}
总弹幕数: {{ videoData.stat.danmaku || '-' }} ，载入实时弹幕 {{ danmakuCount.origin }} 条

结果：共有 {{ danmakuCount.filtered }} 条弹幕

弹幕列表
{{ isTableVisible ? '▲ 收起' : '▼ 展开' }}
筛选 取消筛选
` }); app.use(ELEMENT_PLUS); app.mount('#danmaku-app'); } // iframe里初始化用户面板应用 async function initUserIframeApp(iframe, userData) { const doc = iframe.contentDocument; const win = iframe.contentWindow; // 引入外部库 const addScript = (src) => new Promise(resolve => { const script = doc.createElement('script'); script.src = src; script.onload = resolve; doc.head.appendChild(script); }); const addCss = (href) => { const link = doc.createElement('link'); link.rel = 'stylesheet'; link.href = href; doc.head.appendChild(link); }; addCss('https://cdn.jsdelivr.net/npm/element-plus/dist/index.css'); await addScript('https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.js'); await addScript('https://cdn.jsdelivr.net/npm/element-plus/dist/index.full.min.js'); const appRoot = doc.createElement('div'); appRoot.id = 'user-space-app'; doc.body.style.margin = '0'; doc.body.appendChild(appRoot); const { createApp, ref, onMounted, computed } = win.Vue; const ELEMENT_PLUS = win.ElementPlus; const app = createApp({ setup() { const converter = new BiliMidHashConverter(); const card = ref(userData.card || {}); const stats = ref(userData || {}); const officialRoleMap = { 0: '无', 1: '个人认证 - 知名UP主', 2: '个人认证 - 大V达人', 3: '机构认证 - 企业', 4: '机构认证 - 组织', 5: '机构认证 - 媒体', 6: '机构认证 - 政府', 7: '个人认证 - 高能主播', 9: '个人认证 - 社会知名人士' }; const officialInfo = computed(() => { const o = card.value?.Official; if (!o || o.type === -1) return null; return { typeText: officialRoleMap[o.role] || '未知认证', title: o.title || '（无标题）', desc: o.desc || '' }; }); function copyToClipboard(text) { navigator.clipboard.writeText(text).then(() => { ELEMENT_PLUS.ElMessage.success('midHash 已复制到剪贴板'); }).catch(() => { ELEMENT_PLUS.ElMessage.error('复制失败'); }); } onMounted(async () => { card.value.midHash = converter.midToHash(card.value.mid || '') }); return { card, stats, officialInfo, copyToClipboard }; }, template: `

{{ card.name }} {{ card.sex }} LV{{ card.level_info.current_level }} 大会员

{{ card.sign || '这位用户很神秘，什么都没写。' }}

MID： {{ card.mid }} Hash: {{ card.midHash }}

认证： {{ officialInfo.typeText }} {{ officialInfo.title }} （{{ officialInfo.desc }}）

勋章： {{ card.nameplate.name }} {{ card.nameplate.level }} - {{ card.nameplate.condition }}

挂件： {{ card.pendant.name }}

` }); app.use(win.ElementPlus); app.mount('#user-space-app'); } // B站mid与hash转换 class BiliMidHashConverter { constructor() { this.crcTable = this._createCRCTable(); } _createCRCTable() { const table = new Array(256); const CRCPOLYNOMIAL = 0xEDB88320; var crcreg, i, j; for (i = 0; i < 256; ++i) { crcreg = i; for (j = 0; j < 8; ++j) { if ((crcreg & 1) != 0) { crcreg = CRCPOLYNOMIAL ^ (crcreg >>> 1); } else { crcreg >>>= 1; } } table[i] = crcreg; } return table; } /** * mid → hash（用于弹幕中 midHash 显示） */ midToHash(mid) { let crc = 0xFFFFFFFF; const input = mid.toString(); for (let i = 0; i < input.length; i++) { const byte = input.charCodeAt(i); crc = (crc >>> 8) ^ this.crcTable[(crc ^ byte) & 0xFF]; } return ((crc ^ 0xFFFFFFFF) >>> 0).toString(16); } /** * 尝试通过 midHash 反查 mid（暴力逆向） * 若失败返回 -1 * @param {string} hashStr 16进制字符串（如 '6c2b67a9'） * @param {number} maxTry 最大尝试次数（默认一亿） */ hashToMid(hashStr, maxTry = 100_000_000) { var index = new Array(4); var ht = parseInt('0x' + hashStr) ^ 0xffffffff, snum, i, lastindex, deepCheckData; for (i = 3; i >= 0; i--) { index[3 - i] = this._getCRCIndex(ht >>> (i * 8)); snum = this.crcTable[index[3 - i]]; ht ^= snum >>> ((3 - i) * 8); } for (i = 0; i < maxTry; i++) { lastindex = this._crc32LastIndex(i); if (lastindex == index[3]) { deepCheckData = this._deepCheck(i, index) if (deepCheckData[0]) break; } } if (i == 100000000) return -1; return i + '' + deepCheckData[1]; } _crc32(input) { if (typeof (input) != 'string') input = input.toString(); var crcstart = 0xFFFFFFFF, len = input.length, index; for (var i = 0; i < len; ++i) { index = (crcstart ^ input.charCodeAt(i)) & 0xff; crcstart = (crcstart >>> 8) ^ this.crcTable[index]; } return crcstart; } _crc32LastIndex(input) { if (typeof (input) != 'string') input = input.toString(); var crcstart = 0xFFFFFFFF, len = input.length, index; for (var i = 0; i < len; ++i) { index = (crcstart ^ input.charCodeAt(i)) & 0xff; crcstart = (crcstart >>> 8) ^ this.crcTable[index]; } return index; } _getCRCIndex(t) { //if(t>0) //t-=256; for (var i = 0; i < 256; i++) { if (this.crcTable[i] >>> 24 == t) return i; } return -1; } _deepCheck(i, index) { var tc = 0x00, str = '', hash = this._crc32(i); tc = hash & 0xff ^ index[2]; if (!(tc <= 57 && tc >= 48)) return [0]; str += tc - 48; hash = this.crcTable[index[2]] ^ (hash >>> 8); tc = hash & 0xff ^ index[1]; if (!(tc <= 57 && tc >= 48)) return [0]; str += tc - 48; hash = this.crcTable[index[1]] ^ (hash >>> 8); tc = hash & 0xff ^ index[0]; if (!(tc <= 57 && tc >= 48)) return [0]; str += tc - 48; hash = this.crcTable[index[0]] ^ (hash >>> 8); return [1, str]; } } // 获取数据 class BiliDanmakuUtils { constructor() { this.bvid = null; this.p = null; this.epid = null; this.type = null; this.cid = null; this.videoData = null; this.episodeData = null; this.danmakuData = null; this.danmakuXmlText = null; this.logStyle = { tag: 'Danmaku Statistic', style: 'background: #00a2d8; color: white; padding: 2px 6px; border-radius: 3px;', errorStyle: 'background: #ff4d4f; color: white; padding: 2px 6px; border-radius: 3px;' }; } logTag(...args) { console.log(`%c${this.logStyle.tag}`, this.logStyle.style, ...args); } logTagError(...args) { console.error(`%c${this.logStyle.tag}`, this.logStyle.errorStyle, ...args); } parseDanmakuXml(xmlText) { const parser = new DOMParser(); const xmlDoc = parser.parseFromString(xmlText, 'application/xml'); const dElements = xmlDoc.getElementsByTagName('d'); const danmakus = []; for (const d of dElements) { const pAttr = d.getAttribute('p'); if (!pAttr) continue; const parts = pAttr.split(','); if (parts.length < 8) continue; danmakus.push({ progress: parseFloat(parts[0]) * 1000, mode: parseInt(parts[1]), fontsize: parseInt(parts[2]), color: parseInt(parts[3]), ctime: parseInt(parts[4]), pool: parseInt(parts[5]), midHash: parts[6], dmid: parts[7], weight: parseInt(parts[8]), content: d.textContent.trim() }); } this.logTag(`解析弹幕xml文本完成，共 ${danmakus.length} 条弹幕`); return danmakus; } parseBiliUrl(url) { this.bvid = null; this.p = null; this.epid = null; const bvidMatch = url.match(/BV[a-zA-Z0-9]+/); if (bvidMatch) this.bvid = bvidMatch[0]; if (this.bvid) { const pMatch = url.match(/[?&]p=(\d+)/); if (pMatch) { const parsedP = parseInt(pMatch[1], 10); if (!isNaN(parsedP) && parsedP >= 1) { this.p = parsedP; } } if (this.p) { this.logTag(`解析 URL 得到 BVID=${this.bvid}, 分页p=${this.p}`); } else { this.logTag(`解析 URL 得到 BVID=${this.bvid}`); } } else { const epidMatch = url.match(/ep(\d+)/); if (epidMatch) { this.epid = parseInt(epidMatch[1]); } else { this.logTagError(`URL=${url} 解析未找到 ID 信息`); } } } _findCid() { if (this.bvid) { this.cid = this.videoData.pages[this.p - 1]?.cid || this.videoData.cid; return this.cid } if (this.epid) { if (Array.isArray(this.episodeData.episodes)) { const ep = this.episodeData.episodes.find(e => e.ep_id === this.epid || e.id === this.epid); if (ep) { this.cid = ep.cid; return this.cid } } if (Array.isArray(this.episodeData.section)) { for (const section of this.episodeData.section) { const ep = section.episodes?.find(e => e.ep_id === this.epid || e.id === this.epid); if (ep) { this.cid = ep.cid; return this.cid } } } } } async getVideoData() { if (!this.bvid) return null; try { const res = await fetch(`https://api.bilibili.com/x/web-interface/view?bvid=${this.bvid}`); const json = await res.json(); if (json && json.data) { this.videoData = json.data; this.logTag('获取视频信息成功'); return this.videoData; } else throw new Error(`视频信息接口请求失败，json：${json}`); } catch (e) { this.logTagError('请求视频信息失败:', e); return null; } } async getEpisodeData() { if (!this.epid) return null; try { const res = await fetch(`https://api.bilibili.com/pgc/view/web/season?ep_id=${this.epid}`); const json = await res.json(); if (json && json.result) { this.episodeData = json.result; this.logTag('获取剧集信息成功'); return this.episodeData; } else throw new Error(`剧集信息接口请求失败，json：${json}`); } catch (e) { this.logTagError('请求剧集信息失败:', e); return null; } } async getDanmakuData() { try { this._findCid(); if (!this.cid) throw new Error('ChatID 缺失'); const res = await fetch(`https://api.bilibili.com/x/v1/dm/list.so?oid=${this.cid}`); if (!res.ok) throw new Error(`弹幕接口请求失败，状态码：${res.status}`); this.danmakuXmlText = await res.text(); this.danmakuData = this.parseDanmakuXml(this.danmakuXmlText); this.logTag('获取弹幕数据成功'); return this.danmakuData; } catch (err) { this.logTagError('获取弹幕数据失败:', err); return null; } } async fetchAllData(url) { this.parseBiliUrl(url); await this.getVideoData(); await this.getEpisodeData(); await this.getDanmakuData(); return { videoData: this.videoData, danmakuData: this.danmakuData }; } async getUserCardData(mid) { try { const res = await fetch(`https://api.bilibili.com/x/web-interface/card?mid=${mid}&photo=true`); const json = await res.json(); if (json.code === 0) { this.logTag(`获取用户名片成功：${mid}`); return json.data; } else { throw new Error(json.message || '获取用户信息失败'); } } catch (e) { this.logTagError('请求用户信息失败:', e); return { card: { mid } }; } } } const dmUtils = new BiliDanmakuUtils(); // 插入按钮 function insertButton() { const btn = document.createElement('div'); btn.id = 'danmaku-stat-btn'; btn.innerHTML = ` 弹幕统计
`; Object.assign(btn.style, { position: 'fixed', left: '-100px', bottom: '40px', zIndex: '9997', width: '120px', height: '40px', backgroundColor: 'transparent', color: '#00ace5', borderTopRightRadius: '20px', borderBottomRightRadius: '20px', cursor: 'pointer', fontSize: '16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', boxShadow: '0 0 5px rgba(0, 172, 229, 0.3)', transition: 'left 0.3s ease-in-out, background-color 0.2s ease-in-out', }); btn.onmouseenter = () => { btn.style.left = '-10px'; btn.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'; btn.style.border = '1px solid #00ace5'; }; btn.onmouseleave = () => { btn.style.left = '-100px'; btn.style.backgroundColor = 'transparent'; btn.style.border = 'none'; }; btn.onclick = openPanel; document.body.appendChild(btn); } // 打开iframe弹幕统计面板 function openPanel() { if (document.getElementById('danmaku-stat-iframe')) { console.warn('统计面板已打开'); return; } // 创建蒙层 const overlay = document.createElement('div'); overlay.id = 'danmaku-stat-overlay'; overlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9998; `; overlay.onclick = () => { document.getElementById('danmaku-stat-iframe')?.remove(); overlay.remove(); }; document.body.appendChild(overlay); // 创建iframe const iframe = document.createElement('iframe'); iframe.id = 'danmaku-stat-iframe'; iframe.style.cssText = ` position: fixed; top: 15%; left: 15%; width: 70%; height: 70%; background-color: #fff; z-index: 9999; padding: 20px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); `; const match = location.href.match(/^https:\/\/space\.bilibili\.com\/(\d+)/); const isUserPage = !!match; iframe.onload = async () => { try { if (isUserPage) { const mid = match[1]; const userData = await dmUtils.getUserCardData(mid); await initUserIframeApp(iframe, userData); } else { await dmUtils.fetchAllData(location.href); await initIframeApp(iframe, dmUtils, { type: 0, newPanel: function (type) { if (type == 0) { openPanelInNewTab(); dmUtils.logTag('[主页面] 新建子页面'); } } }); } } catch (err) { dmUtils.logTagError('初始化失败:', err); alert(`面板加载失败：${err.message}`); } }; document.body.appendChild(iframe); } // 打开新标签页弹幕统计面板 function openPanelInNewTab() { let bTitle = 'Bilibili'; if (dmUtils.bvid) bTitle = dmUtils.bvid; else if (dmUtils.epid) bTitle = 'ep' + dmUtils.epid; const htmlContent = ` ${bTitle} 弹幕统计 `; const blob = new Blob([htmlContent], { type: 'text/html' }); const blobUrl = URL.createObjectURL(blob); const newWin = window.open(blobUrl, '_blank'); if (!newWin) { alert('浏览器阻止了弹出窗口'); return; } } // 保存弹幕统计面板 function savePanel() { let bTitle = 'Bilibili'; if (dmUtils.bvid) bTitle = dmUtils.bvid; else if (dmUtils.epid) bTitle = 'ep' + dmUtils.epid; const htmlContent = ` ${bTitle} 弹幕统计 `; const blob = new Blob([htmlContent], { type: 'text/html' }); const blobUrl = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = blobUrl; link.download = `${bTitle}_danmaku_statistics.html`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(blobUrl); } // 监听新标签页消息 window.addEventListener('message', (event) => { if (event.data?.type === 'DMSTATS_REQUEST_DATA') { dmUtils.logTag('[主页面] 收到数据请求'); event.source.postMessage(dmUtils, '*'); } else if (event.data?.type === 'DMSTATS_REQUEST_SAFE') { dmUtils.logTag('[主页面] 收到保存请求'); savePanel(); } }); insertButton(); })();