爱意满满的作品展示区。
Tune

[Chrome 插件] VidBoost: YouTube / B 站 视频增强插件

  •  
  •   Tune · Mar 12 · 975 views
    This topic created in 70 days ago, the information mentioned may be changed or developed.

    我一直都使用很多油猴脚本来增强我们在浏览器中看视频的体验。但是我用 篡改猴总是会遇到插件崩溃的情况,这时候需要完全退掉浏览器,然后重新打开才能恢复(说是 Manifest V3 的权限收紧导致的问题),使用体验非常割裂,还有但装多了插件以后就太乱了,设置入口分散。想到现在 AI 这么厉害,就 vibe coding 了这个插件,名字叫 VidBoost。已经把我常用的功能都放在这里面了,目前灵感枯竭,之后想到更有实用的功能在陆续添加,也欢迎大家提一些功能建议。

    项目地址:


    VidBoost 主界面(浅色)

    General

    这一块主要放的是不只针对某一个站点的功能。

    1. H5 Enhancer

    这一个功能的灵感是来源于这里: https://github.com/xxxily/h5player ,因为原版的很多功能我用不到,就自己弄了一下精简版的 https://github.com/tunecc/h5player 。也是把我自己精简版的这一个集成到我们的插件里面。

    在大多数 HTML5 视频网站里,可以直接用快捷键控制播放,不只是数字键切倍速,常用的操作基本都放进去了:

    • 1-6 直接切换倍速
    • C / X / Z 加速、减速、重置
    • Enter 全屏
    • ← / → 快退、快进

    我平时主要拿它看 YouTube 、Bilibili 、网课平台,在视频不是重要部分的时候。就按键盘的数字键,直接切换为对应的倍数来快速过视频,就是这一点导致我的 iPad 长时间吃灰,都是用电脑看视频。像爱奇艺、优酷、腾讯视频这类 HTML5 站点也能吃到这一套通用增强。

    H5 倍速设置

    2. 自动暂停

    这一个灵感来自于 Enhancer for YouTube ™自动暂停在后台标签中打开的视频 功能,因为只适配 YouTube ,所以我弄了一个油猴脚本,把它适配了哔哩哔哩和 YouTube ,https://github.com/tunecc/video-auto-pause ,目前的这一个适配的网页会更多,但是我没有测试很多网站。

    具体功能为:切到别的标签页,或者浏览器窗口失焦时,正在播放的视频可以自动暂停;切回来之后再恢复播放。

    ,目前支持:

    • 全站生效
    • 只对选中的站点生效
    • 自己再额外填自定义站点
    • 如果你想后台听歌,也可以允许后台继续播放

    默认我自己比较常用的是 YouTube 和 Bilibili ,后面也可以自己再补别的网站。

    Auto Pause 设置

    3. 禁用双击全屏

    这个功能是我在安静的环境看网页的时候,需要快速暂停的时候。如果经常按空格,声音会有一点大,用触控板快速点击来暂停的时候又会全屏,就把双击全屏给禁用掉了,达到鼠标左键点击视频区域可以快速暂停播放。

    它主要做两件事:

    • 禁用视频区域双击全屏
    • 把暂停 / 播放响应尽量前置,让高频点击更稳一点

    所以像 YouTube 、B 站那种频繁点暂停的场景,用起来会顺手很多。

    Fast Pause 设置

    YouTube

    这一块放的是只对 YouTube 生效的功能。

    1. 禁用原生数字键跳进度

    这个是和上面的 H5 Enhancer 配套的。

    因为 YouTube 原生的 0-9 数字键本来就是跳进度的,但是在结合我们上面那个快速切换倍数的脚本使用的时候,有时候会按错数字键,导致跳转到了对应的进度。所以就得把这套原生行为拦掉,不然按个 7 就直接跳到 70% 进度去了。

    2. 会员视频过滤

    YouTube 首页和订阅流里,经常会混进一些会员专属视频,但是自己又不是会员也不想开会员。所以单独做了一块过滤。

    现在支持三种模式:

    • 全部屏蔽
    • 黑名单模式:只屏蔽你指定的频道
    • 白名单模式:默认拦掉,只保留你允许的频道

    YouTube 专属增强

    YouTube 会员过滤

    Bilibili

    这一块放的是只对 B 站生效的功能。

    1. 禁止空格键滚动页面

    这个是我自己在 B 站看视频时挺烦的一个点。

    有时候想用空格控制播放,结果页面先跟着乱滚了,所以这里单独加了一个拦截,只处理 B 站这个场景。

    2. CDN 切换

    这一个灵感来自于 PiliPlus 项目: https://github.com/bggRGjQaUbCoE/PiliPlus ,因为哔哩哔哩的 CDN 都特别垃圾,和 YouTube 相比差的太多了。我们应该去固定使用大厂的,不用使用 PCDN 域名。

    现在可以:

    • 手动切换 Bilibili CDN 节点
    • 对可用节点做真实测速
    • 再手动选到更快的线路
    • 支持番剧模式

    Bilibili 专属增强

    Bilibili CDN 功能

    Bilibili CDN 设置长图


    补充

    我自己比较在意插件常驻时的开销,所以实现上会尽量收着来:

    • 只在页面里真正检测到视频时才激活相关逻辑
    • 功能统一管理,尽量减少重复监听和脚本堆叠
    • 使用浏览器原生能力做跨标签页同步,少走一些没必要的额外开销

    权限目前主要就是:

    • storage
    • activeTab

    安装

    Chrome 商店安装

    直接安装:

    https://chromewebstore.google.com/detail/vidboost/bjehghokgbfmceggcbpjgmahgjgpgbia?authuser=0&hl=zh-CN

    源码安装

    git clone https://github.com/tunecc/VidBoost.git
    cd VidBoost
    npm install
    npm run build
    

    构建完成后,在 Chrome / Edge 的扩展管理页面加载 dist 目录即可。

    技术上就是 TypeScript + Svelte + Vite + Tailwind CSS ,底层是 Manifest V3 。


    End

    这个插件本质上就是把我自己平时一直在用的一套东西重新整理了一遍,现在还在慢慢补。

    如果你平时也有类似的视频使用场景,欢迎提建议,或者直接提 Issue / PR 。

    Issue 地址:

    https://github.com/tunecc/VidBoost/issues

    xxxxi
        1
    xxxxi  
       Mar 12 via Android
    用心了 👍
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5154 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 60ms · UTC 08:34 · PVG 16:34 · LAX 01:34 · JFK 04:34
    ♥ Do have faith in what you're doing.