Chrome扩展Chrome Storage用户名无法编辑保存问题求助

你遇到的核心问题是两次给同一个「gem」按钮的onclick属性赋值，导致用户名的保存逻辑被密码的保存逻辑完全覆盖——点击按钮时只有密码的代码在运行，用户名的更新操作根本没执行。

问题根源 #

看你的代码：

• 用户名模块先给document.getElementById('gem').onclick赋值了一个保存用户名的函数
• 随后密码模块又给同一个按钮的onclick赋值了保存密码的函数

DOM元素的onclick是单一值，后赋值的函数会直接覆盖之前的，这就是新用户名无法保存的关键原因。

修复方案 #

这里提供两种可行的修复方式，推荐第一种更简洁的合并写法：

方案1：合并逻辑到同一个加载事件中

把用户名和密码的读取、保存逻辑整合到一个window.load事件处理函数里，点击按钮时同时处理两者的保存：

window.addEventListener('load', function load(event) {
    // 读取并填充用户名
    chrome.storage.local.get(['brugernavn'], function(result) {
        if (result.brugernavn !== undefined) {
            document.getElementById('brugernavn').value = result.brugernavn;
        }
    });

    // 读取并填充密码
    chrome.storage.local.get(['adgangskode'], function(result) {
        if (result.adgangskode !== undefined) {
            document.getElementById('adgangskode').value = result.adgangskode;
        }
    });

    // 统一处理保存逻辑（一次set操作更高效）
    document.getElementById('gem').onclick = function() {
        chrome.storage.local.set({
            'brugernavn': document.getElementById('brugernavn').value,
            'adgangskode': document.getElementById('adgangskode').value
        });
    };
});

方案2：用addEventListener绑定点击事件（避免覆盖）

如果想保持逻辑拆分，不要直接赋值onclick，改用addEventListener添加点击事件，这样多个事件处理函数会依次执行：

用户名模块代码修改：

window.addEventListener('load', function load(event) {
    chrome.storage.local.get(['brugernavn'], function(result) {
        if (result.brugernavn !== undefined) {
            document.getElementById('brugernavn').value = result.brugernavn;
        }
    });

    // 用addEventListener绑定保存事件
    document.getElementById('gem').addEventListener('click', function() {
        chrome.storage.local.set({'brugernavn': document.getElementById('brugernavn').value});
    });
});

密码模块代码修改：

window.addEventListener('load', function load(event) {
    chrome.storage.local.get(['adgangskode'], function(result) {
        if (result.adgangskode !== undefined) {
            document.getElementById('adgangskode').value = result.adgangskode;
        }
    });

    // 同样用addEventListener绑定保存事件
    document.getElementById('gem').addEventListener('click', function() {
        chrome.storage.local.set({'adgangskode': document.getElementById('adgangskode').value});
    });
});

额外优化提示 #

1. chrome.storage.local.get的回调参数result永远是对象，无需判断result !== undefined，直接检查对应键是否存在即可
2. 保存时不需要先remove再set，set操作会直接覆盖已有键值，可删除chrome.storage.local.remove代码简化逻辑

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