расширение Chrome - Как вернуть значение посыла из исполняемого скрипта в функции обратного вызова

Question

Background.js:

chrome.tabs.executeScript(tab.id, 
{ 
    file: "exec_script.js" 
}, function(res) { 
    console.log(res); 
}); 

exec_script.js:

var test = html2canvas(document.body, { 
    allowTaint: false, 
    letterRendering: true, 
    logging: true 
}).then(function (canvas) { 
    var dataUrl = canvas.toDataURL(); 
    var bImage = dataUrl.replace('data:image/png;base64,', ''); 
}); 
test 

Насколько я знаю, последний оператор в exec_script.js должен быть передан в обратный вызов в качестве параметра результата. Но он возвращает пустой объект.

Но если я, как следующее exec_script.js:

var test = "good"; 
test 

Она возвращает значение переменной на обратный вызов.

Также вкладка не сфокусирована.

Answer 1

Результат, полученный chrome.tabs.executeScript, производится основной частью исполняемого скрипта, другими словами, это стандартное поведение синхронного JavaScript.

В вашем случае синхронная часть создает test объекта, расписание обещания, но не выполняет его еще (a task/microtask is queued), ставит только инициализированные test объекта как последнее утверждение, так что он получает взял executeScript. Кроме того, поскольку executeScript переносит только JSON-уязвимую часть объектов, а test является сложным объектом класса, переносится пустой объект. Вы можете проверить его вручную, проверив console.log(JSON.stringify(test)) в консоли.

Для передачи результатов асинхронного использования кода messaging:

• background.js

  chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) { 
      console.log(sender.tab, msg); 
      // do something 
  }); 
  chrome.tabs.executeScript(tab.id, {file: "exec_script.js"}); 
  

• exec_script.js

  var test = html2canvas(document.body, { 
      allowTaint: false, 
      letterRendering: true, 
      logging: true 
  }).then(function(canvas) { 
      var dataUrl = canvas.toDataURL(); 
      var bImage = dataUrl.replace('data:image/png;base64,', ''); 
      chrome.runtime.sendMessage({dataUrl: dataUrl}); 
  }); 
  

N.B. только передаваемая JSON часть объектов передается посредством обмена сообщениями.