Execute script after receiving a response in Chrome extension

Question

I am trying to create a simple chrome extension. When a user clicks a checkbox a few datas are send to the background script and from there to the popup. The data is transmitted successfully and it is stored in localstorage at popup

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

The problem is that i have to open the popup twice to see the data (appended to the table). The loop is executing before the datas are added to the localstorage

You can delay by using setTimeout and open the popup only after a certain amount of time so that the data is loaded. Not a good solution but works for a temporary solution. — Nirmalya Ghosh, Feb 29 '16 at 07:18
Can you not `append` to `table` right after getting the response? Why is `localstorage` needed here? — aandis, Feb 29 '16 at 07:24
@zack This has to work on multiple pages so if just append the table i will lose the data in another page — Akshay, Feb 29 '16 at 07:28

score 1 · Accepted Answer · answered Feb 29 '16 at 07:51

1

You'll need to move the append table code inside the response function if you want to process the data right after the response callback is fired. Since you mentioned you need the data on multiple pages, you can move the chrome.runtime.sendMessage in its own function and call it only if you don't already have the data. Something like

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

answered Feb 29 '16 at 07:51

aandis

4,084
4
29
40

Thanks this might work (sorry i can't test this as the site where this works is down). Setting `haveMessage` in `localStorage` will (might) work for the first time but what about the second time ? i mean the if statement will be true – Akshay Feb 29 '16 at 08:04
@Akshay `if` statement being true would mean you already have the data stored in `localstorage`. and just need to append it into the table. – aandis Feb 29 '16 at 08:09
When you run it for the first time it works as expected but after that `haveMessage` is true so no matter what you do `haveMessage` will be true as once a value is set in localStorage it will stay there until it is cleared – Akshay Feb 29 '16 at 08:11
This might do the trick `if (locaStorage['haveMessage']) { processMessage(); localStorage['haveMessage'] = false; }` – Akshay Feb 29 '16 at 08:13
Do you *need* to clear it? Because then `chrome.sendMessage` will be called on every page load and there's no point storing the data in `localstorage` Also, you won't be able to access the data on multiple pages without calling `getMessage()` again and again. You should rethink what you are trying to achieve here. – aandis Feb 29 '16 at 08:15
Just a doubt : Does the data stored in the background script get updated on different pages ? – Akshay Feb 29 '16 at 08:27
Thanks it worked :) (had to add `if (locaStorage['haveMessage']) { processMessage(); localStorage['haveMessage'] = false; }` this statement though ) :) – Akshay Feb 29 '16 at 08:38
Oh. I didn't realize `localstorage` store is different for backgroud pages and content scripts. Glad it worked. You can also check out [chrome.storage](https://developer.chrome.com/extensions/storage) – aandis Feb 29 '16 at 09:04

Execute script after receiving a response in Chrome extension

1 Answers1