密码管理器如何实现全站点邮箱密码输入框自动填充？

直接修改elem.value = "xxx"失效的核心原因：现代前端框架（React/Vue/Svelte等）不会直接从DOM节点读取输入值，而是通过事件监听维护独立的内部状态，直接修改DOM属性不会触发状态同步逻辑，框架提交时读取的仍是旧的内部状态，要么提交值为空，要么重渲染时直接把DOM上你改的值重置。
以下是主流密码管理器通用的适配方案，可覆盖Netflix这类React技术栈的站点：

1. 标准填充流程（兼容90%以上站点） #

不要直接给value属性赋值，按以下顺序操作，模拟真实用户输入的完整行为链：

• 输入框定位：优先匹配带type="email"/type="password"/autocomplete="username"/autocomplete="current-password"属性的可见、非禁用输入框，兜底匹配表单内前两个文本类输入框；需要递归遍历所有Shadow DOM节点、同域iframe内部节点，避免遗漏Web Component、嵌入式组件内的输入框。
• 调用原生value setter赋值：很多站点会重写input元素的value getter/setter拦截脚本修改，必须从HTMLInputElement原型上拿到原生setter执行赋值，绕开拦截：

// 目标输入框元素
const targetInput = /* 你定位到的输入框节点 */;
const fillValue = /* 要填充的邮箱/密码 */;
// 取原生value setter
const nativeValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set;
// 聚焦输入框
targetInput.focus();
// 执行原生赋值
nativeValueSetter.call(targetInput, fillValue);
// 按真实输入顺序触发冒泡事件，缺一不可
targetInput.dispatchEvent(new Event("input", { bubbles: true })); // 核心事件，所有框架都靠这个同步v-model/state
targetInput.dispatchEvent(new Event("change", { bubbles: true }));
targetInput.dispatchEvent(new Event("blur", { bubbles: true }));

2. SPA框架专项兼容 #

如果标准流程在部分React/Vue站点仍不生效（比如部分做了严格状态校验的React站点），可以直接修改框架挂载在DOM上的内部状态，跳过事件同步逻辑：

• React适配：遍历DOM节点的属性，找到以__reactFiber$（React16+）或__reactInternalInstance$（React15及以下）为前缀的属性，拿到fiber节点后，顺着fiber链找到对应输入框的memoizedState，直接修改state中的value值，再触发一次组件重渲染即可。
• Vue适配：Vue2实例会直接挂载在DOM的__vue__属性上，调用$set方法修改v-model绑定的对应值即可；Vue3可通过DOM上_vnode或__vue_app__属性拿到组件实例，直接修改对应响应式状态。
• 通用兜底：如果不想做框架特征判断，可模拟逐字键盘输入：按顺序给输入框触发keydown、keypress、input、keyup事件，每个字符间隔10~20ms模拟真人输入速度，所有框架都能正常识别，仅填充速度稍慢，适合作为标准流程失效后的降级方案。

3. 强校验站点兜底 #

部分高安全等级站点会校验事件的isTrusted属性，判断事件是否为用户真实操作，普通content script触发的事件该属性为false，会被拦截。这种场景下可调用浏览器扩展的chrome.debuggerAPI模拟真实输入，该API触发的事件isTrusted值为true，和真人操作完全一致，仅调用时浏览器会顶部展示调试提示，属于最终兜底方案。

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