LinkedIn人脉页Chrome扩展连接计数功能故障排查求助

1. 元素选择器错误：人脉页的「Inviter」按钮不在你原代码检测的.artdeco-modal.send-invite弹窗容器内，用divSpecifique.querySelector查找自然找不到目标按钮。
2. 动态加载未处理：LinkedIn是单页应用，人脉页的列表元素滚动加载，直接执行querySelector可能在按钮未渲染时就运行，导致绑定失败。
3. 逻辑分支错误：你添加的人脉页判断分支放在divSpecifique不存在的else if里，但原函数找到弹窗div后会直接return，分支逻辑无法触发。

改用MutationObserver监听页面元素动态变化，拆分弹窗按钮和人脉页按钮的检测逻辑：

// 你的原有计数函数，保持逻辑不变
function verifierJourSemaine() {
  // 示例计数逻辑：从localStorage读取、递增、存储
  let count = parseInt(localStorage.getItem('linkedin_invite_count') || 0);
  count++;
  localStorage.setItem('linkedin_invite_count', count);
  console.log(`已发送请求次数：${count}`);
}

// 绑定弹窗内的Send/Envoyer按钮事件
function bindModalButtons() {
  const modal = document.querySelector(".artdeco-modal.artdeco-modal--layer-default.send-invite");
  if (!modal) return;

  const buttons = modal.querySelectorAll('button[aria-label^="Envoye"], button[aria-label^="Send"]');
  buttons.forEach(btn => {
    // 避免重复绑定事件
    if (!btn.dataset.inviteBound) {
      btn.addEventListener('click', verifierJourSemaine);
      btn.dataset.inviteBound = 'true';
    }
  });
}

// 绑定人脉页的Inviter按钮事件
function bindMyNetworkButtons() {
  if (!window.location.href.includes("linkedin.com/mynetwork/")) return;

  const buttons = document.querySelectorAll('button[aria-label^="Inviter"]');
  buttons.forEach(btn => {
    if (!btn.dataset.inviteBound) {
      btn.addEventListener('click', verifierJourSemaine);
      btn.dataset.inviteBound = 'true';
    }
  });
}

// 监听页面元素变化，实时绑定事件
function setupObserver() {
  const observer = new MutationObserver(() => {
    bindModalButtons();
    bindMyNetworkButtons();
  });

  // 监听整个文档的子元素变化
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// 初始化执行
setupObserver();
// 首次加载时绑定已存在的按钮
bindModalButtons();
bindMyNetworkButtons();

• 拆分逻辑：将弹窗按钮和人脉页按钮的绑定逻辑分离，避免互相干扰。
• MutationObserver：解决动态加载元素的绑定问题，确保新渲染的按钮能被检测到。
• 防止重复绑定：通过给按钮添加data-invite-bound属性，避免同一按钮多次绑定点击事件，防止计数重复触发。
• 独立分支判断：人脉页的判断独立执行，不依赖弹窗div的存在与否。

• LinkedIn的DOM结构可能更新，若后续按钮选择器失效，需重新检查按钮的aria-label或class属性。
• 确保Chrome扩展拥有https://www.linkedin.com/*的权限，否则无法正常注入脚本。

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