Chrome扩展动态列表创建问题：启用chrome.storage.sync代码后列表为空

API 探路者

2026-5-14

解决Chrome扩展中chrome.storage.sync异步导致的动态列表问题

这问题我太熟了——chrome.storage.sync.get是异步操作，你现在的代码逻辑顺序完全错了！

你看，当前代码里，makeUL(options)和appendChild是同步执行的，这时候浏览器还没从storage里拿到数据，你的options数组还是初始的['','Second Option','Third Option']，而且更关键的是：当storage的回调函数最终执行、把新的key push到options里时，列表早就已经生成并插入DOM了，新的数据根本没被用上。如果storage里刚好没有数据，那列表就只会显示初始的空字符串和另外两个选项，但你说页面空，大概率是因为初始第一个元素是空，加上异步逻辑错位导致的显示问题，但核心还是异步顺序的锅。

修复方案

把生成列表和插入DOM的代码完全移到chrome.storage.sync.get的回调函数内部，确保我们是在拿到storage数据之后再处理列表：

修改后的util.js代码：

var options = ['', 'Second Option', 'Third Option'];

function makeUL(array) {
  var list = document.createElement('ul');
  for(var i = 0; i < array.length; i++) {
    var item = document.createElement('li');
    item.appendChild(document.createTextNode(array[i]));
    list.appendChild(item);
  }
  return list;
}

// 先获取storage数据，再生成列表
chrome.storage.sync.get(null, function(items) {
  var allKeys = Object.keys(items);
  allKeys.forEach(function(key) {
    console.log(key);
    options.push(key);
  });
  // 现在数据已经更新，再生成并插入列表
  const mList = document.getElementById('mList');
  if(mList) {
    mList.appendChild(makeUL(options));
  }
});