Chrome YouTube标题修改插件切换视频后标题异常问题求助

看起来你遇到了YouTube插件切换视频时的标题状态异常问题，我帮你分析下可能的原因和解决办法~

从你描述的现象——切换视频后标题为空、再切下一个时之前的自定义标题被追加——来看，核心问题应该是插件没有在视频切换时正确重置标题状态：

• 一方面，popup里的自定义输入框没有在视频切换时清空，导致切换后如果直接操作可能传了空值；
• 另一方面，负责修改页面标题的内容脚本（你没贴，但肯定存在）没有在新视频加载时恢复原标题，也没有清空之前存储的自定义标题缓存，导致再次切换时把旧的自定义标题叠加到新视频标题上。

下面是具体的代码修正方案：

第一步：完善popup.js的逻辑 #

补全缺失的函数和视频切换后的处理逻辑：

// 补全获取当前标签页ID的函数
async function getCurrentTabId() {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
  return tab.id;
}

// 完善视频切换后的处理函数
async function handleVideoChange(tabId) {
  // 清空popup中的自定义标题输入框
  document.getElementById('customTitle').value = '';
  // 通知内容脚本：视频已切换，恢复原标题
  if (tabId) {
    await chrome.tabs.sendMessage(tabId, {type: 'RESET_TITLE'});
  }
}

// 补全修改标题的点击事件逻辑
document.getElementById('changeTitle').addEventListener('click', async () => {
  const customTitle = document.getElementById('customTitle').value.trim();
  if (customTitle) {
    const tabId = await getCurrentTabId();
    // 向内容脚本发送修改标题的指令
    await chrome.tabs.sendMessage(tabId, {
      type: 'SET_CUSTOM_TITLE',
      title: customTitle
    });
  }
});

// 原有的DOM加载逻辑保持不变
document.addEventListener('DOMContentLoaded', async () => {
    const tabId = await getCurrentTabId();

    chrome.storage.local.get('autoGenerateOnReload', (result) => {
        document.getElementById('autoSet').checked = result.autoGenerateOnReload || false;
    });

    chrome.runtime.onMessage.addListener((message) => {
        if (message.type === 'VIDEO_CHANGED') {
            handleVideoChange(tabId);
        }
    });
});

第二步：编写/完善内容脚本（content.js） #

这部分是处理页面标题修改和视频切换监听的核心：

// 缓存原视频标题和当前自定义标题
let originalTitle = '';
let currentCustomTitle = '';

// 监听来自popup的消息
chrome.runtime.onMessage.addListener((message) => {
  switch(message.type) {
    case 'SET_CUSTOM_TITLE':
      setCustomTitle(message.title);
      break;
    case 'RESET_TITLE':
      resetToOriginalTitle();
      break;
  }
});

// 修改页面标题的函数
function setCustomTitle(title) {
  const titleElement = document.querySelector('h1.title.style-scope.ytd-video-primary-info-renderer');
  if (titleElement) {
    // 第一次修改时保存原标题
    if (!originalTitle) {
      originalTitle = titleElement.textContent.trim();
    }
    currentCustomTitle = title;
    titleElement.textContent = title;
  }
}

// 重置为视频原标题的函数
function resetToOriginalTitle() {
  const titleElement = document.querySelector('h1.title.style-scope.ytd-video-primary-info-renderer');
  if (titleElement && originalTitle) {
    titleElement.textContent = originalTitle;
    // 清空缓存，避免影响下一个视频
    originalTitle = '';
    currentCustomTitle = '';
  }
}

// 监听YouTube视频切换事件（SPA页面用MutationObserver监听标题变化）
function observeVideoChange() {
  const targetNode = document.querySelector('#container.style-scope.ytd-video-primary-info-renderer');
  if (!targetNode) return;

  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'childList') {
        const newTitle = document.querySelector('h1.title.style-scope.ytd-video-primary-info-renderer')?.textContent.trim();
        // 确认是新视频加载，通知popup更新状态
        if (newTitle && newTitle !== currentCustomTitle) {
          chrome.runtime.sendMessage({type: 'VIDEO_CHANGED'});
          originalTitle = newTitle;
          currentCustomTitle = '';
        }
      }
    });
  });

  observer.observe(targetNode, { childList: true, subtree: true });
}

// 页面加载完成后初始化监听
window.addEventListener('load', () => {
  setTimeout(observeVideoChange, 1000); // 延迟确保页面元素加载完毕
});

关键逻辑说明 #

1. 视频切换时的状态重置：通过handleVideoChange函数清空popup输入框，并通知内容脚本恢复原标题，避免空标题问题；
2. 标题状态缓存管理：用originalTitle和currentCustomTitle跟踪当前标题状态，切换视频时清空缓存，防止旧自定义标题被叠加；
3. 可靠的视频切换监听：用MutationObserver监听YouTube标题元素的变化，比单纯监听路由更准确，适配YouTube的SPA页面特性。

备注：内容来源于stack exchange，提问作者Mwenedata Zesta