抖音直播弹幕检测谷歌浏览器插件

weixin_zj01020925

于 2024-12-06 14:44:49 发布

阅读量1.2k

点赞数 15

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_47529004/article/details/144291539

版权

功能简介

这是一个 Chrome 浏览器插件，用于检测和显示抖音直播间的弹幕消息。它会在页面上创建一个可拖动的半透明悬浮窗，实时显示直播间的弹幕内容。

主要特点

实时监控: 每秒检测新的弹幕消息

可拖动悬浮窗: 用户可以自由调整位置

半透明界面: 不会完全遮挡直播画面

防重复机制: 避免同一条弹幕重复显示

简洁界面: 显示时间、用户名和弹幕内容

使用方法

在抖音直播页面点击插件图标

点击"开始监听"开始检测弹幕

可以拖动窗口到合适位置

点击"停止监听"停止检测

5. 点击"清空记录"清除历史记录

点击右上角 × 关闭悬浮窗

技术实现

使用 Chrome Extension API

通过 DOM 操作获取弹幕内容

使用 JavaScript 实现拖拽功能

采用数组存储机制防止重复

这个插件提供了一个简单直观的方式来监控和查看直播弹幕，适合需要关注直播互动的用户使用。

1. 插件结构

douyin-danmu-detector/

├── manifest.json // 插件配置文件

├── background.js // 后台脚本

├── content.js // 内容脚本

└── popup.js // 弹出窗口脚本

2. 核心功能实现

2.1 manifest.json 配置

{
  "manifest_version": 3,
  "permissions": [
    "activeTab",      // 访问当前标签页
    "storage",        // 存储数据
    "tabs",          // 操作标签页
    "scripting"      // 注入脚本
  ],
  "host_permissions": [
    "*://*.douyin.com/*"  // 允许在抖音网站上运行
  ]
}

2.2 弹幕检测实现 (content.js)

1. 创建悬浮窗

function createFloatWindow() {
    // 创建一个可拖动的半透明悬浮窗
    // 包含：标题栏、控制按钮、弹幕显示区域
}

2.弹幕监听机制

function startDanmu() {
    // 每秒检查一次新弹幕
    setInterval(() => {
        // 查找弹幕元素
        const danmuItems = document.querySelectorAll('.webcast-chatroom___item');
        
        // 遍历处理每条弹幕
        danmuItems.forEach(item => {
            // 提取用户名和内容
            const spans = messageDiv.querySelectorAll(':scope > span');
            nickname = spans[1].textContent;  // 第二个span是用户名
            content = spans[2].textContent;   // 第三个span是内容
        });
    }, 1000);
}

3.防重复机制

// 使用数组存储已处理的弹幕ID
const processedDanmuArray = [];
const MAX_PROCESSED_DANMU = 50;  // 最多存储50条

// 添加新弹幕ID时
processedDanmuArray.unshift(danmuId);  // 添加到开头
if (processedDanmuArray.length > MAX_PROCESSED_DANMU) {
    processedDanmuArray.pop();  // 删除最旧的
}

2.3 界面交互

拖动功能

// 实现标题栏拖动
titleBar.addEventListener('mousedown', dragStart);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', dragEnd);

弹幕显示

function addDanmuToList(nickname, content) {
    // 创建弹幕显示元素
    div.innerHTML = `
        <span>${new Date().toLocaleTimeString()}</span>
        <span>${nickname}</span>
        <span>${content}</span>
    `;
    // 新消息添加到顶部
    danmuList.insertBefore(div, danmuList.firstChild);
}

3. 特色功能

半透明悬浮窗

background: rgba(255, 255, 255, 0.8);  // 80%透明度

消息类型区分

普通消息：灰色

礼物消息：红色

进入消息：绿色

关注消息：蓝色

自动清理机制

最多显示100条弹幕

最多记录50个已处理ID

4. 使用方法

安装插件后，点击插件图标

在抖音直播页面会出现悬浮窗

点击"开始监听"开始检测弹幕

可以拖动标题栏移动位置

点击"清空记录"清除历史记录

点击"停止监听"停止检测

点击右上角 × 关闭悬浮窗

5. 注意事项

1. 弹幕选择器依赖于抖音网页结构

需要定期检查选择器是否需要更新

内存管理：

限制存储的历史弹幕数量

定期清理过期数据

性能优化：

使用 requestAnimationFrame 代替 setInterval

减少 DOM 操作频率