javascript - Chrome 扩展 - 如何从回调中执行的脚本返回 promise 值

Question

背景.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 对象，安排 Promise 但尚未执行它( a task/microtask is queued )，将刚刚初始化的 test 对象作为最后一条语句，以便它被executeScript 拾取。此外，由于executeScript仅传输对象的JSON可部分，并且test是复杂的类对象，因此传输空对象。您可以通过在控制台中检查 console.log(JSON.stringify(test)) 来手动检查。

要传输异步代码的结果，请使用 messaging :

• 背景.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});
  });
  

注意只有对象的 JSON 可部分通过消息传递进行传输。