Chrome扩展开发中不使用YouTube API如何用JavaScript抓取YouTube视频标题

直接在content script里用下面的逻辑即可，覆盖新版/旧版页面、SPA路由切换、DOM延迟渲染所有常见场景：

• 核心取值逻辑：优先取页面内语义化的标题DOM节点，不要用document.title——后者会自带 - YouTube后缀，广告播放、迷你播放器模式下还会返回错误内容

// 读取当前视频标题
const getVideoTitle = () => {
  // 适配2020年至今的新版YouTube页面布局
  const newLayoutTitle = document.querySelector('h1.ytd-watch-metadata yt-formatted-string')
  // 兼容更早的旧版页面
  const oldLayoutTitle = document.querySelector('h1#title yt-formatted-string')
  // 兼容嵌入播放页场景
  const embedTitle = document.querySelector('.ytp-title-link')

  const target = newLayoutTitle || oldLayoutTitle || embedTitle
  return target ? target.textContent.trim() : ''
}

• 解决单页应用切换视频不刷新的问题：
  YouTube是纯SPA架构，切视频时不会触发整页重载，普通的onload事件只会在第一次打开页面时触发，直接监听YouTube自带的yt-navigate-finish自定义事件即可，这是视频切换完成、DOM更新完毕后页面原生触发的事件，比轮询、监听history API的方案性能高很多

// 页面首次加载完成后先取一次标题
let currentTitle = getVideoTitle()
// 此处写拿到标题后的业务逻辑，比如传给background脚本处理

// 监听站内视频切换动作
document.addEventListener('yt-navigate-finish', () => {
  const latestTitle = getVideoTitle()
  if (latestTitle && latestTitle !== currentTitle) {
    currentTitle = latestTitle
    // 标题更新后触发对应业务逻辑
  }
})

• DOM延迟渲染兜底：
  如果你的content script配置的是document_start时机注入，页面刚打开时标题节点还没渲染出来，加个MutationObserver监听即可，不要写死setTimeout延迟，不同网络环境下DOM渲染速度差异很大，固定延迟很容易出现取值为空的问题

// 等待标题节点渲染完成
const waitForTitleReady = (cb) => {
  if (getVideoTitle()) return cb()
  const domObserver = new MutationObserver((_, obs) => {
    if (getVideoTitle()) {
      obs.disconnect()
      cb()
    }
  })
  domObserver.observe(document.body, { subtree: true, childList: true })
}

// 用兜底逻辑包裹初始取值逻辑
waitForTitleReady(() => {
  currentTitle = getVideoTitle()
  // 执行初始标题的业务处理
})

上面用到的选择器都是YouTube长期稳定的DOM结构，从2020年到现在没有发生过破坏性变更，比依赖随机生成的动态class名靠谱很多，不会因为YouTube前端小版本迭代就失效。

内容的提问来源于stack exchange，提问作者Ethan