如何通过Chrome扩展为YouTube添加按钮？解决按钮短暂显示后消失问题

问题根源 #

YouTube是单页应用，切换视频、页面导航时，标题栏这类核心区域的DOM会被动态重新渲染，你直接插入的按钮会被新生成的节点覆盖，所以刚出现就消失。而且原代码只在页面初始加载时执行一次，没处理后续DOM更新的情况。

解决思路 #

用MutationObserver监听标题元素的变化，每次DOM更新时自动把按钮插回去；同时确保按钮只创建一次，避免重复添加。

修改后的代码 #

// 全局保存按钮实例，避免重复创建
let musicBtn = null;

function createMusicButton() {
  if (musicBtn) return;

  musicBtn = document.createElement("button");
  musicBtn.innerHTML = "Music Button";
  musicBtn.id = "btn-music";
  musicBtn.style.zIndex = "1000"; // 提高层级，防止被原生元素挡住
  musicBtn.style.padding = "8px 16px";
  musicBtn.style.marginRight = "8px";
  // 这里可以加更多样式，让按钮和YouTube风格匹配
}

function insertMusicButton() {
  const titleElement = document.getElementById("title");
  if (!titleElement || !musicBtn) return;

  // 检查按钮是否已经在标题栏里，避免重复插入
  const existingBtn = titleElement.querySelector("#btn-music");
  if (!existingBtn) {
    titleElement.insertBefore(musicBtn, titleElement.children[0]);
  }
}

// 先创建按钮，尝试插入一次
createMusicButton();
insertMusicButton();

// 监听标题栏的DOM变化
const titleObserver = new MutationObserver(() => {
  insertMusicButton();
});

// 先找标题元素，找到就监听它的变化
let targetTitle = document.getElementById("title");
if (targetTitle) {
  titleObserver.observe(targetTitle, { childList: true, subtree: true });
} else {
  // 如果初始加载时标题还没生成，监听body直到标题出现
  const bodyObserver = new MutationObserver(() => {
    targetTitle = document.getElementById("title");
    if (targetTitle) {
      bodyObserver.disconnect();
      titleObserver.observe(targetTitle, { childList: true, subtree: true });
      insertMusicButton();
    }
  });
  bodyObserver.observe(document.body, { childList: true, subtree: true });
}

几个关键优化 #

• 全局按钮实例：不用每次DOM变化都重新创建按钮
• 重复插入检查：防止按钮被多次添加
• 双层监听：确保不管标题元素是初始就有还是后来生成的，都能被监听
• 提高z-index：避免按钮被YouTube原生元素遮挡

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