software

我开发了一个开源 Chrome 扩展，以摆脱对 YouTube Shorts 的沉迷 (Manifest V3)

发布: (2025年12月18日 GMT+8 20:09)
3 min read
原文: Dev.to

Source: Dev.to

问题

我是一名高中生，计划主修计算机科学。几个月前，我注意到一种模式在破坏我的学习时间：

  1. 打开 YouTube 看一个 10 分钟的物理教程。
  2. 在首页看到一个 “Shorts” 栏目。
  3. 点进去…
  4. 醒来时已经过去 2 小时，什么工作也没完成。

现有的拦截工具要么太激进（直接屏蔽整个 YouTube，而我需要它来观看教程），要么是付费/闭源的（我不信任它们会收集我的浏览数据）。我需要一个 精准 的拦截器，只移除 Shorts 元素。

解决方案：FocusTube

我构建了 FocusTube，一个 Chrome 扩展（Manifest V3），可以在不破坏 YouTube 其他功能的情况下，去除类似老虎机的 Shorts 栏目。

在 GitHub 上查看源代码

工作原理

YouTube 是一个单页面应用（SPA）。点击视频会改变 URL 并通过 JavaScript 替换内容，而不是重新加载页面，所以单纯的 CSS 规则不足以阻止新元素的出现——它们会不断重新生成。

MutationObserver

扩展使用 MutationObserver 来监视 DOM 的变化。每当 YouTube 注入新的 “Shorts Shelf” 或侧边栏按钮时，脚本会检测到并立即隐藏它。

const observer = new MutationObserver(() => {
    if (isFocusModeOn) manualScan();
});
observer.observe(document.body, { childList: true, subtree: true });

导航事件

由于 URL 在不完整刷新的情况下会改变，扩展还监听 YouTube 的导航事件 (yt-navigate-finish)，以便在用户每次点击链接时重新执行检查。

模式

严格模式

如果直接打开了 /shorts/ 链接，扩展会检测到 URL 模式并立即使用 window.location.replace 重定向回首页。

软模式

当需要更温和的提醒时，扩展会注入一个全屏 HTML 覆盖层，暂停视频并询问：“你真的需要观看这个吗？”

隐私优先

扩展 100 % 在客户端运行。偏好设置（暗色模式、严格模式状态等）存储在 chrome.storage.local 中；任何数据都不会离开浏览器。

发布与安装

  • v1.2 已发布，并已提交至 Microsoft Edge 和 Firefox 附加组件商店（待审查）。
  • 由于是开源项目，你可以今天通过开发者模式在 Chrome、Edge 或 Brave 上安装。

GitHub 仓库（点击下载）: https://github.com/malekwael229/FocusTube
问题 / 反馈: 如发现 bug，欢迎打开 issue！

Back to Blog

相关文章

阅读更多 »