如何用一款 1.99 美元的 Safari 插件屏蔽 YouTube 首页的 AI 标记视频

在浏览 YouTube 首页信息流时，我注意到平台虽然为 AI 生成内容贴上了 "Made with AI" 标签，却缺乏原生的过滤选项。在研究了 Weedout 插件的实现思路后，我梳理了一套基于官方标签的本地屏蔽方案，目的就是通过前端拦截直接移除低质量内容。

技术实现路线是什么？

该方案的核心逻辑并非通过机器学习辨识视频特征，而是直接抓取 YouTube 官方在 DOM 树中注入的特定标签。只要页面元素出现该标签，便立即通过 CSS 或 JS 将对应的视频节点设置为 <code>display: none</code>。

这套方案的优势在于：

• 准确率高：依赖平台层面的判定，避免了误判。
• 低延迟：在本地运行，拦截速度在毫秒级，无需请求后端 API。
• 隐私性：数据不上传第三方服务器。

具体开发实操如何进行？

如何应对SPA动态加载？

如果我想实现类似的功能，需要关注 YouTube 页面的动态加载机制。由于 YouTube 是单页应用（SPA），内容是通过 AJAX 异步加载的，简单的 <code>window.onload</code> 无法生效。

实操步骤：

1. 监听 DOM 变化：使用 <code>MutationObserver</code> 实时监听 <code>#contents</code> 或 <code>ytd-rich-grid-renderer</code> 等容器节点的变动。
2. 匹配标签元素：在观察到的新节点中，搜索包含 "Made with AI" 文本的特定类名元素。
3. 执行删除操作：找到目标标签后，向上溯源至最近的视频容器节点（如 <code>ytd-rich-item-renderer</code>），然后将其隐藏。

参考伪代码逻辑：

<pre><code>
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === 1 && node.innerText.includes('Made with AI')) {
const videoCard = node.closest('ytd-rich-item-renderer');
if (videoCard) videoCard.style.display = 'none';
}
});
});
});

observer.observe(document.body, { childList: true, subtree: true });
</code></pre>

在实际部署中遇到了哪些坑？

在尝试实现过程中，我记录了以下几个关键的技术细节和局限性：

类名失效时如何兜底？

• 选择器失效：YouTube 的 CSS 类名经常随机化或更新，依赖类名（Class Name）过滤容易导致插件失效，建议优先使用 <code>innerText</code> 或 <code>aria-label</code> 进行文本匹配。
• 性能损耗：<code>MutationObserver</code> 如果监听范围过大（如 <code>document.body</code>），在滚动页面时可能会产生性能抖动。建议缩小监听范围至具体的视频流容器。
• 拦截盲区：这是一个纯粹的“标签过滤器”。如果视频创作者通过手段绕过了官方检测，或者 YouTube 尚未对该视频打标，那么该逻辑无法拦截这些内容。

如何快速部署现有方案？

对于不想从零开发、需要快速验证效果的 macOS 用户，可以使用 Safari 插件 Weedout（版本 1.x）。

部署流程：

如何快速验证过滤效果？

1. 在 Safari App Store 搜索并安装 Weedout（定价 1.99 美元）。
2. 在 Safari 偏好设置中启用该扩展。
3. 刷新 YouTube 首页，验证 "Made with AI" 标签的视频是否被实时抹除。

如果需要进行二次开发，可以直接 Fork 其开源仓库 <code>weedout-for-youtube</code>，通过修改过滤关键词或增加自定义 CSS 规则来扩展过滤维度。