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