我花了7天时间，做了个小红书直播间智能助手，效果震撼！

一款基于Chrome浏览器扩展的小红书直播间管理工具，通过WebSocket消息拦截技术实现直播间自动化运营。支持智能踢人、观众来源数据统计、自动欢迎语、商品自动讲解等功能。日均自动处理2000+观众，踢出率35%，运营效率提升300%！适合直播带货主播、运营人员使用。

🔥 为什么要做这个项目？

做直播的朋友都懂，直播间运营真的太累了！

某天我朋友跟我吐槽：

“又来一堆营销号，刷屏卖货的，烦死了！”
“根本不知道观众从哪来的，没数据怎么优化？”
“每天发欢迎语发到手酸，还得盯着踢人…”
“商品讲解一个一个弹，眼睛都要看花了！”

听完我就想：这不就是程序员的强项吗？能用代码解决的问题，为什么要手动操作？

于是，我决定做一个智能直播间助手，彻底解放双手！

✨ 最终实现了哪些功能？

先上效果图（数据真实，已脱敏）：

🛡️ 智能踢人系统

一键设置规则，全自动识别踢出！

✅ 黑白名单管理（VIP用户永不踢）
✅ 58种观众来源智能过滤（谁知道小红书有这么多入口）
✅ 关键词检测（“加V”、"代理"秒踢）
✅ 智能身份分析（僵尸号、营销号一眼识破）
✅ 频繁进出检测（专治恶意刷屏）

效果： 日均2000+观众，自动踢出700+，准确率99.9%！

📊 数据统计分析

平台不给数据？我自己统计！

✅ 观众来源实时统计（哪个渠道效果好，一目了然）
✅ 完整的观众行为追踪
✅ CSV/JSON一键导出，想怎么分析怎么分析

效果： 发现30%观众来自搜索，直接优化SEO，引流效果翻倍！

🤖 自动化交互

再也不用盯着屏幕手动操作了！

✅ 智能欢迎语（"欢迎@张三，感谢关注"全自动）
✅ 商品自动讲解（想讲几个讲几个，想讲多久讲多久）
✅ 防刷屏话术循环（保持活跃度，不封号）

效果： 运营效率提升300%，主播可以专心讲解内容了！

🤔 最大的技术难点是什么？

问题：如何获取直播间的实时数据？

直播间的所有数据（观众进入、聊天消息等）都是通过 WebSocket 实时推送的，但是：

❌ Chrome扩展API拦截不了WebSocket数据
❌ 普通的网络请求拦截也不行
❌ 直接读DOM也获取不到完整数据

怎么办？🤔

解决方案：Hook住WebSocket！

核心思路超级简单：在页面加载前，偷偷替换掉浏览器原生的WebSocket对象！

想象一下：

原本：页面 → 原生WebSocket → 服务器

现在：页面 → 我的WebSocket拦截层 → 原生WebSocket → 服务器
              ↓
            拿到所有数据！

这样，页面以为自己在正常通信，实际上所有消息都被我"偷听"了😎

踩过的坑

时机很重要！ 必须在页面脚本执行前注入，晚了就没用
编码问题！ 中文会乱码，要用UTF-8正确解码
消息重复！ 同一个人会收到两次通知，需要去重
API限流！ 踢人太快会被封，要用队列控制频率

这些坑踩了好几天才搞定😅

� 核心功能原理（简单说明）

1. 智能踢人系统

五层检查机制，像漏斗一样层层过滤：

观众进入
  ↓
白名单？→ 是 → 放行
  ↓ 否
黑名单？→ 是 → 踢出
  ↓ 否
来源类型？→ 禁用 → 踢出
  ↓ 否
昵称关键词？→ 匹配 → 踢出
  ↓ 否
频繁进出？→ 是 → 踢出
  ↓ 否
身份分析？→ 异常 → 踢出
  ↓ 否
放行

重点： 用了队列机制，每3秒踢一个，防止API被封！

2. 数据统计系统

所有观众数据都保存在本地数据库（IndexedDB），包括：

用户ID、昵称、头像
来源类型（58种！）
进入时间、关注状态等

支持导出CSV/JSON，想怎么分析怎么分析！

3. 自动讲解功能

可以设置：

讲解间隔（多久弹一次）
持续时间（弹多久）
轮播模式（单个商品 or 多个商品轮播）
轮播顺序（顺序 or 随机）

完全自动化，设置好就不用管了！

🏗️ 架构设计

模块化重构

最初的版本是单文件6556行，维护困难。重构后采用模块化架构：

src/
├── background/              # 后台服务
│   ├── index.js            # 主入口
│   ├── message-handler.js  # 消息处理
│   ├── crypto/             # 加密模块
│   └── api/                # API接口
│
├── content/                # 内容脚本
│   ├── index.js            # 主入口
│   ├── core/               # 核心功能
│   │   ├── storage.js      # 存储管理
│   │   ├── queue.js        # 队列管理
│   │   ├── stats.js        # 统计系统
│   │   └── toast.js        # 提示系统
│   │
│   ├── features/           # 业务功能
│   │   ├── kick/           # 踢人功能
│   │   ├── welcome/        # 欢迎语
│   │   ├── spam/           # 刷屏功能
│   │   ├── auto-explain/   # 自动讲解
│   │   └── activation/     # 激活管理
│   │
│   ├── ui/                 # UI组件 (Vue 3)
│   │   ├── App.vue
│   │   ├── SettingsTab.vue
│   │   ├── KickLogsTab.vue
│   │   └── StatsTab.vue
│   │
│   └── utils/              # 工具函数
│
└── hooks/                  # 注入脚本
    ├── ws-hook.js          # WebSocket钩子
    └── stats-hook.js       # 统计钩子

三层存储架构

┌────────────────────────┐
│   内存缓存 (Map/Set)    │ ← 最快，临时数据
│   - 去重缓存            │
│   - 激活状态            │
└───────────┬────────────┘
            │
┌───────────▼────────────┐
│  Chrome Storage API    │ ← 中等，配置数据
│  - 用户设置            │
│  - 黑白名单            │
└───────────┬────────────┘
            │
┌───────────▼────────────┐
│   IndexedDB            │ ← 最大，结构化数据
│  - 观众记录            │
│  - 踢人日志            │
│  - 统计数据            │
└────────────────────────┘