如何用Chrome扩展编辑YouTube字幕及解决字幕元素获取失败问题

我之前折腾YouTube字幕样式的时候也碰到过一模一样的问题！你猜的没错，字幕元素是视频播放后才动态插入DOM的，而且一开始可能处于隐藏状态，直接在页面加载完就调用getElementsByClassName肯定拿不到。下面给你两种可行的解决思路，以及如何把这个逻辑做成Chrome扩展的完整方案：

一、解决无法获取ytp-caption-segment元素的问题 #

1. 使用MutationObserver监听DOM变化（推荐） #

这是最优雅的方式，能精准捕获到字幕元素被添加到DOM的瞬间，不需要轮询浪费资源。代码示例如下：

// 先定位YouTube字幕的父容器，一般是.ytp-caption-window-container
const targetNode = document.querySelector('.ytp-caption-window-container');

if (targetNode) {
  // 配置监听规则：监听子元素的添加操作
  const config = { childList: true, subtree: true };

  // DOM变化时触发的回调
  const callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
      if (mutation.type === 'childList') {
        // 尝试获取所有字幕片段元素
        const subtitles = document.getElementsByClassName('ytp-caption-segment');
        if (subtitles.length > 0) {
          // 这里就可以操作字幕元素了，比如修改样式
          Array.from(subtitles).forEach(seg => {
            seg.style.fontFamily = 'Arial, sans-serif';
            seg.style.fontSize = '24px';
            seg.style.color = '#ff4500';
          });
          // 如果只需要处理一次字幕加载，可以在这里停止监听
          // observer.disconnect();
        }
      }
    }
  };

  // 创建观察者实例并启动监听
  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
} else {
  // 如果一开始没找到字幕容器，就监听body的变化，直到容器出现
  const bodyObserver = new MutationObserver((mutations) => {
    const newTarget = document.querySelector('.ytp-caption-window-container');
    if (newTarget) {
      bodyObserver.disconnect();
      // 找到容器后再初始化监听逻辑
      setupCaptionObserver(newTarget);
    }
  });
  bodyObserver.observe(document.body, { childList: true, subtree: true });
}

// 把监听逻辑抽成复用函数
function setupCaptionObserver(targetNode) {
  const config = { childList: true, subtree: true };
  const callback = function(mutationsList) {
    const subtitles = document.getElementsByClassName('ytp-caption-segment');
    if (subtitles.length > 0) {
      Array.from(subtitles).forEach(seg => {
        seg.style.fontWeight = 'bold';
      });
    }
  };
  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
}

2. 定时器轮询（简单粗暴但有效） #

如果觉得MutationObserver有点复杂，用定时器每隔几百毫秒检查一次元素是否存在也是个办法：

const checkSubtitles = setInterval(() => {
  const subtitles = document.getElementsByClassName('ytp-caption-segment');
  if (subtitles.length > 0) {
    // 操作字幕元素，比如修改字体
    Array.from(subtitles).forEach(seg => {
      seg.style.fontFamily = 'Courier New';
    });
    // 找到元素后清除定时器，避免重复执行
    clearInterval(checkSubtitles);
  }
}, 200); // 每隔200ms检查一次

二、制作Chrome扩展来编辑YouTube字幕 #

把上面的逻辑封装成Chrome扩展，就能每次打开YouTube自动生效。步骤如下：

1. 扩展文件结构 #

创建一个文件夹，里面放两个核心文件：

youtube-subtitle-styler/
├─ manifest.json
└─ content.js

2. 编写manifest.json #

这个是扩展的配置文件，指定权限、匹配网站等：

{
  "manifest_version": 3,
  "name": "YouTube字幕样式编辑器",
  "version": "1.0",
  "description": "自定义YouTube视频字幕的字体、颜色和大小",
  "content_scripts": [
    {
      "matches": ["*://www.youtube.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "permissions": []
}

3. 编写content.js #

把之前的MutationObserver逻辑放这里，自定义你的字幕样式：

// 等待页面完全加载
window.addEventListener('load', () => {
  waitForCaptionContainer();
});

// 等待字幕容器出现
function waitForCaptionContainer() {
  const targetNode = document.querySelector('.ytp-caption-window-container');
  if (targetNode) {
    setupCaptionObserver(targetNode);
  } else {
    setTimeout(waitForCaptionContainer, 500);
  }
}

// 设置字幕元素监听
function setupCaptionObserver(targetNode) {
  const config = { childList: true, subtree: true };
  const callback = function(mutationsList) {
    const subtitles = document.getElementsByClassName('ytp-caption-segment');
    if (subtitles.length > 0) {
      Array.from(subtitles).forEach(seg => {
        // 这里自定义你的字幕样式
        seg.style.fontFamily = '微软雅黑, sans-serif';
        seg.style.fontSize = '28px';
        seg.style.color = '#ffffff';
        seg.style.textShadow = '2px 2px 4px rgba(0,0,0,0.8)';
      });
    }
  };
  const observer = new MutationObserver(callback);
  observer.observe(targetNode, config);
}

4. 加载扩展到Chrome #

• 打开Chrome，输入chrome://extensions/进入扩展管理页面
• 开启右上角的「开发者模式」
• 点击「加载已解压的扩展程序」，选择你创建的youtube-subtitle-styler文件夹
• 之后打开YouTube视频并开启字幕，就能看到自定义的样式自动生效了

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