如何使用JS的insertAdjacentHTML实现Chrome扩展动态分辨率按钮

问题根源 #

你之前的代码存在两个核心问题：

1. 把按钮创建逻辑包裹在DOMContentLoaded事件监听里，但执行insertAdjacentHTML时，页面加载完成的事件大概率已经触发过，导致回调函数根本不会执行。
2. 用list.forEach循环绑定事件监听，会重复创建多个相同的事件监听，属于冗余操作。

修改后的完整代码 #

const list = ['240p', '480p', '720p', '1080p'];
const videoInfoContainer = document.querySelector('.video-info-container');

// 插入分辨率选择的容器结构
videoInfoContainer.insertAdjacentHTML('beforebegin',`
  <ul class="mlext-container">
    <li>AVALIABLE RESOLUTIONS: <span> <div id="resolution-container"></div> </span></li>
  </ul>`);

// 直接获取刚插入的容器元素
const resolutionContainer = document.getElementById('resolution-container');

// 循环创建并添加分辨率按钮
list.forEach(resolution => {
  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = resolution; // 用textContent更安全，避免不必要的HTML解析
  button.className = 'btn-styled';
  button.id = resolution;

  // 绑定点击事件，简化逻辑
  button.addEventListener('click', () => {
    console.log(`选择分辨率：${resolution}`);
    // 这里添加对应分辨率的下载逻辑
    // 示例：
    // switch(resolution) {
    //   case '240p':
    //     // 处理240p视频下载
    //     break;
    //   case '480p':
    //     // 处理480p视频下载
    //     break;
    //   // 其他分辨率同理
    // }
  });

  resolutionContainer.appendChild(button);
});

关键修改说明 #

• 移除了多余的DOMContentLoaded监听：插入容器后直接操作DOM即可，无需等待页面加载完成（Chrome扩展内容脚本通常在页面DOM就绪后运行）。
• 替换容器ID为resolution-container：避免和页面原有DOM元素的ID冲突。
• 使用textContent替代innerHTML：减少XSS风险，同时提升性能。
• 改用addEventListener绑定点击事件：比直接赋值onclick更灵活，也避免闭包变量陷阱。
• 简化点击事件逻辑：直接利用循环变量resolution判断，无需多个if分支。

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