如何在浏览器扩展中启用内置密码管理器的记住密码、自动填充功能

首先明确几个基础结论：

• 主流浏览器的内置密码管理器完全支持chrome-extension://协议下扩展页面内表单的凭证保存、自动填充能力
• 开发模式下的未签名扩展不会限制该功能，不是你遇到问题的诱因
• privacy权限和密码管理器识别逻辑完全无关，不需要配置

常见问题及修复方案 #

• 表单字段未加标准识别属性
  浏览器依赖标准属性识别登录字段，给输入框补充对应autocomplete属性即可，用户名输入框设置autocomplete="username"，密码输入框设置autocomplete="current-password"，同时给<form>标签补充合法的action属性，值可以填你的登录接口地址，无后端提交需求也可填#，缺失action属性的表单大概率不会被识别。
• 登录表单放在popup页面中
  大部分浏览器的密码管理器不会在临时popup页面触发保存提示，popup页面会在失焦后立即销毁，浏览器来不及完成保存凭证的交互逻辑。可以将登录流程迁移到扩展的选项页（manifest中options_ui配置的页面）、或者新标签页打开的扩展常驻页面中。
• 异步提交未触发表单原生事件
  如果你使用AJAX/.fetch异步提交登录请求，没有触发原生的submit事件，浏览器会识别不到登录提交动作。可以在异步登录逻辑执行成功后，手动触发一次表单的submit事件，也可以主动调用Credential Management API触发保存：

  // 主动调用浏览器凭证保存接口示例
  if (navigator.credentials) {
    const userCred = new PasswordCredential({
      id: document.querySelector('#username').value,
      password: document.querySelector('#password').value
    });
    navigator.credentials.store(userCred);
  }
  

• 扩展域名被加入密码忽略列表
  可以到浏览器设置的密码管理页面，检查「不保存密码」的域名列表，确认对应chrome-extension://<你的扩展ID>开头的地址没有被加入排除列表。

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