JS脚本自动添加YouTube广告断点遇标记不显示问题求助

问题核心 #

直接修改input.value并触发change事件无法生效，是因为YouTube的广告编辑器基于React类框架实现，依赖真实输入事件而非DOM属性变更；同时原脚本存在时间戳生成错误、连续点击失效等问题，导致广告标记未被系统识别。

具体修复方案 #

1. 修正时间戳生成逻辑
   原脚本生成的时间戳格式混乱（包含多余小时位、计算逻辑错误），导致YouTube无法解析。替换为符合要求的MM:SS格式生成：

const videoLengthInSeconds = 615;
const breakInterval = 15;
// 预留最后30秒不插广告，避免接近视频结尾的断点被系统拒绝
const maxPossibleBreaks = Math.floor((videoLengthInSeconds - 30) / breakInterval);
const desiredAmountOfBreaks = Math.min(maxPossibleBreaks, Math.round(videoLengthInSeconds / breakInterval));

// 生成正确的MM:SS格式时间戳，从第一个间隔点开始
const breakTimeStamps = Array.from({ length: desiredAmountOfBreaks }, (_, i) => {
  const totalSeconds = (i + 1) * breakInterval;
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
});

2. 模拟真实输入流程
   框架优先监听input事件而非change，需完整模拟用户输入的交互流程（聚焦→选中→输入→失焦），修改fillBreaksTimeStamps函数：

function fillBreaksTimeStamps() {
  getAllAdsInDom().forEach((adsItem, i) => {
    // 使用类选择器避免ID重复问题（实际页面中ID可能不唯一）
    const adBreakInput = adsItem.querySelector(".ytve-ad-break-timestamp-input");
    if (!adBreakInput || adBreakInput.disabled) return;

    const relatedBreakTimeStamp = breakTimeStamps[i];
    
    // 模拟真实用户输入步骤
    adBreakInput.focus();
    adBreakInput.select(); // 选中现有内容以便一键替换
    document.execCommand('insertText', false, relatedBreakTimeStamp); // 插入目标时间戳
    
    // 触发框架监听的input事件（必须开启冒泡）
    adBreakInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
    
    // 失焦触发编辑器的保存逻辑
    adBreakInput.blur();
  });
}

3. 修复连续点击添加断点失效
   连续快速点击添加按钮会被YouTube的防抖逻辑拦截，需添加间隔延迟：

function start() {
  breakTimeStamps.forEach((_, index) => {
    setTimeout(() => {
      const addButton = document.querySelector("#add-ad-break");
      if (addButton) addButton.click();
    }, index * 600); // 每个点击间隔600ms，确保触发添加逻辑
  });
  doPolling();
}

4. 优化轮询逻辑
   缩短轮询间隔并增加超时保护，避免无限轮询：

let stopPolling = false;
let pollingCount = 0;
const maxPollingTimes = 20; // 最多轮询20次（20秒）

function doPolling() {
  setTimeout(function() {
    if (stopPolling || pollingCount >= maxPollingTimes) return;
    
    pollingCount++;
    const allAdsInDom = document.querySelectorAll(".ytve-ad-breaks-editor-options-panel .ad-break-row");

    if (allAdsInDom.length === breakTimeStamps.length) {
      stopPolling = true;
      fillBreaksTimeStamps();
    } else {
      doPolling();
    }
  }, 1000); // 每秒检查一次DOM状态
}

额外注意事项 #

• 执行脚本前确保YouTube广告编辑器已完全加载（切换到「广告断点」标签页并等待界面渲染完成）
• 如果选择器失效，右键检查输入框元素，更新querySelector的参数为当前页面的正确类名/选择器
• 部分浏览器可能禁用document.execCommand，可替换为adBreakInput.setRangeText(relatedBreakTimeStamp)实现文本插入

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