2

I'm building a Chrome Extension which involves some communication between background script and override page's script.

background.js (background script):

function deleteWord(wordTransPair) {
   // getWords returns a Promise
  return getWords().then(function(words) {
    wordsLen = words.length;
    console.log("wordsLen in cb f: ", wordsLen);
    console.log("words arr: ", words);
    for (let i = 0; i < wordsLen; i++) {
      if (
        words[i][0] === wordTransPair[0] &&
        words[i][1] === wordTransPair[1]
      ) {
        words.splice(i, 1);
        break;
      }
    }
    let updatedWords = words.length;
    chrome.storage.local.set({ fishky: words }, function() {});

    wordsLen = updatedWords;
    console.log(wordsLen);
    return wordsLen;
  });
}

deleteWord function returns a promise, and I can't make it to sendResponse() correct value inside of the .then(). sendResponse() works fine outside of the .then() callback.

I was unable to find a way to refactor the code so that sendResponse() sends the number value.

message listener in background.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

  if (request.wordsToDel) {

    // delete words
    deleteWord(request.wordsToDel).then((updatedWordsLen) => {
        console.log(typeof updatedWordsLen); // number
        sendResponse({ wordsCountAfterDel: updatedWordsLen });  // here it doesn't work

    });

    sendResponse({ wordsCountAfterDel: "this response works" }); // here it works as expected 
  }
});

updateGrid.js (override page)

  function deleteItem(e) {
        var wordsToDel = [];
        wordsToDel.push(e.target.parentNode.firstChild.innerText);
        wordsToDel.push(e.target.parentNode.children[1].innerText);

        chrome.runtime.sendMessage({
            wordsToDel: wordsToDel
        }, function (response) { 

            console.log("response: ",response); // prints response: undefined in the first case, and response: { wordsCountAfterDel: "this response works" } in the call outside .then
            if (response.wordsCountAfterDel === 0) {
                renderEmptyList();
            }

        });
Sebastian
  • 1,225
  • 1
  • 16
  • 27
  • Will you kindly post the value of `updatedWordsLen` before you call `sendReponse()`? What is the value intended to be? – matthewninja Aug 26 '17 at 21:59
  • this value changes, the typeof value should be enough. it could be any natural number like 5 or 0. It's array's length value. (edit: I realised this comment looks like i'm being rude. I'm not :D) – Sebastian Aug 26 '17 at 22:03
  • So you're calling `sendReponse` with a number argument, and it works a few lines down when you call it with the object argument `{ wordsCountAfterDel: "this response works" }`? – matthewninja Aug 26 '17 at 22:05
  • I edited the post. I intend to send this number value. It's sending undefined when i check it on the other end. – Sebastian Aug 26 '17 at 22:09
  • Did you check if the number is defined in the .then? – Nikolaus Aug 26 '17 at 22:34
  • Yes, i log the type using console (it's in the snippet i included) – Sebastian Aug 26 '17 at 22:36
  • 1
    As [is documented](https://developer.chrome.com/extensions/runtime#property-onMessage-sendResponse) (the part in **bold**), if you want to call `sendResponse` asynchronously, then you **must** `return true` from your `runtime.onMessage` handler. – Makyen Aug 27 '17 at 03:12

0 Answers0