为仅带类名无id的LinkedIn登录按钮添加点击事件监听失效求助

你的代码无法正常运行，基本是以下几类场景导致的，对应逐一修复即可：

• DOM加载时序不匹配导致的绑定报错
  现有代码执行时直接查找sign-in-form__submit-button类名的按钮，如果脚本运行时机早于LinkedIn登录按钮的渲染完成，获取到的元素集合是空的，[0]取值结果为undefined，调用addEventListener时会直接抛出类型错误，后续所有逻辑都不会执行。
  修复方式：
  1. 在扩展的manifest配置中，将内容脚本的注入时机设置为run_at: "document_idle"，确保页面基础DOM渲染完成后再执行注入逻辑
  2. 放弃直接查找单个元素绑定监听器的写法，改用document层面的事件委托做匹配，兼容LinkedIn单页应用的动态渲染特性，从根源上避免元素加载晚于脚本执行导致的绑定失败：

  document.addEventListener('click', (e) => {
    // 匹配命中目标登录按钮时再触发取值逻辑
    if (e.target.closest('button.sign-in-form__submit-button')) {
      getInputs(e);
    }
  }, true) // 开启捕获阶段触发，避免被页面自身的事件逻辑拦截
  

• 取值逻辑的时序与规范问题
  1. 原代码中username、password未使用const/let声明，会自动挂载到全局作用域，不仅不利于调试排查，还容易和页面自身的全局变量产生冲突
  2. 目标按钮是type="submit"类型，点击后会触发表单默认提交跳转，普通冒泡阶段绑定的监听器执行优先级较低，可能在取值逻辑完成前页面就已经发生跳转，导致取值逻辑被打断。
     修复方式：在取值回调中先阻断表单默认提交行为，确保取值完成后再恢复登录提交流程：

  function getInputs(e) {
    // 阻断默认提交行为，避免页面跳转打断取值逻辑
    e.preventDefault();
    // 正确声明变量获取输入框内容
    const username = document.getElementById("session_key").value;
    const password = document.getElementById("session_password").value;
    // 在此处将获取到的凭据传递给扩展后台完成存储即可
    // 取值完成后手动触发表单的正常登录流程
    e.target.closest('form').submit()
  }
  

• 扩展权限配置问题
  需确保扩展的manifest配置中，将https://*.linkedin.com/*地址加入content_scripts.matches和host_permissions列表，否则注入的脚本根本不会在LinkedIn域名下执行，所有逻辑都不会生效。

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