Chrome扩展在YouTube添加红色高亮按钮时出现TypeError报错如何解决

现有配置与代码 #

manifest.json #

{
  "name": "Example",
  "version": "0.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "js": ["content.js"],
      "matches": ["<all_urls>"],
      "css": ["style.css"]
    }],
  "browser_action": {
    "default_popup": "addon_menu.html",
    "default_title": "Example"
  }
} 

原有content.js #

console.log("Example is on!");

var  sttndiv = document.createElement("div");
var sttnbtn = document.createElement("button");
sttndiv.appendChild(sttnbtn);
document.getElementById("buttons").getElementsByClassName("yt-live-chat-message-input-renderer")[0].appendChild(sttndiv)[0];

报错信息 #

Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild')

• 核心原因：DOM加载时机不匹配。YouTube属于单页应用，直播聊天输入栏是异步动态渲染的元素，content script默认在页面初始DOM解析完成后就执行，此时你要定位的yt-live-chat-message-input-renderer元素还没有被加载到页面中，getElementsByClassName("yt-live-chat-message-input-renderer")返回空数组，取索引[0]得到undefined，调用appendChild方法就会触发该报错。
• 次要问题：代码存在语法错误。appendChild(sttndiv)[0]写法错误，appendChild方法返回的是被插入的单个DOM元素，不是数组，末尾的[0]无意义，会触发后续报错。
• 特殊情况：如果页面不存在id为buttons的元素，document.getElementById("buttons")也会返回undefined，同样会触发同类报错。

1. 首先修复代码语法错误，删除appendChild后的[0]
2. 增加元素存在性校验，使用MutationObserver监听目标元素，确认元素加载完成后再执行插入逻辑
3. 可选优化：将manifest升级为V3版本（V2版本已被Chrome 88+停止支持，无法上架Chrome应用商店）；将manifest.json中content_scripts的matches规则改为["*://*.youtube.com/*"]，避免扩展在无关网站运行，提升性能。

修复后的content.js示例 #

console.log("Example is on!");

// 提前创建要插入的按钮元素
const sttndiv = document.createElement("div");
const sttnbtn = document.createElement("button");
// 红色高亮样式可直接在这里设置，也可以写在style.css里
sttnbtn.style.background = "red";
sttnbtn.style.color = "#fff";
sttnbtn.style.padding = "4px 12px";
sttnbtn.textContent = "自定义按钮";
sttndiv.appendChild(sttnbtn);

// 监听DOM变化，等待目标元素加载完成
const observer = new MutationObserver(() => {
  const targetContainer = document.querySelector("#buttons .yt-live-chat-message-input-renderer");
  if (targetContainer) {
    targetContainer.appendChild(sttndiv);
    // 插入完成后停止监听，避免重复执行
    observer.disconnect();
  }
});

// 监听整个页面的DOM节点变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

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