B站助手 (BilibiliHelper)

一个在VSCode/Cursor中浏览和观看B站视频的插件，让程序员在编码之余也能轻松享受B站视频内容。

功能特性

🎥 视频播放

• 在VSCode内置播放器中观看B站视频
• 支持播放/暂停、音量控制
• 显示视频时长和播放进度
• 自动播放设置
• 支持视频质量选择（自动/高清/中等/低清）

📱 B站风格界面

• 仿B站的视频播放界面
• 显示视频标题、作者、播放量、点赞数等统计信息
• 现代化的UI设计，支持深色主题
• 支持背景视频播放（可设置透明度）

🔍 视频管理

• 侧边栏视频列表，方便浏览
• 支持视频搜索功能
• 一键刷新视频列表
• 随机视频推荐

⚙️ 个性化设置

• 可配置自动播放
• 可调节默认音量
• 支持视频质量选择
• 背景视频透明度调节
• 背景视频开关控制

使用方法

快速开始

1. 安装插件后，在VSCode侧边栏会出现B站助手图标
2. 点击B站助手图标打开视频列表
3. 选择任意视频开始观看

主要功能

• 打开B站: 使用命令面板 Ctrl+Shift+P 输入 "打开B站" 或使用快捷键 Ctrl+Shift+6
• 刷新视频: 在视频列表页面点击刷新按钮
• 搜索视频: 使用命令面板搜索 "搜索视频" 或使用快捷键 Ctrl+Shift+6
• 随机视频: 在视频列表标题栏点击随机视频按钮
• 设置背景: 将当前视频设置为编辑器背景（支持透明度调节）
• 取消背景: 清除编辑器背景视频
• 播放控制: 在播放器中使用播放/暂停按钮和音量滑块

插件设置

在VSCode设置中可以配置以下选项：

• douyinhelper.autoPlay: 是否自动播放视频 (默认: true)
• douyinhelper.volume: 默认音量 (默认: 0.5)
• douyinhelper.videoQuality: 视频质量 (默认: auto)
  • 可选值: auto（自动）、high（高清）、medium（中等）、low（低清）
• douyinhelper.backgroundVideoOpacity: 背景视频透明度 (默认: 0.4，范围: 0-1)
• douyinhelper.backgroundVideoEnabled: 是否启用背景视频 (默认: false)

技术架构

核心组件

• BilibiliDataProvider: 视频数据提供者，管理视频列表和搜索
• BilibiliPlayer: 视频播放器，基于WebView实现
• BilibiliApiService: B站API服务，处理视频数据获取
• BackgroundVideoService: 背景视频服务，管理编辑器背景视频
• CommandHandler: 命令处理器，统一管理所有扩展命令

技术栈

• TypeScript
• VSCode Extension API
• WebView技术
• HTML5 Video API
• B站开放API

项目结构

src/
├── extension.ts                 # 主入口文件
├── types/
│   └── bilibili.ts             # B站相关类型定义
├── services/
│   ├── bilibiliApi.ts          # B站API服务
│   └── backgroundVideoService.ts # 背景视频服务
├── providers/
│   └── bilibiliDataProvider.ts  # 数据提供者
├── player/
│   └── bilibiliPlayer.ts       # 播放器模块
├── commands/
│   └── commandHandler.ts       # 命令处理器
└── utils/
    └── formatters.ts          # 工具函数

开发计划

已完成功能 ✅

• [x] 基础视频播放器
• [x] 视频列表展示
• [x] 播放控制功能
• [x] 视频搜索功能
• [x] 随机视频推荐
• [x] 背景视频功能
• [x] 插件配置设置
• [x] B站API集成

计划功能 🚧

• [ ] 视频收藏功能
• [ ] 播放历史记录
• [ ] 全屏播放模式
• [ ] 更多键盘快捷键支持
• [ ] 视频评论查看
• [ ] 相关视频推荐

安装说明

从源码安装

1. 克隆项目到本地
2. 安装依赖: pnpm install
3. 编译项目: pnpm run compile
4. 在VSCode中按F5启动调试模式

从市场安装

1. 在VSCode扩展市场搜索 "B站助手"
2. 点击安装即可

开发命令

# 编译项目
pnpm run compile

# 监听模式编译
pnpm run watch

# 打包发布
pnpm run package

# 运行测试
pnpm run test

# 代码检查
pnpm run lint

贡献指南

欢迎提交Issue和Pull Request来改进这个插件！

许可证

MIT License