如何强制Chrome自动填充表单字段并允许JavaScript读取其值？

Chrome的自动填充存在安全限制：在用户未触发任何页面交互前，自动填充的表单值对JavaScript不可见，这是为了防止恶意脚本窃取凭据。针对你的场景，以下几个方案可以尝试：

方案1：利用表单原生提交方法绕过JS读取限制 #

不需要读取输入框值，直接调用表单的submit()方法提交。Chrome在处理原生表单提交时，会使用自动填充的真实值，即使JS无法读取到：

// 检测到autofill后直接提交表单
if (document.querySelectorAll('*:-webkit-autofill').length > 0) {
  const loginForm = document.querySelector('form');
  if (loginForm) {
    loginForm.submit();
  }
}

注意：如果页面依赖JS验证逻辑（比如提交前的输入检查），这个方法可能会跳过验证，需要结合实际情况调整。

方案2：监听autofill样式变化并触发输入框状态更新 #

通过MutationObserver监听输入框的:-webkit-autofill样式变化，一旦检测到，触发输入框的focus()和blur()，再延迟读取值：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    const target = mutation.target;
    // 检测是否触发了autofill样式
    if (mutation.attributeName === 'style' && target.matches('*:-webkit-autofill')) {
      target.focus();
      target.blur();
      // 用requestAnimationFrame延迟读取，给Chrome时间同步值
      requestAnimationFrame(() => {
        const inputValue = target.value;
        if (inputValue) {
          // 找到表单并提交
          const form = target.closest('form');
          form?.submit();
        }
      });
    }
  });
});

// 监听所有用户名/密码输入框
document.querySelectorAll('input[type="text"], input[type="password"]').forEach(input => {
  observer.observe(input, { attributes: true });
});

方案3：通过Chrome密码API手动填充凭据（需扩展权限） #

如果你的扩展可以申请额外权限，可直接调用Chrome密码管理器API获取对应页面的凭据，手动填充后提交：

1. 在扩展manifest.json中添加权限：

{
  "permissions": ["passwords", "activeTab"]
}

2. 在扩展脚本中获取并填充凭据：

chrome.passwords.search({ url: window.location.origin }, (credentials) => {
  if (credentials.length === 0) return;
  
  const cred = credentials[0];
  const usernameInput = document.querySelector('input[name="username"], input[name="email"], input[type="text"]');
  const passwordInput = document.querySelector('input[type="password"]');
  
  if (usernameInput && passwordInput) {
    usernameInput.value = cred.username;
    passwordInput.value = cred.password;
    
    // 触发输入事件，触发页面的表单验证逻辑
    usernameInput.dispatchEvent(new Event('input', { bubbles: true }));
    passwordInput.dispatchEvent(new Event('input', { bubbles: true }));
    
    // 提交表单
    usernameInput.form.submit();
  }
});

这个方案需要用户授权访问密码，优势是不受页面autofill限制的影响，稳定性更高。

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