Chrome扩展刷新后无法稳定添加HTML按钮问题求助

核心问题是目标页面的表格内容为动态渲染（如通过异步请求、前端框架加载），$(document).ready和固定2秒延迟无法精准匹配内容加载完成的时机，导致脚本执行时表格未渲染，无法找到元素添加按钮。

1. 使用MutationObserver监听DOM变化 #

这是处理动态加载内容的可靠方案，能在目标元素（表格行）出现时立即执行按钮添加逻辑，替代不可靠的固定延迟。

修改后的content.js代码：

// 目标元素选择器：表格行
const targetRowSelector = 'tbody > tr';

// 处理新增表格行的逻辑
function processNewRows(rows) {
  rows.forEach((row, key) => {
    // 跳过已添加按钮的行，避免重复
    if (row.querySelector(`#createButton_${key}`)) return;

    // 获取编号元素
    const numberEl = row.querySelector('span.number__container');
    if (!numberEl) return;
    const number = numberEl.innerText;

    // 获取按钮容器
    const targetField = row.querySelector('.target');
    if (!targetField) return;

    // 创建按钮元素
    const button = document.createElement('button');
    button.id = `createButton_${key}`;
    button.value = number;
    button.className = 'btn btn-block secondary-button btn-mp-secondary';
    button.textContent = '+ Create';

    // 绑定点击事件
    button.addEventListener('click', function() {
      this.disabled = true;
      this.textContent = 'Creating...';

      // 注意：确保licenseId已定义（比如从storage或页面提取）
      const requestSettings = {
        url: 'https://www.example.com/api/post',
        method: 'POST',
        timeout: 0,
        data: {
          name: licenseId,
          number: number
        }
      };

      $.ajax(requestSettings)
        .done(response => {
          const resObj = JSON.parse(response);
          if (resObj.code === 200) {
            button.className = 'btn btn-block secondary-button btn-mp-success';
            button.textContent = 'Success!';
          } else {
            button.textContent = 'Not Created!';
            window.alert(resObj.content);
          }
        })
        .fail(() => {
          button.textContent = 'Failed!';
        });
    });

    targetField.appendChild(button);
  });
}

// 初始化DOM变化监听器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        let newRows = [];
        // 检查当前节点是否是目标行
        if (node.matches(targetRowSelector)) {
          newRows.push(node);
        } else {
          // 遍历子节点寻找目标行
          newRows = Array.from(node.querySelectorAll(targetRowSelector));
        }
        processNewRows(newRows);
      }
    });
  });
});

// 开始监听整个文档的DOM变化
observer.observe(document.body, {
  childList: true,
  subtree: true // 监听所有嵌套层级的元素变化
});

2. 额外优化建议 #

• 事件委托优化：如果表格容器固定，可通过事件委托绑定点击逻辑，减少内存占用：

  document.querySelector('tbody').addEventListener('click', e => {
    if (e.target.matches('.btn-mp-secondary, .btn-mp-success')) {
      // 复用原点击逻辑，通过e.target获取当前按钮
    }
  });
  

• 修复未定义变量：代码中licenseId未声明，需确保其有合法值（如从chrome.storage读取或页面提取）。
• 移除冗余代码：无需再保留$(document).ready和setTimeout，MutationObserver会自动处理内容加载时机。

内容的提问来源于stack exchange，提问作者TR - SauRon