在Chrome扩展中收到响应后执行脚本

Question

我正在尝试创建一个简单的Chrome扩展。当用户点击一个复选框时，一些数据将被发送到后台脚本，并从那里弹出。的数据被成功地发送，它是在弹出

$(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(); 
}