【Code With SOLO】用 SOLO 迭代开发网易云音乐网页音量控制浏览器扩展

SOLO挑战赛专区
1

1. 摘要

用 TRAE SOLO 快速开发了一个 Chrome 浏览器扩展，支持键盘快捷键调节音量、拖拽悬浮窗、播放控制和歌曲信息展示。解决了在多标签页观看视频时无法快捷调节其他网页音量的问题，特别是实现了网易云音乐网页版的深度适配。

2. 背景

我是一名开发爱好者大学生 小白，平时喜欢边看 Bilibili 视频边听网易云音乐，但浏览器没有跨标签页的音量控制快捷键，每次调节音量都要切换标签页，非常影响体验。

3. 实践过程

任务拆解

  1. 搭建基础扩展框架（Manifest V3 + Content Script）

  2. 实现键盘快捷键注册和音量调节功能

  3. 开发可拖拽的悬浮窗 UI

  4. 迭代适配网易云音乐网页版（核心难点）

  5. 增加歌曲信息显示和播放控制

SOLO 使用的能力

  • 代码生成：快速生成扩展基础框架

  • 问题调试：反复迭代修复网易云音乐检测问题

  • 文件操作：自动修改代码并重新打包扩展

关键开发流程

  1. 第一次迭代：实现基础功能

    • 创建 [manifest.json](file:///workspace/extension/manifest.json)

    • 编写 [content.js](file:///workspace/extension/content/content.js) 和 [background.js](file:///workspace/extension/background/background.js)

    • 快捷键：Ctrl+Shift+L 召唤浮窗

  2. 网易云适配的多次迭代：

    • 问题：一直提示"播放器未找到"

    • 迭代1：添加 all_frames: true

    • 迭代2：增加 Shadow DOM 检测

    • 迭代3：添加 iframe 检测和 window 对象检测

    • 迭代4：增加延迟检测（0s/3s/6s）

踩过的坑

  1. 跨域 iframe 访问：网易云音乐可能把播放器放在 iframe 中，直接访问会被浏览器安全机制阻止

  2. Shadow DOM：现代网页经常用 Shadow DOM 封装播放器，普通 querySelector 找不到

  3. 动态加载：播放器不是页面加载时就初始化好的，需要延迟检测

4. 成果展示

功能特点

功能 说明
音量调节 滑块或按钮快速调节
快捷键 Alt+↑/↓ 增减音量，Alt+M 静音
拖拽浮窗 可移动到屏幕任意位置
播放控制 上一曲/播放暂停/下一曲/收藏
歌曲信息 显示当前播放歌曲的标题、歌手、封面

扩展文件结构

Plain Text

/workspace/extension/
├── manifest.json
├── content/content.js
├── background/background.js
├── popup/popup.html/js/css
└── styles/volume-indicator.css

下载地址：[volume-control-pro.zip](file:///workspace/extension/volume-control-pro.zip)

5. 效果与总结

原本需要手动切换标签页调节音量，现在按几个快捷键就能搞定，体验提升巨大。SOLO 在这个过程中帮助快速迭代和调试，每遇到问题都能快速给出新的检测方案，大大缩短了开发周期。

可复用的方法：

  1. 遇到复杂 DOM 检测问题，多管齐下（audio标签、Shadow DOM、iframe、window对象）

  2. 动态内容一定要加延迟检测

1 个赞
2

这怎么实现的，感觉挺复杂

1 个赞
3

看起来复杂其实核心逻辑很清晰！简单说就是：
核心原理:
1.监听快捷键 通过 Chrome 扩展的 commands API 注册全局快捷键，捕获用户按键事件
2.查找音频元素 在页面中搜索 <audio> 和 <video> 标签，包括 iframe 和 Shadow DOM 内部
3.调节音量 调用音频元素的 volume 属性直接设置音量值（0-1）
4.浮窗 UI 在页面上动态创建一个可拖拽的悬浮面板，显示音量和播放控制
网易云适配的关键点

  • 播放器可能在 iframe 里，需要跨 frame 查找
  • 动态加载的内容要加延迟检测
  • 通过注入 content script 绕过跨域限制