Question

我正在尝试创建一个简单的Chrome扩展程序。当用户单击复选框时，会将几个数据发送到后台脚本并从那里发送到弹出窗口。数据传输成功，并在popup

中存储在localstorage中

$(document).ready(function() {
  chrome.runtime.sendMessage({
    from: 'popup',
    subject: 'getmessage',
  }, function(response) {
    for (var x = 0; x < JSON.parse(response).length; x++) {
      localStorage.setItem(JSON.parse(response)[x].acnumber, JSON.stringify(JSON.parse(response)[x]));
    }
  });
  for (var i = 0, len = localStorage.length; i < len; i++) {
    var datas = JSON.parse(localStorage.getItem(localStorage.key(i)));
    var value = datas;
    console.log(value);
    $('table').append('<tr class="' + value.acnumber + '"><td>' + value.acnumber + '</td><td>' + value.name + '</td><td>' + value.amount + '</td></tr>')
  }
})

问题是我必须打开弹出窗口两次才能看到数据（附在表格中）。在将数据添加到localstorage

之前，循环正在执行

Answer 1

如果要在触发响应回调后立即处理数据，则需要在响应函数内移动append表代码。由于您提到需要多个页面上的数据，因此您可以将chrome.runtime.sendMessage移动到其自己的功能中，并且只有在您还没有数据时才调用它。像

这样的东西

function getMessage() {
  chrome.runtime.sendMessage({
    from: 'popup',
    subject: 'getmessage',
  }, function(response) {
    localStorage['haveMessage'] = true;
    for (var x = 0; x < JSON.parse(response).length; x++) {
      localStorage.setItem(JSON.parse(response)[x].acnumber, JSON.stringify(JSON.parse(response)[x]));
    }
    processMessage();
  });
}

function processMessage() {
  for (var i = 0, len = localStorage.length; i < len; i++) {
    var datas = JSON.parse(localStorage.getItem(localStorage.key(i)));
    var value = datas;
    console.log(value);
    $('table').append('<tr class="' + value.acnumber + '"><td>' + value.acnumber + '</td><td>' + value.name + '</td><td>' + value.amount + '</td></tr>')
  }
}

if (locaStorage['haveMessage']) {
  processMessage();
} else {
  getMessage();
}

在Chrome扩展程序

1 个答案: