如何用JavaScript实现谷歌登录页加载后自动填充账号密码？

你的代码目前无法正常工作，核心问题有两个：一是跳转页面后立刻执行填充操作，但新页面还未加载完成，且代码仍在原页面上下文运行，根本操作不到新页面的DOM元素；二是谷歌登录页的输入框ID并非你写的j_username和j_password，DOM结构没对应上。

修正思路 #

1. 必须等目标登录页面完全加载完毕后再执行填充逻辑
2. 适配谷歌登录页实际的DOM结构（账号框ID为identifierId，密码框需在账号验证步骤后才会出现）
3. 普通网页脚本受浏览器安全限制，无法直接跨页面操作，推荐用浏览器扩展的content script实现（适合自用场景）

修正后的代码（浏览器扩展content script版） #

// 监听页面加载完成事件
window.addEventListener('load', () => {
    // 从localStorage读取用户数据，做容错处理
    const dataUser = JSON.parse(localStorage.getItem('user') || '[]');
    if (dataUser.length === 0) return;

    // 取第一个用户数据，可根据需求调整索引
    const { user, password } = dataUser[0];

    // 填充账号输入框
    const usernameInput = document.getElementById('identifierId');
    if (usernameInput) {
        usernameInput.value = user;
        // 触发input事件，让页面识别到内容已填充
        usernameInput.dispatchEvent(new Event('input'));
    }

    // 监听密码框的出现（密码框是账号下一步后才加载的）
    const passwordObserver = new MutationObserver((mutations) => {
        const passwordInput = document.querySelector('input[type="password"]');
        if (passwordInput && !passwordInput.value) {
            passwordInput.value = password;
            passwordInput.dispatchEvent(new Event('input'));
            passwordObserver.disconnect(); // 填充完成后停止监听
        }
    });

    // 监听整个页面的DOM变化
    passwordObserver.observe(document.body, { childList: true, subtree: true });
});

关键注意点 #

• 谷歌登录页的DOM结构会不定期更新，不要硬编码固定ID，优先用标签类型、属性等通用选择器
• 必须触发input事件，否则页面可能识别不到填充的内容，导致无法进入下一步
• localStorage存储密码存在安全风险，建议优先使用浏览器自带的密码管理功能，或对敏感数据加密后存储
• 如果不是开发浏览器扩展，普通网页脚本无法实现跨页面自动填充，因为页面跳转后原脚本会直接失效

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