Chrome扩展变量作用域异常：YouTube视频覆盖层数组未正确更新

嘿，这个问题我之前做Chrome扩展时也碰到过！结合YouTube动态DOM的特性，大概率是这几个坑导致的，咱们一步步排查：

1. 先检查数组的声明与引用问题 #

如果你的x数组是在assign()函数外面声明的（比如全局变量或者闭包变量），那每次调用assign()时可能只是在旧数组的引用上修改，而不是重新获取最新的DOM元素。举个例子：

// 错误示范：全局数组会保留旧元素引用
let x = [];
function assign() {
  x[3] = document.querySelector('.your-target-class');
}

这种情况下，哪怕页面DOM更新了，x数组里的元素还是指向之前的旧节点。解决办法很简单：把数组声明移到assign()内部，每次调用都重新初始化，确保拿到的是当前页面的最新元素：

// 正确示范：每次调用都创建新数组，获取最新DOM
function assign() {
  const x = []; // 内部声明，每次调用都是全新数组
  // 重新查询当前页面的目标元素
  x[3] = document.querySelector('.stable-target-selector');
  // 其他元素的赋值也都要重新查询，别用旧缓存
}

2. 适配YouTube的动态DOM加载 #

YouTube的页面内容是异步动态替换的（点击链接不会刷新整个页面），如果assign()在新内容还没加载完就执行了，那拿到的还是旧页面的元素。这时候你需要：

• 给assign()加个延迟，或者用MutationObserver监听目标区域的DOM变化，等新内容加载完成后再执行：

// 监听YouTube播放器区域的DOM变化（替换成你要覆盖层的目标区域）
const targetArea = document.querySelector('#player-container');
const observer = new MutationObserver((mutations) => {
  // 当DOM更新后，调用assign()获取最新元素
  assign();
});

// 配置监听选项：监听子元素变化和整个子树
observer.observe(targetArea, { childList: true, subtree: true });

3. 检查选择器的稳定性 #

如果你的选择器用了类似id="xxx"这种可能会动态变化的属性，那YouTube更新页面后，新元素的ID可能已经变了，导致每次选到的还是旧元素。建议用更稳定的类名或者属性选择器，比如：

// 优先用YouTube固定的类名，比如视频播放区域的类
x[3] = document.querySelector('.html5-video-player .video-stream');

4. 加日志排查确认 #

在assign()里加几行日志，看看拿到的元素是不是真的没更新：

function assign() {
  const x = [];
  x[3] = document.querySelector('.your-selector');
  console.log('当前x[3]元素:', x[3]);
  console.log('元素的唯一标识:', x[3]?.dataset.videoId); // 用元素的自定义属性确认是不是新元素
}

如果日志里的元素标识一直没变，那就是选择器或者DOM加载时机的问题；如果标识变了但数组没更新，那就是数组引用的问题。

按照这几步排查下来，应该能解决数组不更新的问题啦！

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