YouTube 是单页应用（SPA），URL 变化不触发页面重载，导致 Manifest V3 的 content_scripts 仅在首次加载时注入 CSS；需改用 document_start + 通用 CSS 文件 + :has() 伪类实现路由级样式精准控制。
youtube 是单页应用（spa），url 变化不触发页面重载，导致 manifest v3 的 content_scripts 仅在首次加载时注入 css；需改用 `document_start` + 通用 css 文件 + `:has()` 伪类实现路由级样式精准控制。
YouTube 的前端采用高度动态的 SPA 架构：点击搜索、跳转频道、播放视频等操作均通过 history.pushState() 更新 URL 并局部重绘 DOM，浏览器不会触发新页面加载事件。因此，Chrome 扩展中基于 matches 规则声明的 content script（如 "*://www.youtube.com/@*"）仅在物理页面首次导航时注入一次，后续所有“页面切换”均无法触发新注入——这就是 channel.css 在进入 @xxx 页面后失效的根本原因。
✅ 正确解决方案：单入口 + 动态上下文选择
不再为每个路径配置独立 content script，而是统一匹配全部 YouTube 域名，并在 document_start 阶段注入一个主 CSS 文件（如 youtube.css），利用现代 CSS 选择器（尤其是 :has()）根据当前 DOM 结构动态启用对应样式：
1. 更新 manifest.json：
{
"manifest_version": 3,
"name": "Locked In for YouTube - Productivity & Focus",
"version": "1.0",
"description": "Stay 'locked in' by removing distracting elements such as recommended, Shorts, trending tab, etc.",
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["*://www.youtube.com/*"],
"run_at": "document_start",
"css": ["youtube.css"]
}
]
}
⚠️ 关键点：
-
run_at: "document_start"确保 CSS 在 HTML 解析初期即生效，避免闪屏（FOUC）； - 移除所有按路径拆分的
content_scripts条目，避免注入时机失控。
2. 编写 youtube.css 实现路由感知样式：
利用 YouTube DOM 中具有强语义的顶层组件（如 ytd-watch-flexy、ytd-channel-renderer、ytd-search-container）作为上下文锚点：
/* 全局重置：隐藏所有干扰区域（默认生效） */
ytd-rich-grid-renderer,
ytd-rich-section-renderer,
ytd-shelf-renderer[is-empty],
ytd-compact-radio-renderer,
ytd-mini-guide-entry-renderer {
display: none !important;
}
/* 主页（feed）：隐藏推荐栏与 Shorts 入口 */
body:has(ytd-feed) ytd-rich-section-renderer,
body:has(ytd-feed) ytd-shorts-tab-bar-renderer {
display: none !important;
}
/* 搜索结果页 */
body:has(ytd-search-container) ytd-video-renderer[is-list-item] + ytd-item-section-renderer {
display: none !important;
}
/* 视频详情页（watch） */
body:has(ytd-watch-flexy:not([hidden])) ytd-watch-next-button-renderer,
body:has(ytd-watch-flexy:not([hidden])) ytd-compact-video-renderer {
display: none !important;
}
/* 频道主页（@xxx） */
body:has(ytd-channel-renderer) ytd-rich-grid-renderer,
body:has(ytd-channel-renderer) ytd-shelf-renderer[title="Videos"] ~ ytd-shelf-renderer {
display: none !important;
}
? 提示：
body:has(...)是现代 Chromium 支持的容器查询式选择器，它能实时响应 DOM 结构变化——即使 YouTube 动态插入/移除节点，样式也会自动生效，完美适配 SPA 导航。
? 验证与调试建议
- 使用 Chrome DevTools 的 Elements 面板，观察
下是否出现目标组件（如<ytd-watch-flexy></ytd-watch-flexy>），确认上下文存在； - 在
youtube.css开头添加临时高亮规则（如body:has(ytd-watch-flexy) { outline: 2px solid red; }）快速验证路由识别是否准确； - 确保所有 CSS 文件位于扩展根目录（与
manifest.json同级），无需额外路径前缀。
通过此方案，你的扩展将真正实现“一次注入、全程生效”，彻底摆脱手动刷新的困扰，同时保持代码简洁性与可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
