Chrome扩展键盘快捷键需按两次才更改存储值问题求助

嘿，这个问题我之前也踩过坑！核心原因是你没处理Chrome存储API的异步特性——代码的执行逻辑顺序错了，导致第一次按下快捷键时，还没拿到存储里的目标值就执行了后续修改操作。

问题根源分析 #

你原代码里的chrome.storage.sync.get是异步方法：它不会立刻返回存储结果，而是需要等到浏览器完成存储读取后，才会在回调函数里把result传给你。但你在调用get之后，直接同步执行了toggle = toggle_value(toggle)和chrome.storage.sync.set，这时候toggle要么是未定义状态，要么是之前留存的旧值，完全不是刚从存储里取出来的最新值。

等第一次快捷键的回调跑完，存储里的值才被更新；第二次按下快捷键时，才能读取到第一次更新后的值，所以看起来必须按两次才生效。

修正后的代码 #

把所有依赖存储值的逻辑都放到get的回调函数里，确保拿到存储结果后再执行修改和存储操作：

chrome.commands.onCommand.addListener(function(command) {
  chrome.storage.sync.get([command], function(result) {
    // 处理初始值：如果存储里还没有这个快捷键对应的键，默认设为false（可根据需求调整）
    let toggle = result[command] ?? false; 
    toggle = toggle_value(toggle);
    chrome.storage.sync.set({[command]: toggle }, function() {
      console.log(`已更新${command}的值为: ${toggle}`);
    });
  });
});

如果你习惯现代异步写法，也可以用async/await让代码更清晰：

chrome.commands.onCommand.addListener(async function(command) {
  const result = await chrome.storage.sync.get([command]);
  let toggle = result[command] ?? false;
  toggle = toggle_value(toggle);
  await chrome.storage.sync.set({[command]: toggle });
  console.log(`已更新${command}的值为: ${toggle}`);
});

关键总结 #

所有依赖Chrome存储API返回结果的操作，必须等待异步操作完成后再执行——要么嵌套在回调函数里，要么用async/await处理异步流程，这样第一次按下快捷键时就能完成「读取-修改-存储」的完整流程，无需按第二次。

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