在Chrome扩展开发场景中，获取YouTube视频标题是很多工具类扩展的核心功能，比如视频信息采集、字幕辅助工具等都需要准确拿到当前播放视频的标题内容。YouTube的页面采用动态加载机制，标题节点的位置和属性会随页面版本迭代调整，因此需要通过稳定的DOM解析逻辑来实现精准获取。
YouTube视频标题的DOM结构分析
YouTube的视频标题通常位于页面特定的DOM节点中，我们可以通过浏览器的开发者工具查看结构。常规情况下，视频播放页的标题会放在ytd-video-primary-info-renderer组件下的h1标签内，同时标题内容也会作为meta标签的og:title属性值存在，这是两个比较稳定的获取来源。
两种常用的标题获取路径
- DOM节点解析：直接定位标题所在的
标签，提取其文本内容，这种方式获取的是页面直接展示的标题，适配性较好。
- Meta标签解析：读取
meta[property="og:title"]的content属性，这个属性是YouTube专门为社交分享设置的，内容固定且更新及时。
Chrome扩展内容脚本编写
Chrome扩展需要通过内容脚本（Content Script）来访问页面的DOM结构，我们首先需要在扩展的清单文件中配置内容脚本的匹配规则，确保脚本可以在YouTube的视频页面生效。
清单文件配置
在manifest.json中添加以下内容，指定内容脚本的匹配规则和运行时机：
{
"manifest_version": 3,
"name": "YouTube标题获取扩展",
"version": "1.0",
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["https://www.youtube.com/watch?*"],
"js": ["content.js"],
"run_at": "document_idle"
}
]
}
JavaScript获取标题的核心代码
在content.js中编写获取标题的逻辑，优先尝试从Meta标签获取，失败后再从DOM节点获取，同时处理动态加载的情况：
// 获取YouTube视频标题的函数
function getYouTubeVideoTitle() {
// 优先从og:title meta标签获取
const ogTitleMeta = document.querySelector('meta[property="og:title"]');
if (ogTitleMeta && ogTitleMeta.content) {
return ogTitleMeta.content;
}
// 备选方案：从h1标题节点获取
const titleH1 = document.querySelector('ytd-video-primary-info-renderer h1.ytd-video-primary-info-renderer');
if (titleH1) {
return titleH1.textContent.trim();
}
// 兼容旧版本页面结构
const oldTitleNode = document.querySelector('.watch-active-metadata h1');
if (oldTitleNode) {
return oldTitleNode.textContent.trim();
}
return null;
}
// 初始获取标题
let videoTitle = getYouTubeVideoTitle();
console.log('初始获取到的标题：', videoTitle);
// 监听页面DOM变化，处理动态加载场景
const observer = new MutationObserver(() => {
const newTitle = getYouTubeVideoTitle();
if (newTitle && newTitle !== videoTitle) {
videoTitle = newTitle;
console.log('标题更新为：', videoTitle);
// 这里可以触发扩展的其他逻辑，比如把标题发送给后台脚本
}
});
// 开始监听页面主体内容的变化
observer.observe(document.body, {
childList: true,
subtree: true
});
特殊情况处理
实际开发中会遇到一些特殊情况，需要额外处理来保证获取的精准性：
- 页面跳转场景：YouTube是单页应用，切换视频时页面不会完全刷新，需要监听URL变化，当URL的
v参数变化时重新获取标题。 - 标题包含特殊字符：获取到的标题可能包含换行符或者多余空格，需要使用
trim()和正则替换处理，保证标题格式干净。 - 权限校验：如果扩展需要获取标题后发送到其他页面，需要在清单文件中添加对应的通信权限，避免功能受限。
调试技巧
开发过程中可以在Chrome的扩展管理页面开启内容脚本的调试模式，直接在YouTube页面的控制台中打印DOM节点，验证选择器的有效性。如果获取不到标题，可以先通过document.querySelector测试选择器是否能匹配到节点，再调整获取逻辑。
Chrome_extensionJavaScriptYouTube_video_titleDOM_parsing修改时间：2026-07-17 22:24:11